Goed om te weten ...

Most Leaflet users are not aware that the map's display CRS is different from the map's data CRS, and that's fine; it makes life simpler for most people.

display CRS = EPSG:3857, Spherical/Web/Pseudo Mercator, b.v. [5732953.77585,-10018.7582914]
data CRS = EPSG:4326 = WGS84 (latlon) = CRS:84 (lonlat) b.v. [52.606918, 6.457131]

longitude,latitude (lon,lat) of latitude,longitude (latlon) ? of beide ?

Leaflet : lat,lon
GeoJSON, KML lon,lat
Decimal_degrees

Click in de kaart voor informatie.

Plug-ins

Handige plugins die werken met de laatste versie van Leaflet :

• Leaflet Control Search
• Leaflet.fullscreen
• Leaflet.zoomhome
• Leaflet.EasyButton
• Leaflet.imageTransform
• sidebar-v2
• Leaflet-Slider
• Leaflet.Photo

GeoJSON

Laad GeoJSON data bestand asynchroon.

$.getJSON("./geo.json", function(data){
    L.geoJSON( data ).addTo(map);
});

Laad GeoJSON data bestand synchroon. Niet aanbevolen ! De browser blokkeert tot data geladen is !

var myData
$.ajax( {async: false, url: "./geo.json",success: function(data) {myData=data;}} );
L.geoJSON( myData ).addTo(map);

GetFeatureInfo

Opvragen van objectinformatie middels een GetFeatureInfo request. Gebruikte laag zijn de verblijfsobjecten (punten) uit de Basisregistratie Gebouwen en Adressen (BAG) via PDOK.

function onMapClick(e) {
    var  sw = this.options.crs.project(this.getBounds().getSouthWest()),
         ne = this.options.crs.project(this.getBounds().getNorthEast());

    obj = {
        service: 'WMS',
        version: "1.3.0",
        request: "GetFeatureInfo",
        layers: "verblijfsobject",
        styles: '',
        format: 'image/png',
        crs: 'EPSG:3857',
        i: Math.round(this.layerPointToContainerPoint(e.layerPoint).x),
        j: Math.round(this.layerPointToContainerPoint(e.layerPoint).y),
        bbox: sw.x + ',' + sw.y + ',' + ne.x + ',' + ne.y,
        width: this.getSize().x,
        height: this.getSize().y,
        query_layers: "verblijfsobject",
        info_format: 'application/json',
        feature_count: 1
    };

    var URL = "https://geodata.nationaalgeoregister.nl/bag/wms/v1_1" + L.Util.getParamString(obj, "", true) ;

    $.ajax({
        url: URL,
        success: function (data, status, xhr) {
                    console.log(xhr.responseText);
                    if( data.features.length == 1 ) {
                        p = data.features[0].properties;
                        info += 'Gebruik ' + p.gebruiksdoel;
                        info += 'Bouwjaar ' + p.bouwjaar;
                        info += 'Oppervlakte ' + p.oppervlakte;
                        info += 'Adres ' + p.openbare_ruimte + ' ' + p.huisnummer;
                        info +=  p.postcode + ' '+ p.woonplaats;
                        popup.setLatLng(e.latlng);
                        popup.setContent("Pand : " + info);
                        map.openPopup(popup);
                    }
                    var err = typeof data === 'string' ? null : data;
                 },
        error: function (xhr, status, error) {
             console.log(error);
        }
    });
}