AnsweredAssumed Answered

How to set SpatialReference on a Route Event in a Map Service in 3.18

Question asked by lorieme on Oct 11, 2016
Latest reply on Oct 24, 2016 by lorieme

I have a map service with two route events:  one with line features for the road, and one with a point for the start of the road.  I set up custom InfoTemplates in my JavaScript which work.  However, when I try to zoom-to the feature, the map zooms across the globe.  I have other static features in the same map service and the zoom-to within the InfoTemplate works great. 

 

I am using the topo basemap which is Web Mercator.  All of my data within my map service in State Plane.  I know within a query task and identify task, you can set the spatial reference to match the basemap.  Do I need to define a Graphic with the SpatialReference and then assign the InfoTemplate?

 

Or, is there a better approach to get a popup with the information that zooms to the feature for a route event that is using a route layer in State Plane projection.

 

Here's the code after the require / function:

 

parser.parse();

//This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to

//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic

//for details on setting up a proxy page.

esriConfig.defaults.io.proxyUrl = "/proxy/";

esriConfig.defaults.io.alwaysUseProxy = false;

var legendLayers = [];

var visible = [];

 

map = new Map("map", {

  sliderOrientation: "vertical",

  sliderPosition: "top-left",

  basemap: "topo",

   center: [-117.427677, 47.634390],

   zoom: 10,

  sliderStyle: "small"

}); //end map

 

//home button

var home = new HomeButton({

    map: map

}, "HomeButton");

home.startup();

//*********************************************************************

// define popup info

//*********************************************************************

var _bridgeInfoContent = "<div class=\'bridgeInfoContent\'></div>";

 

var _bridgeInfoTemplate = new InfoTemplate();

_bridgeInfoTemplate.setTitle("<b>Bridge</b>");

_bridgeInfoTemplate.setContent("Bridge Number: <b>${BRIDGE_NO}</b><br>Bridge Name: <b>${bridge_name}</b><br>" +

"<br>${bridge_symbol:getRestriction}<br>" +

_bridgeInfoContent);

 

var _noTrucksInfoContent = "<div class=\'noTrucksInfoContent\'></div>";

 

var TrafficCodeURL = "https://www.municode.com/library/wa/spokane_county/codes/code_of_ordinances?nodeId=TIT46MOVE_CH46.44SIWELO_46.44.0802RETRCOSTRO";

 

var _noTrucksInfoTemplate = new InfoTemplate();

_noTrucksInfoTemplate.setTitle("<b>No Trucks Route</b>");

_noTrucksInfoTemplate.setContent("Road Name: <b>${RoadName}</b><br>Resolution: <b>${ResolutionNumber}</b><br>" +

"</br><a rel='external' target=_blank' href='" + TrafficCodeURL + "'>County Code</a>" +

_noTrucksInfoContent);

 

var _travelImpactRoadInfoContent = "<div class=\'travelImpactRoadInfoContent\'></div>";

var _travelImpactRoadInfoTemplate = new InfoTemplate();

_travelImpactRoadInfoTemplate.setTitle("<b>Road Traffic Impact</b>");

_travelImpactRoadInfoTemplate.setContent("<b><u>${TravelImpactCategory}</b> on <b>${RoadName}</u></b>" +

"</br>from<b> " + "${BeginDescr:getRoadDescription}" +

"</br></b>to<b> " + "${EndDescr:getRoadDescription}</b>" +

"</br></br><b><u>${TravelImpact}</u></b>" +

"</br>${TravelImpactDetail}</br><b>${TravelImpactStartDate:DateFormat(datePattern:'MM/dd/yyyy', selector:'date')} - " +

"${TravelImpactEndDate:DateFormat(datePattern:'MM/dd/yyyy', selector:'date')}</b>" +

"<br>${LanesAffected}, ${LaneDirection}" +

"</br><br><b><u>${ProjectName}</u></b></br>${ProjectDescription}" +

"</br><b>${ProjectStartDate:DateFormat(datePattern:'MM/dd/yyyy', selector:'date')} - " +

"${ProjectEndDate: DateFormat(datePattern:'MM/dd/yyyy', selector:'date')}</b>" +

"${ProjectURL:getURL}" +

"</br></br><b>Contact: </b>${ContactName}. ${ContactPhone}" +

_travelImpactRoadInfoContent);

  

//*********************************************************************

// map layers from published map service

//*********************************************************************

var bridgesIndex = 0;

var travelImpactSiteIndex = 1;

var travelImpactRouteIndex = 2;

//var restrCurrIndex = 4;

//var restrFutIndex = 5;

var noTrucksIndex = 3;

var cntyBdryURLIndex = 4;

  

//*********************************************

//open/close the accordion when the menu button is clicked

