topic One Layer, Multiple Maps in ArcGIS JavaScript Maps SDK Questions

One Layer, Multiple Maps

BrianBeck — Mon, 28 Oct 2013 21:00:56 GMT

I am working on a mobile web app using jQuery Mobile. I have multiple "pages" in my app, but they are technically all in one html doc. The main page of my app has a map in it created using a webmap from ArcGIS Online. Another page in the app also needs to have a map in it and I would like to add a single feature layer from the main map to the second map.

I tried:

self.map = new Map(self.mapDiv, {
    basemap : "hybrid",
    logo: false,
    showInfoWindowOnClick : false,
    slider: false
});

if (self.currentLayer) {

    self.map.addLayer(self.currentLayer);
    self.map.setExtent(graphicsUtils.graphicsExtent(self.currentLayer.graphics));

}

Where self refers to the module this function is in. self.currentLayer is a FeatureLayer object taken directly from the main map. The above code successfully creates a map on the second page, but no features are visible on the map.

Is it possible to have multiple maps with the same FeatureLayer shown in both? I'd like both maps to honor the same queries/selections/definition expressions and symbology.

Re: One Layer, Multiple Maps

AbhijatC — Tue, 29 Oct 2013 07:56:51 GMT

At first sight, it seems the problem with the div part which is basically same when you adds up the feature layer.
A new map is added to the separately specified div element "mapDiv" but while adding the feature layer,

self.map.addLayer(self.currentLayer);

doesn't adds to the different div (possibly it loads it in the first div which already added that).

You probably needs to use selectors of jquery to add the feature layer to the specified div which would probably look similar to

$("#mapDiv2").featureLayer({....

Above is not exact/correct example but the concept. So you need to experiment on that.

Re: One Layer, Multiple Maps

AbhijatC — Sat, 11 Dec 2021 06:23:05 GMT

I am working on a mobile web app using jQuery Mobile. I have multiple "pages" in my app, but they are technically all in one html doc. The main page of my app has a map in it created using a webmap from ArcGIS Online. Another page in the app also needs to have a map in it and I would like to add a single feature layer from the main map to the second map.

I tried:
self.map = new Map(self.mapDiv, {
    basemap : "hybrid",
    logo: false,
    showInfoWindowOnClick : false,
    slider: false
});

if (self.currentLayer) {

    self.map.addLayer(self.currentLayer);
    self.map.setExtent(graphicsUtils.graphicsExtent(self.currentLayer.graphics));

}
Where self refers to the module this function is in. self.currentLayer is a FeatureLayer object taken directly from the main map. The above code successfully creates a map on the second page, but no features are visible on the map.

Is it possible to have multiple maps with the same FeatureLayer shown in both? I'd like both maps to honor the same queries/selections/definition expressions and symbology.

I again did some experimentation. Just have a look on the code below:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body, #map, #map1 {
        height: 80%;
        width: 100%;
        margin: 10;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var map,map1;

      require(["esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", 
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "dojo/_base/Color", "dojo/number", "dojo/dom-style", 
        "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle, 
        TooltipDialog, dijitPopup
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });
        map1 = new Map("map1", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });
        
        var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3")
        map.addLayer(southCarolinaCounties);
        var southCarolinaCounties1 = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3")
        map1.addLayer(southCarolinaCounties1);
      });
    </script>
  </head>

  <body>
    <div id="mapDiv"></div>
    <div id="map1"></div>
  </body>
</html>

Basically I have to take two separate variables for defining same feature layer and then adding them to different map divs.

P.S.: It was a random experiment so exclude unnecessary variables or require additions.
Abhy

Re: One Layer, Multiple Maps

BrianBeck — Sat, 11 Dec 2021 06:23:08 GMT

I again did some experimentation. Just have a look on the code below:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body, #map, #map1 {
        height: 80%;
        width: 100%;
        margin: 10;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var map,map1;

      require(["esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", 
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "dojo/_base/Color", "dojo/number", "dojo/dom-style", 
        "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle, 
        TooltipDialog, dijitPopup
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });
        map1 = new Map("map1", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });
        
        var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3")
        map.addLayer(southCarolinaCounties);
        var southCarolinaCounties1 = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3")
        map1.addLayer(southCarolinaCounties1);
      });
    </script>
  </head>

  <body>
    <div id="mapDiv"></div>
    <div id="map1"></div>
  </body>
</html>

Thanks Abhy,

The problem with this method is that it is actually creating 2 different FeatureLayer objects. That means that if one FeatureLayer has features selected, that selection will not be reflected in the other FeatureLayer. I'd like to keep the FeatureLayers in sync with each other.

I suppose I could just listen for events like onSelectionComplete, etc. and then perform the selection again on the second layer, but I was hoping for a better solution.

Re: One Layer, Multiple Maps

AbhijatC — Wed, 30 Oct 2013 03:06:12 GMT

Regret for not providing the exact solution. Yeah you were right. I suggest to use "mousedown" events which can have graphic attributes like latitude, longitude OR pixels so it may be transferred to next layer to select the same feature.

Wish you reach the solution soon. 🙂

Abhy

Re: One Layer, Multiple Maps

JasonZou — Wed, 30 Oct 2013 03:43:12 GMT

Hi Brian,

One feature layer cannot be added to two map objects. The reason is simple. To render a feature layer on a map, dom elements will be created under the map div element for each layer and its graphics and labels.

Why not use the same map object for the two "pages"? You can control the visibility/display of the map surround elements to make users feel like two pages. You can also reposition and resize the map object if in need. Using two map objects will be troublesome, hard to maintain and less efficient.