topic Re: How to set SpatialReference on a Route Event in a Map Service in 3.18 in ArcGIS JavaScript Maps SDK Questions

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

LoriEmerson_McCormack — Tue, 11 Oct 2016 17:10:34 GMT

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 >

</button>

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

</div>

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

</div>

</div>

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

</div>

</div>

</div>

</div>

</div >

</body >

</html >

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

SarojThapa1 — Tue, 11 Oct 2016 17:52:13 GMT

I don't think you need to define a graphic within the SpatialReference. To use the spatialReference,

include the module "esri/geometry/Extent" as follow:

require(["esri/geometry/Extent"], function (Extent){

var extentInitial = new Extent ({

"xmin": ,

"ymin": ,

"xmax": ,

"ymax" : ,

"spatialReferece": {

"wkid" :

}

});

The extent info is provide in your ArcGIS Server Manager from where you published you maps.

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:37:36 GMT

Lori,

I tried to fill in the blanks you left in your posted code and I don't seem to have a problem with the zoom to in the popup not working properly:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Context Menu for Map and Graphics</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="http//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href= "http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="http://js.arcgis.com/3.18/"></script>
    <script>
        $(document).ready(function() {
            var map;

            require([
                "esri/map", "esri/dijit/HomeButton", "esri/InfoTemplate",
                "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/Legend",
                "esri/config", "dojo/parser",
                "dojo/domReady!"
            ], function(
                Map, HomeButton, InfoTemplate, ArcGISDynamicMapServiceLayer, Legend, esriConfig, parser
            ) {
                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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

LoriEmerson_McCormack — Tue, 11 Oct 2016 22:16:36 GMT

Thank you Saroj and Robert,

Did the Zoom-to work on the "Road Traffic Impact"?

I added the extent, as recommended as well. It seems that the Route Event Layer has an unknown spatial reference.

var extentInitial = new Extent ({

"xmin": 2247987.4441881436,

"ymin": 183897.2240256474,

"xmax": 2753347.979170146,

"ymax": 424748.25412835134,

"spatialReferece": {"wkid": 2926}

});

map = new Map("map", {

extent: extentInitial,

sliderOrientation: "vertical",

sliderPosition: "top-left",

basemap: "topo",

center: [-117.427677, 47.634390],

zoom: 10,

sliderStyle: "small"

}); //end map

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

RobertScheitlin__GISP — Wed, 12 Oct 2016 13:20:48 GMT

Lori,

Can you provide me your code that you have before the parser.parse(); so that I can do more testing? And any css files you may be using.

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

LoriEmerson_McCormack — Wed, 12 Oct 2016 15:47:39 GMT

<!DOCTYPE html>

<html>

<head>

<title>Travel Impacts on Spokane County Roads</title>

<style>

html, body {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

overflow: hidden;

}

#map {

height: 95.2%;

width: 100%;

position: absolute;

z-index: 0 !important;

}

#HomeButton {

position: absolute;

top: 165px;

left: 20px;

z-Index: 50;

}

#header {

height: 70px;

background: #4C604C;

color: #fff /*{b-bar-color}*/;

font-size: 20px;

font-family: Arial;

display: flex;

justify-content: space-between;

align-items: center;

}

#spanHeader {

vertical-align: middle;

}

.btnheader {

background-color: transparent;

color: white;

font-size: 16px;

border: none;

cursor: pointer;

}

#btnPublicWorks {

float: left;

margin-left: 5px;

height: 70px;

}

#btnPublicWorks:hover, #btnMenu:hover {

background: #788B78;

color:#fff;

height: 70px;

}

#instruction {

z-index: 99;

position: absolute;

top: 75px;

left: 50%;

padding: 5px;

margin-left: -175px;

height: 20px;

width: 375px;

background: rgba(25, 25, 25, 0.8);

color: white;

}

#btnInstructionClose {

float: right;

margin: 0;

top: -10px;

display: inline-block;

z-index: 99;

padding: 2px 5px;

background-color: greenyellow;

color: #fff;

}

#btnInstructionClose:hover {

float: right;

top: -10px;

display: inline-block;

z-index: 99;

padding: 2px 5px;

background-color: green;

color: #fff;

}

#instructionsTag {

text-align: center;

}

#instructionsTag div.existingTag {

position: relative;

color: #EEE;

font-size: 15px;

font-family: Georgia, Times, serif;

display: inline-block;

border: 2px solid #324566;

border-radius: 4px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

background-color: #283957;

padding: 8px;

