nasa-gibs/gibs-web-examples

Examples of using GIBS with various web mapping libraries

gibs-web-examples's Issues

Not adding a map but an image

Hello!

I have been looking into the mapbox-gl-js example and as I understand, you are setting the MODIS Terra true color image as a map background but not adding it as a layer on top of a Mapbox map. I have been trying to plot, for example, one Landsat image from a location using the addLayer method on top of a Mapbox street view but haven't been successful over it. Do you have an example on how to add this image? I'm a little bit lost with this matter.

Thanks in advance!

Update OpenLayers 3 example

ol.layer.WMTS is no more in recent OpenLayers 3 releases. It would be nice to update the examples. (I know, instability of OL3 API sucks!).

Update OpenLayers 3 examples to use latest version

Update the examples of OpenLayers 3 to use v3.20.1

Add a Mapbox GL JS example

https://www.mapbox.com/mapbox-gl-js/api/
https://github.com/mapbox/mapbox-gl-js

Layers from different sources with leaflet 4326

Hello,
since we are overriding the EPSG def for 4326 in the leaflet example, I am having trouble adding in other layers that otherwise work with just ;
"crs: L.CRS.EPSG4326," in the map definition. Is there a trick to doing this or is there a limitation in leaflet?

Thanks

Update repository labels to match WV and WVC

Add npm start for development

The examples can't be easily tested out-of-the box. Add an npm start script which runs a small local web server.

Add an OpenLayers 4 example

Add an example of using gibs layers using OpenLayers 4

Leaflet 1.x Compatibilty with Granule Browse

I'm currently working with the single scene browse implementation with leaeflet 1.x through GIBS. I'm having difficulties generating the correct tile numbering due to the difference in leaflet's slippy tiles (with a 1x1 top pyramid) as opposed to the 2x1 top pyramid that GIBS expects. I also noticed that all leaflet examples are using version 0.7.x.

I've included a sample script below - I believe the key is using Proj4 to create a custom CSR that has scaling and transformation formulas to convert tile coordinates to the 15.625m TileMatrixSet.

<title>GIBS Browse Test</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>

    <!-- https://github.com/proj4js/proj4js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4-src.js"></script>

    <!-- https://github.com/kartena/Proj4Leaflet -->
    <script src="http://glovis.usgs.gov/next/js/leaflet_plugins/proj4leaflet_new.js"></script> 

    <div id="map" style="background: #000000;  height: 660px;"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            var proj1 = new L.Proj.CRS(
                "EPSG:4326",
                "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs", {
                    origin: [-180, 90],
                    resolutions: [
                        0.5625,
                        0.28125,
                        0.140625,
                        0.0703125,
                        0.03515625,
                        0.017578125,
                        0.0087890625,
                        0.00439453125,
                        0.002197265625
                    ],
                    // Values are x and y here instead of lat and long elsewhere.
                    bounds: [
                       [-180, -90],
                       [180, 90]
                    ]
                }
            );
           
            var webCrs = L.extend({}, L.CRS, {
                code: 'EPSG:4326',
                projection: L.Projection.LonLat,
                transformation: new L.Transformation(1 / 360, 0.5, -1 / 360, 0.5),
                scale: function (zoom) {
                    return 512 * Math.pow(2, zoom);
                }
             });                 
           
            var wmsCrs = L.extend({}, L.CRS, {
                projection: L.Projection.SphericalMercator,
                transformation: new L.Transformation(1, 0, 1, 0),
                scale: function (zoom) {
                    return 512 * Math.pow(2, zoom);
                }
            }); 
           
            //NOTE :: We will need it to work with the map being in it's default projection
            var map = new L.Map('map', {
                inertia: false,
                boxZoom: true,
                worldCopyJump: true,
                zoomControl: false,
                doubleClickZoom: false,
                preferCanvas: true,
                unloadInvisibleTiles: false,
                updateWhenIdle: true,
                crs: L.CRS.EPSG3857 //This is the map default - which matches our config
            });
            
            L.control.scale({
                position: 'bottomright'
            }).addTo(map);

            var layerOptions = {
                layer: '',
                minZoom: 2,
                maxZoom: 20,
                tileSize: 256,
                subdomains: "abc",
                continuousWorld: true, // Prevent Leaflet from retrieving non-existent tiles on the borders.
                attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
            };

            map.addLayer(L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', layerOptions));
            map.setView(new L.LatLng(-36.4621, -79.6164), 12);

            
            var webCrs = L.extend({}, L.CRS, {
                projection: L.Projection.LonLat,
                transformation: new L.Transformation(1, 0, 1, 0),
                scale: function (zoom) {
                    return 512 * Math.pow(2, zoom);
               }
            });                
            
            //NOTE :: dds.cr.usgs.gov/gibs_test is an internal proxy that points to sit.gibs.earthdata.nasa.gov to simplify our firewall rules to sit.gibs.earthdata.nasa.gov
            var sceneBrowse = L.tileLayer('https://dds.cr.usgs.gov/gibs_test/wmts/epsg4326/std/ASTER_L1T_Radiance_Terrain_Corrected_v3_STD/default/2016-01-01T15:29:32Z/15.625m/{z}/{x}/{y}.png', {
                format: 'image/png',
                transparent: true,
                tileSize: 512,
                attribution: 'GIBS!!!',
                crs: webCrs//L.CRS.EPSG4326
            });
            
            sceneBrowse.on('tileload', function(event)
            {
                console.log('Tile ' + event.coords.z + '/' + event.coords.x + '/' + event.coords.y/* + ' - ' + event.tile.currentSrc*/);
            });
            
            map.addLayer(sceneBrowse);
            
            //Add a polygon to the map so we know we're looking within the granule location
            var geoJson = {type:"Polygon",coordinates:[[[-80.0854,-36.807],[-79.1354,-36.7959],[-79.1516,-36.1163],[-80.0934,-36.1271],[-80.0854,-36.807]]]};
            var layerStyle = {
                color: '#ff0000', 
                fillColor: '#ff0000', 
                fillOpacity: 0.1, 
                opacity: 1, 
                weight: 2
            };
            
            L.GeoJSON.geometryToLayer(geoJson).setStyle(layerStyle).addTo(map);
        });
    </script>
