Bootstrap Maps - Connected map divs using webmaps

JonathanFarmer1 — Tue, 10 Jun 2014 14:18:04 GMT

Hello,

I am trying to replicate this idea from the Bootstrap Map JS page: http://esri.github.io/bootstrap-map-js/demo/jquery/media.html

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>
     
     <div id="mapDiv"></div>
     </div>

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
     <h3>Zoning - February 2010</h3>
     
     <div id="mapDiv2"></div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
     <h3>Zoning - February 2008</h3>
     
     <div id="mapDiv3"></div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
     <h3>Zoning - February 2005</h3>
     
     <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
          });

          mapDeferred.then(function(response) {
            map = response.map;

            // Add titles
            dom.byId("mapTitle").innerHTML = response.itemInfo.item.title;
            //dom.byId("mapSubTitle").innerHTML = response.itemInfo.item.snippet;
            // Add scalebar and legend
            var layers = esri.arcgis.utils.getLegendLayers(response);
            if(map.loaded){
              initMapParts(layers);
            }
            else{
              on(map,"load",function(){
                initMapParts(layers);
              });
            }

          },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
          });

          mapDeferred.then(function(response) {
            map = response.map;

            // Add titles
            dom.byId("mapTitle2").innerHTML = response.itemInfo.item.title;
            //dom.byId("mapSubTitle").innerHTML = response.itemInfo.item.snippet;
            // Add scalebar and legend
            var layers = esri.arcgis.utils.getLegendLayers(response);
            if(map.loaded){
              initMapParts(layers);
            }
            else{
              on(map,"load",function(){
                initMapParts(layers);
              });
            }

          },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
              },"mapLegendDiv2");
            legend.startup();
          }
        }
      });
    </script>
[/HTML]

topic Bootstrap Maps - Connected map divs using webmaps in ArcGIS JavaScript Maps SDK Questions

Bootstrap Maps - Connected map divs using webmaps