Geek Answers Handbook

Updating a Leolet GeoJSON layer with data inside the bounding box

I am using the booklet / JavaScript for the first time, and I want to display a map with a GeoJSON layer that changes with every move ... Show only points in the area.

This is my code:

// Function to refresh points to display function actualiseGeoJSON() { // Default icon for my points var defaultIcon = L.icon({ iconUrl: '../images/icones/cabane.png', iconSize: [16, 16], iconAnchor: [8, 8], popupAnchor: [0, -8] }); // We create each point with its style (from GeoJSON file) function onEachFeature(feature, layer) { var popupContent = '<a href="' + feature.properties.url + '">' + feature.properties.nom + "</a>"; layer.bindPopup(popupContent); var cabaneIcon = L.icon({ iconUrl: '../images/icones/' + feature.properties.type + '.png', iconSize: [16, 16], iconAnchor: [8, 8], popupAnchor: [0, -8] }); layer.setIcon(cabaneIcon); } // We download the GeoJSON file (by using ajax plugin) var GeoJSONlayer = L.geoJson.ajax('../exportations/exportations.php?format=geojson&bbox=' + map.getBounds().toBBoxString() + '',{ onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: defaultIcon}); } }).addTo(map); } // We create the map var map = L.map('map'); L.tileLayer('http://maps.refuges.info/hiking/{z}/{x}/{y}.png', { attribution: '&copy; Contributeurs d\'<a href="http://openstreetmap.org">OpenStreetMap</a>', maxZoom: 18 }).addTo(map); // An empty base layer var GeoJSONlayer = L.geoJson().addTo(map); // Used to only show your area function onLocationFound(e) { var radius = e.accuracy / 2; L.marker(e.latlng).addTo(map); actualiseGeoJSON(); } function onLocationError(e) { alert(e.message); actualiseGeoJSON(); } function onMove() { // map.removeLayer(GeoJSONlayer); actualiseGeoJSON(); } map.locate({setView: true, maxZoom: 14}); // Datas are modified if map.on('locationerror', onLocationError); map.on('locationfound', onLocationFound); map.on('moveend', onMove);

I tried to remove the layer in my first function, but GeoJSONlayer is not defined. I tried to delete the layer in onMove (), but nothing appears. I tried to delete the layer in the moveend event, but I have a syntax error ...

If someone can help me ...

Sorry for my bad english, french guy and french function names

+4
source share
2 answers

I see that you are using the ajax plugin for flyers.

The easiest way to get your map to work is to download all the available data from the very beginning by providing a giant bounding box and adding it to the map only once. This will probably work very well if there aren’t insanely many cabins and things to load.

But if you want to regularly update the data based on the bounding box, you can use the update method in the ajax booklet plugin :

you can also add an array of URLs instead of one, remember that "addUrl" adds the new url (s) to the list of current ones, but if you want to replace them, use the update, for example:

 var geojsonLayer = L.geoJson.ajax("data.json"); geojsonLayer.addUrl("data2.json");//we now have 2 layers geojsonLayer.refresh();//redownload those two layers geojsonLayer.refresh(["new1.json","new2.json"]);//add two new layer replacing the current ones

So, initially:

 var defaultIcon = ... function onEachFeature(feature, layer) ... // Do this in the same scope as the actualiseGeoJSON function, // so it can read the variable var GeoJSONlayer = L.geoJson.ajax( '../exportations/exportations.php?format=geojson&bbox=' + map.getBounds().toBBoxString() + '',{ onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: defaultIcon}); } }).addTo(map);

And then for each update:

 function actualiseGeoJSON() { // GeoJSONLayer refers to the variable declared // when the layer initially got added GeoJSONlayer.refresh( ['../exportations/exportations.php?format=geojson&bbox=' + map.getBounds().toBBoxString() + '']); }

Alternatively, you can set the layer as a map property, rather than as var :

 map.geoJsonLayer = L.geoJson.ajax(...)

And later refer to it as follows:

 map.geoJsonLayer.refresh(...)
+5
source

This flyer poster is more suitable for your purpose, manages map events and scaling. Caching remote requests and more.

http://labs.easyblog.it/maps/leaflet-layerjson/

 var ajaxUrl = "search.php?lat1={minlat}&lat2={maxlat}&lon1={minlon}&lon2={maxlon}"; map.addLayer( new L.LayerJSON({url: ajaxUrl }) );

Extend L.GeoJSON with more features and support ajax or jsonp request. See comments on the source code for more details.

0
source

More articles:


All Articles