How to Create Duplicate Map in JSAPI

[deleted-user-Jie3eyjOl9XM]

Using the JavaScript API, I have a map object, and I'd like to create a second map, which is a copy of the first map. Hopefully somebody knows of a simple way to do this.

After failing to discover a one-liner that copies the map, I thought I could spin through the layers, and add them to the second map. Like this:

var secondMap = new Map('secondMapNode');
for(var j = 0; j < firstMap.layerIds.length; j++) {
     var layer = firstMap.getLayer(firstMap.layerIds);
     secondMap.addLayer(layer);
}
secondMap.setExtent(firstMap.extent);

This doesn't work, though. The secondMap acts strange, and the firstMap disappears. I guess that makes sense, because the layer gets confused about which map is belongs to. I'm hoping that I don't have the check the layer type, copy the tileInfo, and everything else.

An alternate approach that I wanted to try was to get the webmap json from the first map, and then create the second map from the json. That would work, but I can't find any code to get webmap json from a map (since the firstMap was created manually, not from webmap json).

[ReneRubalcava · Accepted solution]

Adding the layers from one map to another causes issues. You'll want to set it up to create new layers using the same URLs from the existing layers and any options or renderers you may have used and then add the new layers to the second map. You can do checks of what type of layer it is using the instanceof operator.

The layers should also have a declaredClass property you can check to see what the type of layer is as well.

For reference, this is how the OverviewMap does it.

[deleted-user-Jie3eyjOl9XM]

Thanks for the quick reply. I was actually knee-deep in cloning the DOM node, and you saved me from that mess. The instanceOf operator saved a lot of tedium. This isn't so bad. But, I wish I could find a way to avoid copying each constructor parameter. Here's the general design of the function that I'll use.

_copyMap: function(sourceMap, newDomNode, mapOptions) {
     var newMap = new Map(newDomNode, mapOptions);
     for (var j = 0; j < sourceMap.layerIds.length; j++) {
          var layer = sourceMap.getLayer(sourceMap.layerIds);
          if (layer instanceof ArcGISDynamicMapServiceLayer)
          {
               newMap.addLayer(new ArcGISDynamicMapServiceLayer(layer.url, {
                    visible: layer.visible,
                    opacity: layer.opacity,
                    imageParameters: layer.imageParameters
               }));
          }
          else if (layer instanceof WebTiledLayer)
          {
               newMap.addLayer(new WebTiledLayer(layer.urlTemplate, {
                    visible: layer.visible,
                    opacity: layer.opacity,
                    fullExtent: layer.fullExtent,
                    initialExtent: layer.initialExtent,
                    tileInfo: layer.tileInfo,
                    tileServers: layer.tileServers,
                    subDomains: layer.subDomains,
                    copyrightText: layer.copyrightText
               }));
          }
          // DynamicLayer, ImageService, VETiled, etc omitted for brevity
          else
          {
               console.error("Unsupported Layer Type");
               console.log(layer);
          }
     }
     return newMap;
},

Thanks again!

[ReneRubalcava]

What may help you out is that in the ArcGIS JavaScript API, with the layers (and other places sometimes), it saves the parameters passed to it in a property called _params.

So layer._params will have the original options that were used to create the layer, minus the url. You could use it to create the new Layer.

I would use the clone method of dojo/_base/lang to prevent any overwriting of the parameters the layer may try and do. Just to be safe.

That's one of those "use at your own risk, underscored property/methods are undocument" type things, but it should help out with what you are doing.