</body>

Update Cesium 1.9 to latest version

Update Cesium 1.9 to Latest (which is now >= v1.39).

CORS issues running locally

I'm trying to run the examples(cesium) locally and I'm running into CORS problems which isn't too surprising. Is there anyway to get around this problem?

Add a mapbox.js example

https://www.mapbox.com/mapbox.js/api/v3.1.1/

Add vector layer example(s)

• Add OpenLayers example
• Add Cesium and Leaflet examples (Potentially)

Investigate ways to use 4326 vector tiles on 3857 map

FIRMS Vector layers are not provided in EPSG:3857 and it would be nice to be able to point users to an example of how to use EPSG:4326 vector layers on their EPSG:3857 maps.

Add current stable Leaflet version 1.x

We have leaflet examples that use the Legacy 0.7.x code base. We should add the current stable which, as of this issue, is 1.2.0. Let's keep both version examples since both are referenced on the Leaflet site. We can possibly update Leaflet legacy to the latest as well.

Update deprecated GIBS API parameters, e.g. TileMatrixSet values

Across many/most/all of the GIBS Web Examples, there are uses of deprecated GIBS TileMatrixSet values and possibly others. E.g. in this Leaflet example, the TileMatrxSet value is EPSG4326_250m but now the appropriate value has been simplified to 250m.

So this repo should be scrubbed for any instances of this and any similarly deprecated values. Current values can be found in the GIBS GetCapabilities documents.

Move live examples from earthdata to github.io

Currently our web examples live on the earthdata website itself:
https://earthdata.nasa.gov/labs/gibs/examples/openlayers/geographic-epsg4326.html

We should move them to github.io for easier management, e.g.:
https://nasa-gibs.github.io/gibs-web-examples/

OSM_Land_mask Example

An example of how to use either the OSM_Land_mask or ocean/land mask would be good to add here as well.

Using the same setup as exampled here for MODIS, the Land_mask does not work.

var graysource = new ol.source.WMTS({
url: "//map1.vis.earthdata.nasa.gov/wmts-antarctic/wmts.cgi?SERVICE=WMTS",
layer: "OSM_Land_Mask",
extent: [-4194304, -4194304, 4194304, 4194304],
format: "image/png",
matrixSet: "EPSG3031_250m",

tileGrid: new ol.tilegrid.WMTS({
    origin: [-4194304, 4194304],
    resolutions: [
        8192.0,
        4096.0,
        2048.0,
        1024.0,
        512.0,
        256.0
    ],
    matrixIds: [0, 1, 2, 3, 4, 5],
    tileSize: 512
})

});

Bing Map example no longer works. Fix & Update

It appears the the Bing Maps example is no longer showing GIBS layers. We update the code to use the latest Bing Maps API which should fix the issue. This may require setting up new credentials when implementing our example.

What method is used to publish wmts with time?

is GIBS includes three core software projects: The Imagery Exchange (TIE), OnEarth, and the Meta Raster Format (MRF) project？ more detail ，thx

-

.

Leaflet example with different scales

Hi,

I'm struggling with adding multiple web mercator projected layers to a leaflet map. I have a map with a base layer of MODIS_Aqua_CorrectedReflectance_TrueColor (GoogleMapsCompatible_Level9). I also added an OSM layer, which uses the same zoom level. Switching between the layers works fine.

I tried added a non Level9 level (for instance the blue marble). When switching from a level9 to level8 the layer loads, but it is not correctly positioned (it loads tiles higher than the current map center). I suspect this is because the scale of each tile is not the same.

Is it possible to add layers with different scaling?