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 >
Solved! Go to Solution.
Lori,
You have an issue with your map service.
When I use a query like this
The output spatial reference is requested as 102100 and it is returning 2926
Where as
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.
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.
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>
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
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.
<!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
....
Lori,
Is this custom code (accordion.js):
<script type="text/javascript" src="../accordion/accordion.js"></script>
and the css?
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();
});
});
Lori,
You have an issue with your map service.
When I use a query like this
The output spatial reference is requested as 102100 and it is returning 2926
Where as
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.
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.