Adding two LayerDirectives with urlTemplates causes the first Layer tile layer to be overwritten

[Gene Black]

When initiating two LayerDirective's with a urlTemplate(one type='Layer' the second type='SubLayer' within the MapComponent it appears that the second layers tile array is not initialized correctly and maintains a reference to the first tile array so that when the tile src attribute is initialized with the information from the second LayerDirective it overwrites the first tile arrays information.

the offending code appears to be here

https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/maps/src/maps/layers/layer-panel.ts#L693

instead of 

let subtile: Tile = extend(baseTile, {}, {}, true) as Tile;

the following appears to correct the issue by properly cloning the original object into a new object

let subtile: Tile = extend({}, baseTile, {}, true) as Tile;

These tile layers are expected to overlay each other. In my uses the first tile layer is a base layer and the second is an overlay layer with transparency.

I have provided a sample at:

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

This is not the best sample since the overlay layer being used (type="SubLayer") has no transparencies, but you can inspect the html document and see that the defined tiles in the div id="maps_tile_parent"

all have the same base source url from the sublayer since the object attributes from the first tile array are being overwritten by the SubLayer tile collection initialization. I'm unable to provide a direct example using the urlTemplates I am using due to CORS settings in that container but you can see the effects by inspecting the div.

[Baby Palanidurai]

Hi Gene, 

Greetings from Syncfusion. 

We have analyzed your query. As of now, we don’t have support to render OSM type maps to sub layer. When using shape layer as sub layer, there will link to the main layer. But in OSM types, we couldn’t link to the main layer, that’s the reason, we didn’t provide rendering OSM type in sub layers. We would like to know, what is the purpose you need a OSM maps in sub layer. We have achieved OSM maps into the another OSM layers by placing the annotations. In that annotation, we have loaded another OSM maps in loaded event.  

Code snippet:  

annotations={[ 

          { 

            content: '<div id="maps1" style="height: 200px; width: 200px"></div>', 

            x: '20%', y: '50%' 

          } 

        ]} 

onMapsLoad(args) { 

    let maps = new Maps({ 

      height: '100px', width: '100px', 

      layers: [{ 

        layerType: 'OSM', tye: 'Layer', 

      }], 

      margin: { 

        bottom: 0, 

        left: 0, 

        top: 0, 

        right: 0, 

      } 

    }); 

    maps.appendTo('#maps1'); 

  }; 

Screenshot:  

 

Sample link: https://stackblitz.com/edit/react-uinpak-kzlrr4?file=index.js 

This is not meet your requirement, kindly revert us with provide details for the reason you have using OSM layers in the sub layers. Which will be helpful in furthermore analysis and provide you the solution sooner. 

Regards, 

Baby. 

[Gene Black]

We currently have functionality in our app where maps are displayed with a base layer that is a satellite layer (generated from NAIP data) as a sublayer (overlay) we have OSM generated road tiles with transparency that overlay the satellite layer. A public example of this (implemented in leaflet) can be seen at http://az-mapping.agrismartis.com

You say you do not currently support this capability, but the code shows where this is being attempted to be accomplished in this method:

https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/maps/src/maps/layers/layer-panel.ts#L649

That method iterates the layers AND sublayers and attempts to generate the tile divs with src pointers for Bing or OSM Layers and/or SubLayers. The only reason it does not succeed is the line at https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/maps/src/maps/layers/layer-panel.ts#L693 is maintaining an object reference to the original layer tiles in a new array and overwriting its attributes so that you have two tile arrays pointing to the same object references. i.e.

layertiles : [obj1, obj2, obj3]

sublayertiles : [obj1, obj2, obj3]

a simple change to that one line that initiates the sublayer tile reference (extending a new object rather than extending the original object and keeping the necessary tile location data and reassigning the tile src attribute) would enable that image tile sublayer image tile layer to operate correctly, inasmuch it appears to be a bug

I have submitted a pull request to https://github.com/syncfusion/ej2-javascript-ui-controls 

https://github.com/syncfusion/ej2-javascript-ui-controls/pull/49

that would implement the change discussed

[Baby Palanidurai]

Hi Gene, 

Thanks for debugging our source. As of now, we don’t have support to render OSM type maps to sublayer. So we have logged a feature request for this. It can be tracked through our feedback portal link below.  

Link: https://www.syncfusion.com/feedback/6903/ 

Please cast your vote to make it count. We will prioritize the features of every release based on the demands. If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.  

As of now, we need to ensure your fix in all the criteria. Thus, we could not merge your merge request now. And we will consider this when implementing the above feature. For your convenience, we have included your fix in latest version 17.1.51 source and generated a custom patch for this. You can use this source in your application. But we will not include this fix in our release. As mentioned above, we will consider this fix in when on implementing the feature. Based on the priority, this feature will be included in any one of our upcoming release. 

Please find the below custom package and replace in your ej2-maps package, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-maps1373792706 

  

Kindly revert us, if you need any further assistance on this. We are always happy in assisting you. 

 

Regards, 

Baby. 

[Gene Black]

Thank you for you attention to this matter.

[Baby Palanidurai]

Hi Gene, 

 

Most welcome. Kindly revert us, if you need any further assistance on this. We are always happy in assisting you. 

 

 

Thanks, 

Baby.