Leaflet simple ENR map V2

by spydmobile

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
 <div id="mapid"></div>

CSS

#mapid {
  height: 400px;
}

JavaScript

// build the sat background layer, but dont put it on the map.
let sat = L.tileLayer(
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri',
    maxNativeZoom: 18,
    maxZoom: 20,
    zIndex: -998
  }
)


// build the hotspot optional overlay layer, but dont put it on the map.
let hotspots = L.tileLayer.wms('https://www.enr.gov.nt.ca/geoserver/nwtfire/wms?', {
  layers: ['hotspots'],
  format: 'image/png',
  transparent: true,
  version: '1.1.0',
  attribution: 'USDAFS-NASA'
})


// build the fires optional WMS overlay layer, but dont put it on the map.
/* let fires = L.tileLayer.wms('https://www.enr.gov.nt.ca/geoserver/nwtfire/wms?', {
  layers: ['firesit_publicPoint'],
  format: 'image/png',
  transparent: true,
  version: '1.1.0',
  attribution: 'GNWT-ENR-FMD-HQ'
}) */



//https://www.enr.gov.nt.ca/geoserver/nwtfire/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=nwtfire:firesit_publicPoint&maxFeatures=5000&outputFormat=application/json
/**
To do this we will:
1. Grab data from geoserver as geoJSON by using teh WFS protocol from the same fire layer
2. Use the GeoJOSN features of leaflet to render each fire as a local icon
3. Use the GeoJOSN features of leaflet to provide an onHover for the fire number.

**/
//text/javascript

/* fetch("https://www.enr.gov.nt.ca/geoserver/nwtfire/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=nwtfire%3Afiresit_publicPoint&maxFeatures=5000&outputFormat=text%2Fjavascript", {
  "method": "GET"
})
.then(response => {
  console.log("good");
})
.catch(err => {
  console.error(err);
});  */


function jsonp(url) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script')
    const name = "_jsonp_" + Math.round(100000 * Math.random());
    //url formatting
    if (url.match(/\?/)) url += "&callback=" + name
    else url += "?callback=" + name
    script.src = url;

    window[name] =...