Socialify

Folder ..

Viewing map.js 
104 lines (91 loc) • 3.2 KB

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
var map;
InitializeMap({
    city: "Buffalo",
    latitude: 42.8864,
    longitude: -78.8784
});

function InitializeMap(city) {
    map = L.map('map').setView([city.latitude, city.longitude], 12);
    displayMap(map, city);
}

function reRenderMap(city, style={}) {
    map.remove();
    map = L.map('map').setView([city.latitude, city.longitude], 12);
    displayMap(map, city, style);
}

function displayMap(map, city, style = {}) {
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        accessToken: 'pk.eyJ1IjoibHVjaWZlcmNyIiwiYSI6ImNrNGx0amIzejJkaHIzZm8yODB2dGx2cXYifQ.sopB-tKzpX_qXc30bv_puQ'
    }).addTo(map);
    getBoundaries(city.city).then(function (bd) {
        var lines = [];
        for (var element of bd) {
            const extractedBoundary = {
                type: 'Feature',
                properties: {
                    name: city.city
                },
                geometry: {
                    type: element.gs_type,
                    coordinates: element.boundaries.coordinates
                }
            }
            lines.push(extractedBoundary);
        }

        var geoJSON = {
            type: 'FeatureCollection',
            features: lines
        };
        var fg = L.featureGroup().addTo(map);
        var gs = L.geoJSON(geoJSON).addTo(map);

        if (style.fillColor) {
            fg.clearLayers();
            gs.setStyle(style);
        }

        try {
            map.fitBounds(gs.getBounds());
        } catch (e) {
            L.marker([city.latitude, city.longitude]).addTo(map)
                .bindPopup(city.city)
                .openPopup();
        }
    })
}

function getBoundaries(city) {
    geojson = [];

    return fetch(`https://nominatim.openstreetmap.org/search.php?q=${city}&polygon_geojson=1&format=jsonv2`).then(function (response) {
        return response.json();
    }).then(function (data) {
        counter = 0;

        for (var el of data) {
            if (el.type === "administrative") {
                geojson.push({ boundaries: el.geojson, name: el.display_name, gs_type: el.geojson.type });
                counter += 1;
            }

            if (counter === 1 && !el.display_name.includes("Rural")) {
                break;
            } else if (counter === 2 && el.display_name.includes("Rural")) {
                break;
            }
        }
        return geojson;
    }).catch(function () {
        return false;
    });
}

function getColors(temperature) {
    // Generate relevant colors from temperature values for the map and return them
    // Set hex values to 0.3 opacity
    return temperature > 40 ? '#ff0000' : temperature > 30 ? '#ff4000' : temperature > 20 ? '#ff8000' : temperature > 10 ? '#ffbf00' : temperature > 0 ? '#ffff00' : temperature > -10 ? '#bfff00' : temperature > -20 ? '#80ff00' : temperature > -30 ? '#40ff00' : temperature > -40 ? '#00ff00' : '#00ff40';
}

// Function to change color of the map geoJSON based on provided temperature input
function changeColor(city, temperature) {
    var color = getColors(temperature);
    var style = {
        fillColor: color,
        fillOpacity: 0.3,
        color: color,
        weight: 1
    };
    reRenderMap(city, style);
}