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.44...";
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 >