Map images missing tiles or grid rendering incorrectly.

[timothymarois]

Preview:

 var humanitarian = L.tileLayer('https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
		    maxZoom: 17, attribution: ''
        });
        
        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '' });

        var clouds = L.OWM.clouds({showLegend: false, opacity: 0.5, appId: 'xxxx'});
        var rain   = L.OWM.rain({opacity: 0.5, appId: 'xxxx'});
        var city   = L.OWM.current({intervall: 15, lang: 'en'});

        var map = L.map('weatherradarmap', { center: new L.LatLng(app.location.latitude, app.location.longitude), zoom: 6, layers: [humanitarian] });
        var baseMaps = { "OSM Humanitarian": humanitarian };
        var overlayMaps = { "Rain": rain, "Cities": city };
        var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

[buche]

When map tiles are missing it's most of the time the fault of the tile server. Images from openstreetmap.fr/hot sometimes load slowly on my machine, too (but just not it is fine, no lag, no problems). When it's too slow you see missing tiles. Sometimes when the load on osm.org is high I see the same on openstreetmap.org with standard tiles.

[timothymarois]

@buche But how does that make sense? I can't fix the tile server. It works on all examples I've seen using the tile server (openweathermap), but why with the script above does it not properly put the tiles?

[buche]

I've tested my demo page on three different computers in two different networks. Everywhere all tiles are loading, sometimes OSM Humanitarion loads slowly. Maybe your problem can be fixed by using the most recent leaflet library. But I don't know if there are compatibility problems.

Sorry to say but I will not put any effort anymore in this library because OWM now is just another commercial project although it started as a free project. I don't want to spend my spare time for a commercial project which never responded to any question or request.

[timothymarois]

Gotcha. Thanks for looking into it. I specifically put the map inside of a div instead of using full page. Could that be a cause? I bet its the way I've implemented the map.

[trevismurithi]

Hello brother kindly import the css file directly
import "leaflet/dist/leaflet.css";