nasa-gibs / gibs-web-examples Goto Github PK
View Code? Open in Web Editor NEWExamples of using GIBS with various web mapping libraries
License: Other
Examples of using GIBS with various web mapping libraries
License: Other
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!
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 the examples of OpenLayers 3 to use v3.20.1
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
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 example of using gibs layers using OpenLayers 4
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 (which is now >= v1.39).
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?
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.
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.
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.
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/
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
})
});
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.
is GIBS includes three core software projects: The Imagery Exchange (TIE), OnEarth, and the Meta Raster Format (MRF) project? more detail ,thx
.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.