margin: 10px;

}

.dropdown {

position: relative;

display: inline-block;

float: right;

}

.dropdown-content {

display: none;

position: absolute;

right: 0;

background-color: #f9f9f9;

min-width: 160px;

font-size: 14px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

text-align: left;

margin-right: 5px;

}

.dropdown-content a {

color: black;

text-decoration: none;

display: block;

padding: 5px 5px;

}

.dropdown-content a:hover {

background-color: #f1f1f1;

}

.dropdown:hover .dropdown-content {

display: block;

}

#viewDiv {

padding: 0;

margin: 0;

height: 95%;

width: 100%;

}

#layerListPane {

width:25%;

}

.esriLayer {

background-color: #fff;

}

.esriLayerList .esriList {

border-top:none;

}

.esriLayerList .esriTitle {

background-color: #fff;

border-bottom:none;

}

.esriLayerList .esriList ul {

background-color: #fff;

}

.esriLegendServiceLabel {

visibility: hidden;

}

.esriLegendServiceLabel:after {

content: ' ';

display: none;

}

.esriLegendLayerLabel td {

font-weight: bold;

}

.info-window-mobile-button {

display: none;

font-size: inherit;

padding: 0.7em 0.7em;

border-width: 0.125em;

}

@media screen and (max-width: 768px) {

.esriPopup .titleButton.maximize {

display: none;

}

.esriPopup .titleButton.close {

display: none;

}

.info-window-mobile-button {

display: block;

}

#rightPane {

width: 20%;

float:right;

}

/* #legendDiv {

border: solid #97DCF2 1px;

}

#btnMenuClose {

float:right;

}

/* #layerListDiv {

border: solid #97DCF2 1px;

}

.list_item {

margin: 10px;

}

label {

font-size: larger;

}

/*------------------------------------*\

-------- Page Styles: Accordion

\*------------------------------------*/

/* body {

position:relative;

z-index:0;

}

#AccordionPane {

position: absolute;

right: 20px;

top: 10px;

z-index:999;

/* background-color: white;

border: 1px solid black;

width: 300px;

height: 85%;

overflow: auto;

}

#AccordionPane .ui-accordion-header {

margin: 0px;

outline-style: solid;

}

#AccordionPane .ui-accordion-content {

/* width: 100%;

background-color: #f3f3f3;

color: #777;

font-size: 10pt;

line-height: 16pt;

overflow: scroll !important;

}

/*------------------------------------*\

-------- DEMO Code: accordion

-------- source: http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery

\*------------------------------------*/

/*----- Accordion -----*/