//*********************************************

$("#btnMenu").click(function () {

    $("#AccordionPane").toggle();

});

var allTravelImpactsLayerURL = "http://gis.spokanecounty.org/arcgis/rest/services/Engineering/TravelImpactsDev/MapServer";

//allTravelImpactsLayerOptions.setInfo = {

// layerInfos: [0, 1, 2, 3]

//};

var allTravelImpactsLayer = new ArcGISDynamicMapServiceLayer(allTravelImpactsLayerURL);

allTravelImpactsLayer.setInfoTemplates({

    0: { infoTemplate: _bridgeInfoTemplate },

    2: { infoTemplate: _travelImpactRoadInfoTemplate },

    3: { infoTemplate: _noTrucksInfoTemplate }

});

allTravelImpactsLayer.setVisibleLayers([bridgesIndex, travelImpactSiteIndex, travelImpactRouteIndex, noTrucksIndex]);

  

allTravelImpactsLayer.on("load", buildLayerList);

legendLayers.push({ layer: allTravelImpactsLayer, title: 'MyStuff' });

 

map.addLayer(allTravelImpactsLayer);

  

function buildLayerList() {

  var items = arrayUtils.map(allTravelImpactsLayer.layerInfos, function (info, index) {

  if (info.defaultVisibility) {

       visible.push(info.id);

   }

  return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "'id='" + info.id + "'' /><label for='" + info.id + "'>" + info.name + "</label></br>";

   });

  var ll = dom.byId("layerListDiv");

  ll.innerHTML = items.join(' ');

    allTravelImpactsLayer.setVisibleLayers(visible);

  on(ll, "click", updateLayerVisibility);

     var legendDijit = new Legend({

         map: map,

         layerInfos: legendLayers

     }, "legendDiv");

         legendDijit.startup();

//legendDijit.refresh();

}

 

function updateLayerVisibility() {

  var inputs = query(".list_item");

  var input;

    visible = [];

  arrayUtils.forEach(inputs, function(input) {

  if (input.checked) {

        visible.push(input.id);

    }

    });

  //if there aren't any layers visible set the array to be -1

  if (visible.length === 0) {

        visible.push(-1);

    }

allTravelImpactsLayer.setVisibleLayers(visible);

}

}); //end require/function

 

}); //end of $(document).ready(

  

var getRestriction = function (value, key, data) {

if (value == "weight restr") {

return "<b><u>Load Limits:</u></b><br>3 axles: " + data.weight_restriction_3axle + " tons" +

"<br>5 axles: " + data.weight_restriction_5axle + " tons" +

"<br>6 axles: " + data.weight_restriction_6axle + " tons"

;

} else {

var minvertunder = (data.min_vert_under).toString();

var bridgeft = minvertunder.slice(0, 2);

var bridgein = minvertunder.slice(2, 4);

return "<b><u>Height Restriction:</u></b></br>Minimum Vertical Clearance: <b>" + bridgeft + " ft " + bridgein + " in</b>";

}

};

 

var getDescription = function (value, key, data) {

desc1 = value.split(":at ");

desc2 = bdesc1[1].split("@");

return desc2;

};

 

var getURL = function (value, key, data) {

if (value.length == 0) {

return " ";

}

else {

return "</br><a rel='external' target=_blank' href='" + value + "'>Project Details</a>"

}

};

  

</script>

</head >

<body >

<div id="header">

<button class="btnheader" id="btnPublicWorks" onclick="window.location.href = 'http://www.spokanecounty.org/257/Public-Works'">

<img src="../Logos/PublicWorksLogoThumbnail.png" />

</button>

<span id="spanHeader">Travel Impacts</span>

<div class="dropdown">

<button class="btnheader" id="btnMenu"><img src="../icons/icons-png/bars-white.png" /> Menu</button>

</div>

</div>

<div id="map" class="page-map">

<div class="ui-widget-content" id="AccordionPane" hidden="hidden">

<div class="accordion">

<div class="accordion-section">

<a class="accordion-section-title" href="#accordion-1">Legend</a>

<div id="accordion-1" class="accordion-section-content">

<p id="legendDiv"></p>

</div><!--end .accordion-section-content-->

</div><!--end .accordion-section-->

<div class="accordion-section">

<a class="accordion-section-title" href="#accordion-2">Layer List</a>

<div id="accordion-2" class="accordion-section-content">

<p id="layerListDiv"></p>

</div><!--end .accordion-section-content-->

</div><!--end .accordion-section-->

 

</div><!--end .accordion-->

</div><!--end .ui-widget-content-->

 

</div > <!--end .page-map-->

  

  

<div id="HomeButton" > </div >

  

</body >

</html >

Outcomes