Leaflet Plugins, Tips & Tricks
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.
Handige plugins die werken met de laatste versie van Leaflet :
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);
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);
}
});
}