Community

Point not appearing on multiple layers until panned

268
0
07-27-2020 04:37 AM
ScottWilson2
by
New Contributor II
‎07-27-2020 04:37 AM

I have a single map point which i'm adding to 2 different graphics layers.  The point appears on layer 1 or 2, depending on which you select first.  However, when you select the other layer the point is not visible, you need to pan the map to make it appear.

Why does adding the same point to 2 different layers stop the point displaying until panned?

thanks

I've removed my post from Friday and created a simpler example:

<!DOCTYPE html>
<html lang="en">
 
 <head>
<script type="text/javascript" src="https://js.arcgis.com/3.29/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css" type="text/css">

<script type="text/javascript">

var map;
 var locator;
 
 require([ 
 "esri/map",
 "esri/SpatialReference",
 "esri/geometry/Point",
 "esri/InfoTemplate",
 "esri/graphic",
 "esri/symbols/PictureMarkerSymbol",
 "esri/layers/FeatureLayer", 
 "esri/SpatialReference",
 "esri/InfoTemplate"
 
 
 ],
 function(
 Map,
 SpatialReference,
 Point,
 InfoTemplate,
 Graphic,
 PictureMarkerSymbol,
 FeatureLayer,
 SpatialReference,
 InfoTemplate
 
 
 ) {
var wkid = 102100;

 
 
 map = new Map("map", {
 basemap: "streets", 
 zoom: 11,
 maxZoom: 18,
 minZoom: 1,
 center: [-4.3864,55.7819]
 });


 map.on("load", function(e) {
 // map has loaded
 plotMapItems();
 });


function plotMapItems() {
 
map.graphics.enableMouseEvents();

 var pictureSymbol = new PictureMarkerSymbol({
 "url": "https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
 "height":64,
 "width":64,
 "angle": 0,
 "yoffset": 24,
 "type":"esriPMS"
 });

 // Create the different map layers
myLayer1 = new esri.layers.GraphicsLayer();
 myLayer1.id = 'myLayer1';
 myLayer1.visible = false;
 map.addLayer(myLayer1);
 
 
 myLayer2 = new esri.layers.GraphicsLayer();
 myLayer2.id = 'myLayer2';
 myLayer2.visible = false;
 map.addLayer(myLayer2);

 var x = "-500031.1921038252";
 var y = "7511922.076282063";
var spatial = new SpatialReference({ wkid: wkid });
 var point = new Point(x, y, spatial);
var pointAttributes = { Test: "test" };
 var pointInfoTemplate = new InfoTemplate("Request");
 var pointGraphic = new Graphic(point, pictureSymbol, pointAttributes, pointInfoTemplate);
 
 // Add the point to both layers
 myLayer1.add(pointGraphic);
 myLayer2.add(pointGraphic);

 }
 

 }); //End of function
 
 
function showMapLayer(layerID){
 
 // Hide all layers
 map.getLayer("myLayer1").hide();
 map.getLayer("myLayer2").hide();
 
 
 console.clear();
 console.log(map.getLayer(layerID));
 
 var x = map.getLayer(layerID);
 x.show();
 x.refresh();
 
 var gLayerCount = x.graphics.length;
 
 document.getElementById("layerItems").innerHTML = "Layer '" + layerID + "' has " + gLayerCount + " marker points.";
}
 
</script>
</head>
<body>
<div id="mapContainer" style="border: 1px solid #000; width: 970px; height: 400px; margin-bottom: 1em; ">
 <div id="map"></div>
</div>
<form>
 <input type="radio" id="myLayer1" name="layer" value="myLayer1" onclick="showMapLayer(this.value);">
 <label for="myLayer1">myLayer1</label>
 <input type="radio" id="myLayer2" name="layer" value="myLayer2" onclick="showMapLayer(this.value);">
 <label for="myLayer2">myLayer2</label>
</form>
<br />
<h3 id="layerItems"></h3>
 
 
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
0 Replies