4

I'm trying to create an custom stationary map using the Leaflet JavaScript library and keep running into a major issue where most of the map tiles for the coordinates do not render. I'm defining & showing the map like so

function initmap() {
    map = new L.Map('map');
    var osmUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png';
    var osm = new L.TileLayer(osmUrl);
    map.addLayer(osm);
}
var lat = 40.120910;
var lng = -74.978602;
var startLatLng = new L.LatLng(lat, lng);
initmap();
map.setView(startLatLng, 16);

It seems like it should work, but the map div never shows the full map/all tiles. I know there is coverage for this particular area because I've been using another person's service that using this library and map to look at this location. This code is structured based off of their code.

This website is using the exact coordinates, map server, and the leaflet js script and is able to render all tiles fine.

Here's a JSFiddle to show the code (and issue) in action. Any idea why this is happening or how to fix it?

CaffeinatedMike
  • 1,537
  • 2
  • 25
  • 57
  • I have had this problem in the past and it looked like the map server was not 100% responsive... I needed to find additional servers for the same tiles or change the custom map to get my app working as desired. :( – Bruno Toffolo Sep 08 '16 at 13:49
  • 1
    What I don't get is how the other guy that's using the same server and map is able to render this exact map no problem – CaffeinatedMike Sep 08 '16 at 13:51

1 Answers1

20

Missing Leaflet CSS: https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.css

Updated JSFiddle: https://jsfiddle.net/t14rLknv/7/

(BTW you can upgrade to Leaflet 1.0.0-rc.3, new official CDN on unpkg.com, see http://leafletjs.com/download.html)

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • You're the best! I had no idea I needed the css script as well, but it makes total sense now that I think about it. Thanks so much! – CaffeinatedMike Sep 08 '16 at 15:02