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