Map is not rendering properly

551 views
Skip to first unread message

Effat Naaz

unread,
Aug 18, 2021, 11:31:32 AM8/18/21
to Leaflet
Hi

I am using leaflet map, when moving sidewards map is not rendering properly. Attaching the screenshot for the same. Any suggestions?

Thanks


Capture.PNG
Capture1.PNG

Louis Gamor

unread,
Aug 18, 2021, 2:11:01 PM8/18/21
to Leaflet
Please attach some codes

Effat Naaz

unread,
Aug 19, 2021, 5:04:27 AM8/19/21
to Leaflet
CODE:

 var map = new L.Map('map', { center: new L.LatLng(48.858093, 2.294694), fullscreenControl: {pseudoFullscreen: false},zoom: 0, minZoom: 2}),
                mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
            var maplayers = {
                    'Google Streets': L.gridLayer.googleMutant({
                        type: 'roadmap',
                    }).addTo(map),
                    'Google Terrain': L.gridLayer.googleMutant({
                        type: 'terrain',
                    }),
                    'Google Hybrid': L.gridLayer.googleMutant({
                        type: 'hybrid',
                    }),
                    'Google Satellite': L.gridLayer.googleMutant({
                        type: 'satellite',
                    }),
                    'Stamen Terrain': L.tileLayer(
                        'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
                    ),
                    'Wiki Media': L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png')
                    };
            L.control.layers(maplayers).addTo(map);

Louis Gamor

unread,
Aug 19, 2021, 12:39:46 PM8/19/21
to Leaflet
Is there a reason you're passing so many layers at a time to the base map?
Because I think that approach is enough to confuse the basemap layer with regards to which tile to use.

Every zoom in or zoom out fires an event to load the appropriate tileLayer for that zoom level, and I think
your current approach will simply cause the application to keep loading different tiles for different map types at different zoom levels.
That should be confusing enough for the map to not render properly.

Below is an approach I worked on sometime back. It's a Springboot application, which uses one map type at a time (OpenStreet Map, Mapbox, Bing Map and Google Map ->  (Hybrid and Satellite)), until the user selects a particular map type to switch to.
N/B: if you are not a java developer or do not use SpringBoot,  you may simply extract the html, css and js files and modify them accordingly.


You can clone and make changes to load terrain or satellite view.

Example:
If you want satellite view, you can create a new property in the DOMEndpoints Object of the data.js like this:

     GoogleSatelliteTileLayer: '//{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',


Then initialize a streetView layer in the init.js like this:

 /**
 * SATELLITE VIEW MAP TILE LAYER (GOOGLE)
 * ---------------------------------------------------------------------------
 */
const GOOGLE_SATELLITE_VIEW_LAYER = L.tileLayer(DOMEndpoints.GoogleSatelliteTileLayer, {
    attribution: DOMEndpoints.GoogleAttribution,
    maxNativeZoom: MAX_ZOOM_VALUE,
    detectRetina: true,
    subdomains:['mt0','mt1','mt2','mt3']
});

Then write a function that when invoked, will change the base map to Google Satellite View:

/**
 * FUNCTION TO INITIALIZE GOOGLE-SATELLITE-MAP
 * -------------------------------------------
 */
const initGoogleSatelliteMap = () => {
    map.removeLayer(BING_TILE_LAYER);
    map.removeLayer(GOOGLE_TILE_LAYER);
    map.removeLayer(OPENSTREET_TILE_LAYER);
    map.removeLayer( MAPBOX_TILE_LAYER);
    GOOGLE_SATELLITE_VIEW_LAYER.addTo(map);
};



Finally add a button in the map.html that when clicked, will invoked  the initGoogleSatelliteMap() function :

$(DOMIds.mapboxButton).on(DOMEvents.click, ()=> {
       initGoogleSatelliteMap();
      persistMapTypeInIndexedDB(GOOGLE_SATELLITE_VIEW_LAYER );
});

That was my approach by the way....
...if it's not too much of an overkill for you.

Effat Naaz

unread,
Aug 20, 2021, 7:43:38 AM8/20/21
to Leaflet
Hi Thanks for reply.

But If i use below code, i.e having only 1 layer still issue persists. Its happening on transition

    var maplayers = {
                    'Google Streets': L.gridLayer.googleMutant({
                        type: 'roadmap',
                    }).addTo(map)
                    };
            L.control.layers(maplayers).addTo(map);

Louis Gamor

unread,
Aug 20, 2021, 4:25:32 PM8/20/21
to Leaflet
Hello,
I see you're adding the layer to the map twice.
What happens if you take the last line out? (L.control.layers(maplayers).addTo(map);)

So that you only end up with
var maplayers = {
          'Google Streets': L.gridLayer.googleMutant({
                  type: 'roadmap',
           }).addTo(map)
        };

Effat Naaz

unread,
Aug 24, 2021, 4:02:14 AM8/24/21
to Leaflet
Issue is still persisting when I removed. Not sure why this is happening.

Louis Gamor

unread,
Aug 24, 2021, 8:25:06 AM8/24/21
to Leaflet
In that case use this:

var maplayers = L.gridLayer.googleMutant({
           type: 'roadmap',
 }).addTo(map)


If your issue still persists then I'd suggest you don't use the gridlayer implementation.
Just go twith the tileLayer implementation from my previous submissions and specify the map type url and attribution.
That should be enough to take you out of this tight spot.

Reply all
Reply to author
Forward
0 new messages