PERFECT DIRECTIONS - Wildfire and Smoke Map (2024)

Source: '+feature.properties.Satellite+' Satellite Image

'; return popupContent; } function onGonFeature(feature) { var popupContent = '

Smoke - '+ feature.properties.Density +' Density

Source: '+feature.properties.Satellite+' Satellite Image

'; return popupContent; } function onCWWFeature(feature) { //const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }; const options = { dateStyle: 'full', timeStyle: 'long', timeZone: "America/New_York" }; var popupContent = '

'+feature.properties.p+' '+feature.properties.s+'

'; popupContent += '

'; return popupContent; } function onCombinediPntFeature(feature,cu) { if (feature.properties.cat === 'WF'){ var itp = 'Wildfire'; } else if (feature.properties.cat === 'RX'){ var itp = 'Prescribed Fire'; } else {var itp = 'Other';} var popupContent = '

'+feature.properties.name+'

'; popupContent += '

'; if (cu == 'US'){ popupContent += '

Source: The Wildland Fire Interagency Geospatial Service (WFIGS)

'; } else if (cu == 'CA'){ popupContent += '

Source: Canadian Interagency Forest Fire Centre (CIFFC)

'; } return popupContent; } // var csloc = {"type":"FeatureCollection", "features":[{"type":"Feature","ct":"Point","properties":{"name":"Bridgewater, NJ", "pmk":"PCNJ", "GEO_ID":"34035","TIME":"","knt":"", "icon":"/static//markers/original/tourism/citysquare.png", "bgc":""},"description":{"stormtype":""},"geometry":{"type":"Point","coordinates":[-74.6482,40.6008]} } ]};mapboxgl.accessToken = 'pk.eyJ1IjoieXB5dW4iLCJhIjoiY2oxcW4ybWhxMDBkMjJxcGVhbDV5cnpzYyJ9.oFQSnOc57xCR7A51OR6-3w';var thisStyle = 'mapbox://styles/ypyun/ck0flqufl2k1x1cpmupm5sl2y';var map = new mapboxgl.Map({container: 'firetrackingmap', style: thisStyle, center: [-99.8514502429265, 48.8450079764727], zoom: 12, attributionControl: false, });map.addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution:[''] }));map.on('load', function () { var layers = map.getStyle().layers; var firstSymbolId; for (var i = 0; i < layers.length; i++) { if (layers[i].type === 'symbol') { firstSymbolId = layers[i].id; break; } } map.addSource('cww', {type: 'geojson', data: '/media/jsons/weather/wwa/current_ww_crh.json?v='+rnna }); map.addLayer({ "id": "FWW", "type": "fill", "source":"cww", "filter":['all', ["==", "p", "Red Flag"], ["==", "s", "Warning"], ], "paint": {'fill-color': {type:'identity', property:'c'}, 'fill-opacity':0.6, 'fill-outline-color': '#CCC'}}, firstSymbolId); map.addLayer({ "id": "FWA", "type": "fill", "source":"cww", "filter":['all', ["==", "p", "Fire Weather"], ["==", "s", "Watch"], ], "paint": {'fill-color': {type:'identity', property:'c'}, 'fill-opacity':0.6, 'fill-outline-color': '#CCC'}}, firstSymbolId); map.addLayer({ "id": "HWW", "type": "fill", "source":"cww", "filter":['all', ["==", "p", "High Wind"], ["==", "s", "Warning"], ], "paint": {'fill-color': {type:'identity', property:'c'}, 'fill-opacity':0.6, 'fill-outline-color': '#CCC'}}, firstSymbolId); map.addLayer({ "id": "HWA", "type": "fill", "source":"cww", "filter":['all', ["==", "p", "High Wind"], ["==", "s", "Watch"], ], "paint": {'fill-color': {type:'identity', property:'c'}, 'fill-opacity':0.6, 'fill-outline-color': '#CCC'}}, firstSymbolId); for (const weatherAlert of ['FWW','FWA','HWW','HWA','FRW','FRA']){ map.on('click', weatherAlert, function (e) {new mapboxgl.Popup({ offset: 14 }).setLngLat(e.lngLat).setHTML(onCWWFeature(e.features[0])).addTo(map);}); map.on('mouseenter', weatherAlert, function () {map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', weatherAlert, function () {map.getCanvas().style.cursor = ''; }); } map.addSource('GeoSmoke', {type: 'geojson', data: '/media/wildfire/active/smoke_noaa.json?v='+rnna }); map.addLayer({ "id": "GeoMACSmokeL", "type": "fill", "source": "GeoSmoke", filter: ["==", "Density", "Light"], "paint": {'fill-color': "#ad6d2d", 'fill-opacity':0.2, 'fill-outline-color': '#c07b36', }}, firstSymbolId); map.addLayer({ "id": "GeoMACSmokeM", "type": "fill", "source": "GeoSmoke", filter: ["==", "Density", "Medium"],"paint": {'fill-color': "#874504", 'fill-opacity':0.2, 'fill-outline-color': '#c07b36', }}, firstSymbolId); map.addLayer({ "id": "GeoMACSmokeH", "type": "fill", "source": "GeoSmoke", filter: ["==", "Density", "Heavy"], "paint": {'fill-color': "#5c2f03", 'fill-opacity':0.2, 'fill-outline-color': '#c07b36', }}, firstSymbolId); for (const smokeLevel of ['GeoMACSmokeL','GeoMACSmokeM','GeoMACSmokeH']){ map.on('click', smokeLevel, function (e) {new mapboxgl.Popup({ offset: 14 }).setLngLat(e.lngLat).setHTML(onGonFeature(e.features[0])).addTo(map);}); map.on('mouseenter', smokeLevel, function () {map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', smokeLevel, function () {map.getCanvas().style.cursor = ''; }); } // add a clustered GeoJSON source for powerplant map.addSource('SourceNOAA', {type: 'geojson', data: '/media/wildfire/active/fire_noaa.json?v='+rnna, 'cluster': true, 'clusterRadius': 30, 'clusterMaxZoom': 6 }); map.addLayer({ id: "clusters", type: "circle", source: "SourceNOAA", filter: ["has", "point_count"], paint: { "circle-color": ["step",["get", "point_count"],"#f73b3b", 50, "#eb1c1c", 150, "#b50000" ], "circle-radius": ["step", ["get", "point_count"], 20,50,30,150,40], "circle-opacity": 0.4 } },firstSymbolId); map.addLayer({ id: "cluster-count", type: "symbol", source: "SourceNOAA", filter: ["has", "point_count"], layout: {"text-field": "{point_count_abbreviated}","text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 12 } }); map.addLayer({ id: "unclustered-point", type: "circle", source: "SourceNOAA", filter: ["!", ["has", "point_count"]], paint: {"circle-color": "#b50000", "circle-radius": 5, "circle-stroke-width": 1, "circle-stroke-color": "#CCC",} }); map.on('click', 'unclustered-point', function (e) {new mapboxgl.Popup({ offset: 14 }).setLngLat(e.lngLat).setHTML(onSLFFeature(e.features[0])).addTo(map);}); map.on('mouseenter', 'unclustered-point', function () {map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'unclustered-point', function () {map.getCanvas().style.cursor = ''; }); // inspect a cluster on click map.on('click', 'clusters', function (e) { var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] }); var clusterId = features[0].properties.cluster_id; map.getSource('SourceNOAA').getClusterExpansionZoom(clusterId, function (err, zoom) { if (err) return; map.easeTo({center: features[0].geometry.coordinates, zoom: zoom }); }); }); map.loadImage('/media/wildfire/icon/wf.png', function(error, image) {if (error) throw error; map.addImage('wfigsWF', image); }); map.loadImage('/media/wildfire/icon/wf_new.png', function(error, image) {if (error) throw error; map.addImage('wfigsWFNEW', image); }); map.loadImage('/media/wildfire/icon/rx.png', function(error, image) {if (error) throw error; map.addImage('wfigsRX', image); }); map.loadImage('/media/wildfire/icon/cx.png', function(error, image) {if (error) throw error; map.addImage('wfigsCX', image); }); map.addSource('combined_wildfire', {type: 'geojson', data: '/media/wildfire/active/wildfire_combined_location.json?v='+rnna }); map.addLayer({"id": "FEMALayerWN", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","wfn"], "layout": {"visibility":"visible", "icon-image": 'wfigsWFNEW', "icon-size": 0.15, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "FEMALayerW1", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","wf1"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.15, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "FEMALayerW2", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","wf2"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.20, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "FEMALayerW3", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","wf3"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.25, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "FEMALayerW4", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","wf4"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.30, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "FEMALayerW5", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","wf5"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.35, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "FEMALayerRX", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","rx"], "layout": {"visibility":"visible", "icon-image": 'wfigsRX', "icon-size": 0.15, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "FEMALayerCX", "type": "symbol", "source": "combined_wildfire", "filter":["==","icon","cx"], "layout": {"visibility":"visible", "icon-image": 'wfigsCX', "icon-size": 0.15, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addSource('canada_wildfire', {type: 'geojson', data: '/media/wildfire/active/wildfire_canada_location.json?v='+rnna }); map.addLayer({"id": "CanadaLayerWN", "type": "symbol", "source": "canada_wildfire", "filter":["==","icon","wfn"], "layout": {"visibility":"visible", "icon-image": 'wfigsWFNEW', "icon-size": 0.15, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "CanadaLayerW1", "type": "symbol", "source": "canada_wildfire", "filter":["==","icon","wf1"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.15, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "CanadaLayerW2", "type": "symbol", "source": "canada_wildfire", "filter":["==","icon","wf2"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.20, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "CanadaLayerW3", "type": "symbol", "source": "canada_wildfire", "filter":["==","icon","wf3"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.25, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "CanadaLayerW4", "type": "symbol", "source": "canada_wildfire", "filter":["==","icon","wf4"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.30, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "CanadaLayerW5", "type": "symbol", "source": "canada_wildfire", "filter":["==","icon","wf5"], "layout": {"visibility":"visible", "icon-image": 'wfigsWF', "icon-size": 0.35, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addLayer({"id": "CanadaLayerCX", "type": "symbol", "source": "canada_wildfire", "filter":["==","icon","cx"], "layout": {"visibility":"visible", "icon-image": 'wfigsCX', "icon-size": 0.15, 'icon-allow-overlap':true, 'icon-ignore-placement':true, "text-allow-overlap": true},}); map.addSource('combined_wildfire_perimeter', {type: 'geojson', data: '/media/wildfire/active/wildfire_combined_perimeter.json?v='+rnna }); map.addLayer({ "id": "FEMALayerPM", "type": "fill", "source": "combined_wildfire_perimeter", "paint": {'fill-color': "#870505", 'fill-opacity':0.4, 'fill-outline-color': '#CCCCCC' } }, firstSymbolId); for (const fireIcons of ['FEMALayerWN','FEMALayerW1','FEMALayerW2','FEMALayerW3','FEMALayerW4','FEMALayerW5', 'FEMALayerRX','FEMALayerCX','FEMALayerPM']){ map.on('click', fireIcons, function (e) {new mapboxgl.Popup({ offset: 14 }).setLngLat(e.lngLat).setHTML(onCombinediPntFeature(e.features[0],'US')).addTo(map);}); } for (const fireIcons of ['CanadaLayerWN','CanadaLayerW1','CanadaLayerW2','CanadaLayerW3','CanadaLayerW4','CanadaLayerW5','CanadaLayerCX']){ map.on('click', fireIcons, function (e) {new mapboxgl.Popup({ offset: 14 }).setLngLat(e.lngLat).setHTML(onCombinediPntFeature(e.features[0],'CA')).addTo(map);}); } for (const fireIcons of ['FEMALayerWN','FEMALayerW1','FEMALayerW2','FEMALayerW3','FEMALayerW4','FEMALayerW5', 'FEMALayerRX','FEMALayerCX','FEMALayerPM','CanadaLayerWN','CanadaLayerW1','CanadaLayerW2','CanadaLayerW3','CanadaLayerW4','CanadaLayerW5','CanadaLayerCX']){ map.on('mouseenter', fireIcons, function () {map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', fireIcons, function () {map.getCanvas().style.cursor = ''; }); } // csloc.features.forEach(function(marker) { var el = document.createElement('div'); el.className = 'csIcon'; new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).setPopup(new mapboxgl.Popup({ offset: 14 })).addTo(map); });});map.addControl(new mapboxgl.NavigationControl(), 'top-left');var BounceLine = null;if (BounceLine) {var bounds = new mapboxgl.LngLatBounds();BounceLine.forEach(function(Tpolygon) { Tpolygon.forEach(function(Tline){ Tline.forEach(function(Tpoint){bounds.extend(Tpoint); }) }) });map.fitBounds(bounds, { padding: 20 });}