I have been working on a project using the JS API where I need to overlay a map of street centerlines on a base street map. I took one of the samples from the API sample code and modified to use my layer, however, it does not display. The layer will load into ArcMap and ArcGIS viewer properly. I'm a little stuck at this point and could use some help.
<style>
html, body, #ui-esri-map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#ui-esri-dijit-geocoder {
top: 20px;
left: 70px;
position: absolute;
z-index: 3;
}
#Legend {
top: 20px;
left: 1000px;
position: absolute;
z-index: 3;
}
.esriPopup .titlePane {
text-shadow: none;
}
.esriPopup .titleButton.next {
right: 40px;
}
.esriPopup .titleButton.prev {
right: 53px;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"dojo/dom-construct",
"esri/Color",
"esri/dijit/Geocoder",
"esri/dijit/Popup",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/map",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol", "dojo/domReady!"
], function (
domConstruct, Color, Geocoder, Popup, InfoTemplate,
ArcGISDynamicMapServiceLayer, Map, SimpleFillSymbol, SimpleLineSymbol
) {
var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));
var popup = new Popup({
fillSymbol: sfs,
lineSymbol: null,
markerSymbol: null
}, domConstruct.create("div"));
map = new Map("ui-esri-map", {
basemap: "streets",
center: [-76.347304, 39.533987], // long, lat
zoom: 11,
sliderStyle: "small"
});
// map = new Map("ui-esri-map", {
// basemap: "topo",
// center: [-94.75290067627297, 39.034671990514816], // long, lat
// zoom: 12,
// sliderStyle: "small",
// infoWindow: popup
// });
var geocoder = new Geocoder({
arcgisGeocoder: {
placeholder: "Search "
},
map: map
}, "ui-esri-dijit-geocoder");
var centerlineLayerURL = "http://gismaps.harfordcountymd.gov/arcgis/rest/services/ICT/CenterlineWebMercator/MapServer";
var centerlineLayerOptions = {
"id": "centerlineLayer",
"opacity": 1,
"showAttribution": false,
"disableClientCaching": true
};
var centerlineLayer = new ArcGISDynamicMapServiceLayer(centerlineLayerURL, centerlineLayerOptions);
centerlineLayer.setVisibleLayers([1,2]);
map.addLayer(centerlineLayer);
geocoder.startup();
});
var formatNumber = function (value, key, data) {
var searchText = "" + value;
var formattedString = searchText.replace(/(\d)(?=(\d\d\d)+(?!\d))/gm, "$1,");
return formattedString;
};
</script>
