1. Applications

2. Download Geojson files

• From https://data.gis.ny.gov, download New York State waste water treatment plants, combined sewere overflow locations, inactive landfills, recycling facilities, power plants, waste transfer stations, energy transmission lines, and oil storage locations.
• From https://opendata.cityofnewyork.us, download NYC hurricane evacuation zones and NYC projected floodplains.
• From Homeland Infrastructure Foundation-Level Data (HIFLD), download natural gas pipelines.
• From US Census Bureau, download data for per capita income.

3. Set up Leaflet map

Create a Github pages account and set up a repository to display you Leaflet map.
Create a javacript file and enter the following information. This code places the Leaflete map on the website and sets the initial location as New York City

  
    var map = L.map('nymap', {            
}).setView([40.7128, -74.0060]); 

4. Add Open Street Maps as the base layer

This code adds Open Street Maps as the layer beneath the geojson layers that will be added later

  
var map = L.map('map-container').setView([0, 0], 2);

var openstreetmapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    // No style options here for custom styling
});

openstreetmapLayer.addTo(map);

5. Add geojson layers to appear over the OSM layer

This geojson data is for the location of the Air Quality Monitoring Sites. Repeat this proces for other geojson layers of data. Convert circle markers to lines and polygons for other their respective data types.

  
    // AQI sites
var aqisiteLayer = L.geoJSON.ajax('https://aurashak.github.io/geojson/nyc/aqisite.geojson', {
pointToLayer: function (feature, latlng) {
var size = calculateMarkerSize(map.getZoom());
return L.circleMarker(latlng, {
    radius: size,
    fillColor: 'green',
    color: 'black',
    weight: 0,
    opacity: 0.0,
    fillOpacity: 0.5
});
}
});

6. Create layer groups

Create layer groups for how you want the content to be structured. This example is for the Energy layer group.

  
    // Energy Layer Group
var energyLayerGroup = L.layerGroup();


// Major Oil Storage Layer
var majoroilstorageLayer = L.geoJSON.ajax('https://aurashak.github.io/geojson/nyc/majoroilstorage.geojson', {
    pointToLayer: function (feature, latlng) {
        var size = calculateMarkerSize(map.getZoom());
        return L.circleMarker(latlng, {
            radius: size,
            fillColor: 'black',
            color: 'black',
            weight: 0,
            opacity: 0.7,
            fillOpacity: 0.5
        });
    }
}).addTo(energyLayerGroup);

7. Add event listeners for each layer

Event listeners are necessary to toggle the layers on and off when the switches are pushed.

  
    document.getElementById('nycso').addEventListener('change', function() {
    if (map.hasLayer(nycsoLayer)) {
        // If the layer is already on, do nothing when switching left to right
        if (document.getElementById('nycso').checked) {
            return;
        }
        map.removeLayer(nycsoLayer);
    } else {
        map.addLayer(nycsoLayer);
    }
});

8. Create event listeners for each layer group

Event listeners for each layer group will show or remove all layers in a group when the group switch is toggled on or off.

  
    document.getElementById('energyLayerGroup').addEventListener('click', function() {
if (map.hasLayer(energyLayerGroup)) {
    map.removeLayer(energyLayerGroup);
    // If the group toggle is turned off, turn off individual layers as well
    map.removeLayer(majoroilstorageLayer);
    map.removeLayer(powerplantsLayer);
    map.removeLayer(nygaspipelinesLayer);
    map.removeLayer(electrictransmissionlinesLayer);

    // Reset the individual layer toggle buttons to off state
    document.getElementById('majoroilstorage').checked = false;
    document.getElementById('powerplants').checked = false;
    document.getElementById('nygaspipelines').checked = false;
    document.getElementById('electrictransmissionlines').checked = false;

} else {
    map.addLayer(energyLayerGroup);
    // If the group toggle is turned on, turn on individual layers if they were previously checked
    if (document.getElementById('majoroilstorage').checked) {
        map.addLayer(majoroilstorageLayer);
    }
    if (document.getElementById('powerplants').checked) {
        map.addLayer(powerplantsLayer);
    }
    if (document.getElementById('nygaspipelines').checked) {
        map.addLayer(nygaspipelinesLayer);
    }
    if (document.getElementById('electrictransmissionlines').checked) {
        map.addLayer(electrictransmissionlinesLayer);
    }
}
});

9. Add the map legend function

In order for the symbology for each layer to show in the map legend (the symbol beside each layer on the map website), add these functions.

  
    // Set the legend symbol shapes and colors for each layer
setLegendSymbol('evacuationzones', 'red', 'polygon');
setLegendSymbol('electrictransmissionlines', 'orange', 'line');
setLegendSymbol('aqisite', 'green', 'circle');
setLegendSymbol('chemicalstorage', 'blue', 'circle');
setLegendSymbol('recyclingfacility', 'orange', 'circle');
setLegendSymbol('nycso', 'brown', 'circle');
setLegendSymbol('nygaspipelines', 'purple', 'line');
setLegendSymbol('powerplants', '#FFC0CB', 'circle');
setLegendSymbol('wastewatertreatment', 'red', 'circle');
setLegendSymbol('wastetransferfacility', 'purple', 'circle');
setLegendSymbol('majoroilstorage', 'black', 'circle');
setLegendSymbol('inactivesolidwastelandfill', 'grey', 'circle');
setLegendSymbol('floodplain', '#ADD8E6', 'polygon');

// Function to set legend symbols
function setLegendSymbol(layerId, color, shape) {
const legendSymbol = document.getElementById(`legend-${layerId}`);

if (legendSymbol) {
if (shape === 'circle') {
    // Create a circle SVG element with a slightly smaller size
    legendSymbol.innerHTML = ``;
} else if (shape === 'line') {
    // Create a line SVG element with a slightly smaller size
    legendSymbol.innerHTML = ``;
} else if (shape === 'polygon') {
    // Create a polygon SVG element (example polygon with 5 points) with a slightly smaller size
    legendSymbol.innerHTML = ``;
}
}    
}