New answers tagged leaflet
1
Since world borders GeoJSON data is requested by bounding box, you indeed have to clear previous features when loading new ones after map zoom or pan.
The simplest was to do that is to first create world borders layer at global level and then when new data is fetched, first clean it and than add new data.
Code could then look something like this:
const ...
0
I am not an expert but I would like to share what I did to tackle it. Since GeoJSON is basically a string, I added a string specifying the CRS (3857 in this example) manually. Might be useful to someone.
json = geo_df.to_json()
attr = grid_out.split(',', 1)
json_with_crs = attr[0] + ', "crs": { "type": "name", "properties&...
2
Group layer Tooltip can be used not to actually display tooltips, bust just as a switch in layer control to trigger tooltips display on/off.
When layer Tooltip is selected in the control, it fires layer event add. In event processing function markers from earthquakesEMSC are iterated and tooltips made permanent. When layer Tooltip is deselected in the ...
1
Leaflet.Wikipedia plugin has a big defficiency/bug that it does not refresh data when map is zoomed or panned. This means that on any map zoom/pan, which triggers map moveend event, layer has to be recreated.
Simplest way to do this is to have an auxiliray layer group wikipedia, where old data/features is first cleared out and then new data/features are ...
4
Concept of vector grid layers is such that features cannot be filtered out, but just not displayed by giving them appropriate style.
You can select which features to display and which to hide in vectorTileLayerStyles option property sliced. This can be function where first parameter is feature properties and second parameter is zoom.
So for example in your ...
0
Removing async from the bindPopup(<fn>) did the trick. So, the following works. In the end, it was just a timing issue.
marker.bindPopup(() => {
const el = document.createElement('div');
let html = `<h4>${r.title}</h4>`;
const getData = async (url) => {
const response = await fetch(url);
if (response.ok) {
...
3
Without actually testing I would say that what's missing is removing possible existing marker cluster layer when creating a new one.
So probably the code should be something like:
const makeFoo = async (bounds) => {
// get points for `bounds` from the server
const url = `server/?bounds`;
const response = await fetch(url);
if (response.ok) ...
3
Answer will be based on sourceData demo example code.
Search control sourceData option is a function that has to prepare an array of objects to be searched (here it's static array data), where each object has loc property with location coordinate and title property with associated search text. There is only one coordinate allowed per search text, so if you ...
3
This is classic example of getting the results of an event handler:
function searchEventHandler(result) {
console.log(result.location);
}
map.on('geosearch/showlocation', searchEventHandler);
Here is an example of result.location object:
{
"x": -77.0365427,
"y": 38.8950368,
"label": "Washington, District of ...
0
I eventually figured out what was the problem. Part of leaflet request:
format_options: 'layout:message',
//attribution: "Algum texto de teste",
layout: 'message'
was calling for layout:message WMS decorator which wasn't declared in Geoserver settings.
Hence, after removing these from leaflet request, everything worked fine.
2
You can use countries.eachLayer group layer method to iterate through layer features and then use turf.booleanIntersects method to check which country feature intersects polyline.
To log intersected countries on the console, code could then look something like this (assuming feature property name contains country name):
var polyline = L.Polyline(polylineData)...
1
Instead of using L.circle to get bounds (where circle has actually to be drawn on the map), I would recommend using turf.js library for that.
You can first use turf.buffer method to get desired circle around point, and then turf.bbox method to get bounding box of circle.
Function to fit map to desired circle could then look something like this:
function ...
0
CromKDE95 <-sp::CRS("+init=epsg:29902")
Try this using the EPSG format for ireland (29902)
1
Your request is missing a version number, also for WFS 2 you need a typenames parameter, and for previous versions a typename with your GetFeature request.
The below request works for example:
https://wxs.ign.fr/agriculture/geoportail/wfs?SERVICE=WFS&REQUEST=GetFeature&typeNames=RPG.2020:parcelles_graphiques&outputFormat=application/json&...
3
Map object (let's say it's map) has property map.attributionControl which points to default map attribution control, where so called prefix is text Leaflet with a link to the Leaflet home page.
Attribution control prefix can be changed with the .setPrefix method (see https://leafletjs.com/reference.html#control-attribution-option). So to change prefix to ...
0
Solved:
let googleGeoCoderProvider = L.Control.Geocoder.google({
apiKey: 'MIGOOGLEGEOCODERAPIKEY',
});
2
I'm not familiar with Flicker, but obviously link to individual photo
url: 'https://www.flickr.com/photos/' + p.id + '_' + p.secret + '.jpg'
does not work any more.
After some experimenting on the basis of thumbnail URL p.url_t I found out that link to individual photo should look like this:
url: 'https://live.staticflickr.com/' + p.server + '/' + p.id + '_'...
2
Vertical order of layers in Leaflet is regulated through so called map panes (see https://leafletjs.com/reference.html#map-pane). All tiled layers are assigned to tilePane, display order of layers on that pane is order of adding layers to the map. If layer is hidden and then showed again, it goes to the top.
If you want to keep your WMS layer on the top all ...
0
Success: I was finally able to load a second WFS in the control layer as another overlay named "featureLayer2". featureLayer appears in light orange, featureLayer2 appears in black, they are clickable with their Intotip. I guess and hope well I could do that with another featureLayer3, and featureLayer4 if I wish...
var featureLayer2 = new L....
0
you should in last of your code to call all your wfs to create in map like a control to be able to swich between all your layers overlay.
var baseMaps = { wfs1,wfs2,wfs3};
var overlayMaps = {};
L.control.layers(baseMaps, overlayMaps).addTo(map);
0
I found a solution that was good enough for me:
Convert from GeoJSON to MBTiles via Tippecanoe
Serve the MBTiles via Tileserver-GL which gives endpoints for raster and vector tiles.
3
the
evt.layer.bindPopup((template), customOptions);
was replaced with
evt.layer.bindPopup(L.Util.template(template, evt.layer.data), customOptions);
and successfully managed to show the data.
0
As you have found out, if GeoJSON feature layer is member of several group layers and one of those group layers is removed from the map, that feature is completely removed from map, even though it is member of other group layers that are shown on the map.
To solve this, new feature layer has be created from feature each time that layer is added to a ...
1
To modify default marker for GeoJSON layer points you have to use pointToLayer option when creating layer (reading docs and tutorials can actually help, see https://leafletjs.com/reference.html#geojson-pointtolayer and https://leafletjs.com/examples/geojson/).
In your case code for creating GeoJSON layer could then look something like this:
var featureLayer =...
Top 50 recent answers are included