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

1886
11
Jump to solution
10-11-2016 10:10 AM
LoriEmerson_McCormack
Occasional Contributor

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 >

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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=j... 

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=j... 

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.

View solution in original post

0 Kudos
11 Replies
SarojThapa1
Occasional Contributor III

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. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.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>
0 Kudos
LoriEmerson_McCormack
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
LoriEmerson_McCormack
Occasional Contributor

<!DOCTYPE html>

<html>

<head>

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

<meta charset="utf-8" />

<script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="../jquery/jquery-ui-1.10.4/ui/jquery-ui.js"></script>

<script type="text/javascript" src="../accordion/accordion.js"></script>

<!-- Include ArcGIS stylesheets -->

<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">

<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">

<link rel="stylesheet" href="../accordion/default.css">

<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>

<script src="//js.arcgis.com/3.16/" > </script >

<script type="text/javascript">

$(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

....

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Lori,

   Is this custom code (accordion.js):

<script type="text/javascript" src="../accordion/accordion.js"></script>

and the css?

0 Kudos
LoriEmerson_McCormack
Occasional Contributor

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();

});

});

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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=j... 

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=j... 

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.

0 Kudos
LoriEmerson_McCormack
Occasional Contributor

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.

0 Kudos