I have the following code for 4 different maps which call 4 different web maps and would like them to all interact as in the example above. I have searched and tried to use Google's Dev Tools and I can't seem to figure out which div class or id makes this function.
Below is the code I have for the maps section of the page. I could only include the JS for "mapDiv" and mapDiv2" (hit the character limit) but the other two are exactly the same.
Thanks! Jonathan
[HTML]<div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <h3>Current Zoning</h3> <!-- Bootstrap-map-js --> <div id="mapDiv"></div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <h3>Zoning - February 2010</h3> <!-- Bootstrap-map-js --> <div id="mapDiv2"></div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <h3>Zoning - February 2008</h3> <!-- Bootstrap-map-js --> <div id="mapDiv3"></div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <h3>Zoning - February 2005</h3> <!-- Bootstrap-map-js --> <div id="mapDiv4"></div> </div> </div> </div> </div> </div> <script type="text/javascript"> var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')); var dojoConfig = { //The location.pathname.replace() logic below may look confusing but all its doing is // enabling us to load the api from a CDN and load local modules from the correct location. packages: [{ name: "application", location: package_path + '/js' }] }; </script> <script src="http://js.arcgis.com/3.9compact"></script> <script> require(["esri/map", "esri/dijit/Scalebar", "esri/dijit/Legend", "esri/arcgis/utils", "dojo/dom", "dojo/on", "dojo/query", "application/bootstrapmap", "dojo/domReady!"], function(Map, Scalebar, Legend, esriUtils, dom, on, query, BootstrapMap) { var map; var scalebar; var legend;
// Load web map when page loads loadWebmap(); function loadWebmap(e) { // Get new webmap and extract map and map parts var mapDeferred = BootstrapMap.createWebMap("0a74654453db403a9be9a56303c004ee","mapDiv", { slider: true, nav:false, smartNavigation:false });
},function(error){ alert("Sorry, couldn't load webmap!"); console.log("Error loading webmap: " & dojo.toJson(error)); }); } function initMapParts(layers){ //add scalebar scalebar = new Scalebar({ map:map, scalebarUnit: 'english' }); //add legend if (legend) { legend.map = map; legend.refresh(layers); } else { legend = new Legend({ map:map, layerInfos:layers },"mapLegendDiv"); legend.startup(); } } }); </script> <script type="text/javascript"> var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')); var dojoConfig = { //The location.pathname.replace() logic below may look confusing but all its doing is // enabling us to load the api from a CDN and load local modules from the correct location. packages: [{ name: "application", location: package_path + '/js' }] }; </script> <script src="http://js.arcgis.com/3.9compact"></script> <script> require(["esri/map", "esri/dijit/Scalebar", "esri/dijit/Legend", "esri/arcgis/utils", "dojo/dom", "dojo/on", "dojo/query", "application/bootstrapmap", "dojo/domReady!"], function(Map, Scalebar, Legend, esriUtils, dom, on, query, BootstrapMap) { var map; var scalebar; var legend;
// Load web map when page loads loadWebmap(); function loadWebmap(e) { // Get new webmap and extract map and map parts var mapDeferred = BootstrapMap.createWebMap("2937442225a54b8fb6fa444855cf0f77","mapDiv2", { slider: true, nav:false, smartNavigation:false });