1. Home
  2. Forum
  3. Blazor
  4. Showing Multiple Image Layers (Not Shapes)

Showing Multiple Image Layers (Not Shapes)

I would like to make a map that shows two layers on it:

  • The first layer will show a state in the United States with its highways.
  • The second layer will highlight some of the roads on the first layer.
The source of both of those layers is a PNG image from a server.

I can create the map, and see both layers in the map, but only one at a time.  I would like to set the opacity of the second layer so that the first layer shows through.  I tried setting one of the layers as a sublayer type, but that did not help.  I see there is an option to change the opacity of a layer, but only for shapes.

How can I get this to work with two PNG layers?

3 Replies
IR Indumathi Ravi Syncfusion Team October 20, 2021 12:50 PM UTC

Hi Dustin, 
  
Thank you for contacting Syncfusion support. 
  
When we analyzed your query, we understood that you are rendering PNG images in both the first and second layers (from a server). 
  
We usually support rendering a map from an online service provider as a base layer (first layer), but not as a sub-layer, in the Maps component. The sub-layer should be in shape format, rather than image format. Then it can only overlay the base layer (first layer) with the "Opacity" property set appropriately. As a result, rendering two tile maps one on top of the other as images is not a valid request. 
  
If we have misunderstood your query, please let us know about your requirement in detail. It will be helpful for us to analyze and assist you further. 
  
Regards, 
Indumathi R. 


DC Dustin Cornelius replied to Indumathi Ravi October 20, 2021 01:19 PM UTC

Thank you for the quick reply.  I think you understand my request correctly.  I have two image layers that I need to put on top of each other.  I can do this just fine using the Google JS library (meaning I could layer both images on top of each other and see the lower layer through the top layer), but it sounds like this is not an option with Blazor Maps in Syncfusion.  If this functionality changes let me know.  Until then, I have to use something other than the Blazor Maps.


IR Indumathi Ravi Syncfusion Team October 21, 2021 07:55 PM UTC

Hi Dustin, 
  
Thank you for the update. 
  
We have analyzed further in your requirement and we tried to render an image as a marker template over a tile map layer with OSM map(Online map service provider) instead of rendering as two layers. While testing the created sample, we found out that the we do not support zooming with the marker template as image element. Please find the sample application in which we tried to reproduce the reported scenario and it can be downloaded from the below link. 
  
Since we can set any HTML element as marker template, we cannot restrict the styling of the template. So additional support must be provided to support synchronization between the tile image of the Maps and the marker template as image element. We have considered this request as a feature and added it to our features request list. We do not have immediate plans to implement this feature. It will be available in any of our upcoming releases. Meanwhile, please find the below feedback link to keep track of this feature. 
  
Please let us know if you need any further assistance. 
  
Regards, 
Indumathi R 


Loader.
Up arrow icon