Multi-layers Maps

[Syed Talha]

DevTools failed to load source map: Could not load content for chrome-extension://efbobpikdmjaaklfkdlgfopochnjadab/content/safecheck-notification/index.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

[Syed Talha]

Any Solutions in 

• Multi-layers  Maps
• 
  

[Indumathi Ravi]

Hi Syed,

We can add multiple layers to the Maps component by adding multiple LayerDirective tags. The first LayerDirective is the base layer, and other LayerDirective tags must have the "type" property set to "SubLayer" in order to render them as sub layers (which render over the base layer) of the base layer. Please find the code snippet for adding Africa shape as a sublayer on top of the OSM map below.

Code Snippet:

<MapsComponent id="maps">

            <LayersDirective>

             <LayerDirective layerType="OSM" />

              <LayerDirective type="SubLayer" animationDuration={0} shapeData={africa}

                shapeSettings={{ fill: '#5100a3', opacity: 0.4 }}>

              </LayerDirective>

            </LayersDirective>

</MapsComponent>

You can find the sample from the below link.

https://stackblitz.com/edit/react-rwetmg

Meanwhile, you can also add multi-layers on top of the GeoJSON shapes. Please find the sample demo link below.

https://ej2.syncfusion.com/react/demos/#/bootstrap5/maps/multilayer

Please let us know if the above solution meets your requirements. If not, please provide us the exact scenario of your requirement. It will be helpful for us to analyze and assist you further.