We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Multi-layers Maps

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

2 Replies

ST Syed Talha February 6, 2023 10:29 AM UTC

Any Solutions in 

  • Multi-layers  Maps

IR Indumathi Ravi Syncfusion Team February 7, 2023 11:28 AM UTC

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">


             <LayerDirective layerType="OSM" />

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

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




You can find the sample from the below link.


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


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.

Live Chat Icon For mobile
Up arrow icon