.accordion, .accordion * {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

.accordion {

/* overflow:hidden;

box-shadow:0px 1px 3px rgba(0,0,0,0.25);

border-radius:3px;

background:#f7f7f7;

}

/*----- Section Titles -----*/

.accordion-section-title {

width:100%;

padding:15px;

display:inline-block;

border-bottom:1px solid #1a1a1a;

background:#333;

transition:all linear 0.15s;

/* Type */

font-size:1.200em;

text-shadow:0px 1px 0px #1a1a1a;

color:#fff;

}

.accordion-section-title.active, .accordion-section-title:hover {

/* background:#4c4c4c; */

background: #788B78;

/* Type */

text-decoration:none;

}

.accordion-section:last-child .accordion-section-title {

border-bottom:none;

}

/*----- Section Content -----*/

.accordion-section-content {

padding:15px;

display:none;

overflow-y:scroll;

}

#accordion-1 {

padding-top: -50px;

}

p {

min-height: 100px;

max-height: 450px;

}

</style>

$(document).ready(function () {

$('#divLayers').css('max-height', $(window).height() * .80);

$('#panelSearch').css('max-height', $(window).height() * .88);

function querySt(Key) {

var url = window.location.href;

KeysValues = url.split(/[\?&]+/);

for (i = 0; i < KeysValues.length; i++) {

KeyValue = KeysValues.split("=");

if (KeyValue[0] == Key) {

return KeyValue[1];

}

var map;

var defaultVisible = [0];

require([

"esri/map",

"esri/basemaps",

"esri/geometry/Extent",

"esri/Color",

"esri/graphic",

"esri/SpatialReference",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ImageParameters",

"esri/layers/FeatureLayer",

"esri/arcgis/utils",

"esri/dijit/BasemapGallery",

"esri/dijit/LayerList",

"esri/dijit/Legend",

"esri/dijit/HomeButton",

"esri/dijit/Popup",

"esri/dijit/PopupTemplate",

"esri/dijit/PopupMobile",

"esri/geometry/Point",

"esri/graphic",

"esri/tasks/IdentifyTask",

"esri/tasks/IdentifyParameters",

"esri/tasks/query",

"esri/tasks/QueryTask",

"esri/tasks/GeometryService",

"esri/InfoTemplate",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleFillSymbol",

"dojo/dom-class",

"dojo/dom",

"dojo/dom-construct",

"dojo/on",

"dojo/parser",

"dojo/_base/array",

"dojo/query",

"dijit/form/CheckBox",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

], function (

Map,

esriBasemaps,

Extent,

Color,

Graphic,

SpatialReference,

ArcGISDynamicMapServiceLayer,

ImageParameters,

FeatureLayer,

arcgisUtils,

BasemapGallery,

LayerList,

Legend,

HomeButton,

Popup,

PopupTemplate,

PopupMobile,

Point,

Graphic,

IdentifyTask,

IdentifyParameters,

Query,

QueryTask,

GeometryService,

InfoTemplate,

SimpleLineSymbol,

SimpleMarkerSymbol,

SimpleFillSymbol,

domClass,

dom,

domConstruct,

on,

parser,

arrayUtils,

query,

CheckBox

) {

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 = [];

var extentInitial = new Extent ({

"xmin": 2247987.4441881436,

"ymin": 183897.2240256474,

"xmax": 2753347.979170146,

"ymax": 424748.25412835134,

"spatialReferece": {"wkid": 2926}

});

map = new Map("map", {

// extent: extentInitial,

sliderOrientation: "vertical",

sliderPosition: "top-left",

basemap: "topo",

center: [-117.427677, 47.634390],

zoom: 10,

sliderStyle: "small"

}); //end map

....

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

RobertScheitlin__GISP — Wed, 12 Oct 2016 16:05:28 GMT

Lori,

Is this custom code (accordion.js):

and the css?

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

LoriEmerson_McCormack — Wed, 12 Oct 2016 16:24:49 GMT

This is what is in the *.js file, which is from http://inspirationalpixels.com

jQuery(document).ready(function() {

function close_accordion_section() {

jQuery('.accordion .accordion-section-title').removeClass('active');

jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');

}

jQuery('.accordion-section-title').click(function(e) {

// Grab current anchor value

var currentAttrValue = jQuery(this).attr('href');

if(jQuery(e.target).is('.active')) {

close_accordion_section();

}else {

close_accordion_section();

// Add active class to section title

jQuery(this).addClass('active');

// Open up the hidden content panel

jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');

}

e.preventDefault();

});

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

RobertScheitlin__GISP — Wed, 12 Oct 2016 17:40:23 GMT

Lori,

You have an issue with your map service.

When I use a query like this

http://gis.spokanecounty.org/arcgis/rest/services/Engineering/TravelImpactsDev/MapServer/2/query?f=json&returnGeometry=t…

The output spatial reference is requested as 102100 and it is returning 2926

Where as

http://gis.spokanecounty.org/arcgis/rest/services/Engineering/TravelImpactsDev/MapServer/3/query?f=json&returnGeometry=t…

does return as 102100 geometry.

I would recommend that you republish your map service and if that does not resolve the issue then give tech support a call as this is an ArcGIS Server issue.

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

LoriEmerson_McCormack — Thu, 13 Oct 2016 19:14:07 GMT

The map service has been republished. How do I do a query on the REST to find the coordinates for one of the features, like you did?

I discovered that if I turn off the base layer, that the zoom-to works on the Route Event layer (index=2 in the map service). I read in another post that the base maps are cached with a given spatial reference, therefore, their spatial reference cannot be changed.

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

RobertScheitlin__GISP — Thu, 13 Oct 2016 20:41:14 GMT

Lori,

If the layer id is not changed then the link I provided in my previous reply should work.

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

LoriEmerson_McCormack — Mon, 24 Oct 2016 22:08:30 GMT

Re-publishing the map service worked. I am unable to personally publish the map service (our IT group does). To get the route event to work properly, the Authentication Type on the Database Connection to the Route GIS feature class had to be changed; It was changed from "Operating system authentication" to "Database authentication".

In my JavaScript, I used the IdentifyTask (instead of the InfoWindow templates), which allows for setting the SpatialReference:

function executeIdentifyTask(event) {

var outSR = new SpatialReference(4326);

identifyParams.geometry = event.mapPoint;

identifyParams.mapExtent = map.extent;

...etc.