0

Is it possible for me to get the data from https://firms.modaps.eosdis.nasa.gov/web-services/ and add it as a layer in the maps so that whatever data I am getting from the server can be directly shown on my web page using Mapbox or Google API. I am new to this and like to integrate it in my project.

2
  • A WMS does give you data, just a (normally image) representation of it. But you can use the service (in this case with an API key) in any application that supports the WMS specification to add layers.
    – nmtoken
    Jan 4, 2021 at 10:04
  • Mapbox supports the use of WMS see documentation ~ docs.mapbox.com/mapbox-gl-js/example/wms
    – nmtoken
    Jan 4, 2021 at 10:07

2 Answers 2

2

A working example below (tested). You just need to change mapbox token key and firms key with your own

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WMS Firms</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
    <style>
      body { margin: 0; padding: 0; }
      #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = '<your_mapbox_token>';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      zoom: 5,
      center: [-120.72347063061076, 36.35977058548748]
    });
  
    // Key obtained at https://firms.modaps.eosdis.nasa.gov/web-services/
    var firms_key = 'your_firm_key';
    // Layer name choosen among list in XML from url call in browser to
    // Use firms2.modaps.eosdis.nasa.gov here instead of default firms.modaps.eosdis.nasa.gov
    // due to current heavy traffic (when answering)
    // https://firms2.modaps.eosdis.nasa.gov/wms/key/your_firm_key/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GETCAPABILITIES
    var layer_name = 'fires_modis_7';
  
    map.on('load', function () {
      map.addSource('wms-test-source', {
        'type': 'raster',
        // use the tiles option to specify a WMS tile source URL
        // https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
        'tiles': [
          `https://firms2.modaps.eosdis.nasa.gov/wms/key/${firms_key}/?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=${layer_name}`
        ],
        'tileSize': 256
      });
      map.addLayer({
          'id': 'wms-test-layer',
          'type': 'raster',
          'source': 'wms-test-source',
          'paint': {}
        },
        'aeroway-line'
      );
    });
    </script>
  </body>
</html>
0

I would use Leaflet.js to create a map on a web page. With leaflet you can add data from any giver source (osm, google or even nasa).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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