LeafletJS + Geojson = διαδραστικοί χάρτες

Η διαδικτυακή εφαρμογή που παρουσίασα ως “Διαδραστικοί χάρτες (νομοί, δήμοι, παγκόσμιος)” έγινε με την χρησιμοποίηση της JavaScript βιβλιοθήκης LeafletJS και των open data σε μορφή geojson από το geodata.gov.gr

Αν και η βιβλιοθήκη LeafletJS έχει ένα πολύ καλό documentation, θα παραθέσω χρήσιμα κομμάτια κώδικα με την βοήθεια των οποίων ολοκήρωσα αυτή την εφαρμογή.

Οι διάφορες προβολές χάρτη (Open Street Map, Google maps κτλ) αρχικοποιούνται στις παρακάτω επιλογές, και δημιουργούμε ένα javascript object με τις σχετικές επιλογές.

let GoogleHybrid = L.tileLayer("http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}", {
    maxZoom: 18,
    subdomains: ["mt0", "mt1", "mt2", "mt3"],
});
let GoogleSatellite = L.tileLayer("http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
    maxZoom: 18,
    subdomains: ["mt0", "mt1", "mt2", "mt3"],
});
let GoogleTerrain = L.tileLayer("http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}", {
    maxZoom: 18,
    subdomains: ["mt0", "mt1", "mt2", "mt3"],
});
let OpenStreetMap = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});


let baseMaps = {
    "Open Street": OpenStreetMap,
    "Google Hybrid": GoogleHybrid,
    "Google Satellite": GoogleSatellite,
    "Google Terrain": GoogleTerrain
};

Δημιουργούμε τα layers με τα geojson δεδομένα.

let nomoi = L.layerGroup([new L.GeoJSON.AJAX([geojson_dedomena_url], { onEachFeature: popUp })]);
let overlayMaps = {
    Νομοί: nomoi
};

Και στη συνέχεια δημιουργούμε το LeaftJS map.

let map = L.map("map", {                      // html element με id=map
    center: [38.5078462, 24.1061853],
    zoom: 7,
    zoomControl: false,
});
L.control.layers(baseMaps, overlayMaps).addTo(map);
GoogleSatellite.addTo(map);
nomoi.addTo(map);

Για να χρησιμοποιήσουμε το popup με τις πληροφορίες του geojson πρέπει να ενσωματώσουμε στο project μας το και το plugin Leaflet AJAX.

function popUp(f, l) {
    let out = [];
    if (f.properties) {
        for (key in f.properties) {
            out.push(key + ": " + f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
    }
}