0

I am using leaflet providers and attempting to add the NASAGIBS.ViirsEarthAtNight2012 to my layer control, my other basemaps load fine; but this one doesn't and returns the following errors in the console. What could cause this?

Code Sample;

$(document).ready(function() {

    var aLayerOne = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
    });

    var aLayerTwo = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'

    });

    var NASAGIBS_ViirsEarthAtNight2012 = L.tileLayer('http://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}',{
    attribution: 'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.'
    });



    var map = L.map('myMap', {
        center: centerlatlng,
        zoom: 4,
        layers: [aLayerOne],
        //maxBounds: bounds


    });


     markers = L.markerClusterGroup();

    var points = L.geoJson(geojsonfeatures, {
        onEachFeature: function(feature, layer) {
            layer.bindPopup(feature.properties.Destinatio);
        }
    });
    markers.addLayer(points);

    var promise = $.getJSON('js/weatherstations.js');
    promise.then(
        function(response) {
            console.log('promise success handler', response);
            var geojsonLayer = new L.GeoJSON(response);
            geojsonLayer.addTo(map);
        },
        function(error) {
            console.log('promise error handler', error);
        }
    );


    // Add a Layers Control
    var baseMaps = {
        "Humanitarian Open Street Map": aLayerOne,
        "Esri Imagery": aLayerTwo, 
        "Night Vision": NASAGIBS_ViirsEarthAtNight2012,
    };

    var overLays = {

        "Destinations": markers

Uncaught Error: No value provided for variable {time}(anonymous function) @ leaflet.js:6o.Util.template @ leaflet.js:6o.TileLayer.o.Class.extend.getTileUrl @ leaflet.js:7o.TileLayer.o.Class.extend._loadTile @ leaflet.js:7o.TileLayer.o.Class.extend._addTile @ leaflet.js:7o.TileLayer.o.Class.extend._addTilesFromCenterOut @ leaflet.js:7o.TileLayer.o.Class.extend._update @ leaflet.js:7s @ leaflet.js:6o.Mixin.Events.fireEvent @ leaflet.js:6o.Map.o.Class.extend.invalidateSize @ leaflet.js:6(anonymous function) @ leaflet.js:6o.Util.bind @ leaflet.js:6

1

I figured this out; the parameters are needed which reference the URL.

var NASAGIBS_ViirsEarthAtNight2012 = L.tileLayer('http://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}', { attribution: 'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.', bounds: [[-85.0511287776, -179.999999975], [85.0511287776, 179.999999975]], minZoom: 1, maxZoom: 12, format: 'png', time: '', tilematrixset: 'GoogleMapsCompatible_Level' });

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.