Leaflet js map only showing a few tiles

Question

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?

Answer 1

Missing Leaflet CSS: https://npmcdn.com/[email protected]/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)