+ Reply to Thread
Results 1 to 6 of 6

Thread: One Layer, Multiple Maps

  1. #1
    Brian Beck
    Join Date
    Apr 2010
    Posts
    44
    Points
    1
    Answers Provided
    0


    0

    Question One Layer, Multiple Maps

    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:

    Code:
    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.

  2. #2
    Abhijat C
    Join Date
    May 2012
    Posts
    32
    Points
    6
    Answers Provided
    2


    0

    Default Re: One Layer, Multiple Maps

    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,

    Code:
    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

    Code:
    $("#mapDiv2").featureLayer({....
    Above is not exact/correct example but the concept. So you need to experiment on that.

  3. #3
    Abhijat C
    Join Date
    May 2012
    Posts
    32
    Points
    6
    Answers Provided
    2


    0

    Default Re: One Layer, Multiple Maps

    Quote Originally Posted by beck3905 View Post
    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:

    Code:
    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:

    Code:
    <!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

  4. #4
    Brian Beck
    Join Date
    Apr 2010
    Posts
    44
    Points
    1
    Answers Provided
    0


    0

    Default Re: One Layer, Multiple Maps

    Quote Originally Posted by cybercop001 View Post
    I again did some experimentation. Just have a look on the code below:

    Code:
    <!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
    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.

  5. #5
    Abhijat C
    Join Date
    May 2012
    Posts
    32
    Points
    6
    Answers Provided
    2


    0

    Default Re: One Layer, Multiple Maps

    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

  6. #6
    Jason Zou

    Join Date
    Apr 2010
    Posts
    341
    Points
    253
    Answers Provided
    46


    0

    Default Re: One Layer, Multiple Maps

    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.

+ Reply to Thread

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts