New answers tagged leaflet
2
I'll just copy-paste my response to Leaflet bug #6173 :
I'm reading the OGC's Simple Feature Access specification (again), to remind myself about the formal definitions of Polygons and MultiPolygons. Let me quote page 31:
6.1.14 MultiPolygon
A MultiPolygon is a MultiSurface whose elements are Polygons.
The assertions for MultiPolygons are as follows.
a) The ...
0
Plotting Layers and Titles in Folium
I add an answer in case someone needed it in the future.
import folium
m2=folium.Map(location=loc)
folium.TileLayer('Stamen Terrain').add_to(m2)
folium.TileLayer('Stamen Toner').add_to(m2)
folium.TileLayer('Stamen Water Color').add_to(m2)
folium.TileLayer('cartodbpositron').add_to(m2)
folium.TileLayer('cartodbdark_matter')...
1
Okay, so you can get extent points by using:
map.on('moveend', function() {
var southWest = map.getBounds().getSouthWest();
var northEast = map.getBounds().getNorthEast();
var northWest = map.getBounds().getNorthWest();
var southEast = map.getBounds().getSouthEast();
});
Then you have coordinates of your map extent. Now, depending on the application design,...
0
To avoid dealing with each marker separately, you can put those labels that you want to show only at certain zoom level, not directly on map but in a separate group layer. You can then add/remove this group layer to the map depending on zoom.
Code could then look something like this:
var markerGroup = L.layerGroup();
function createLabel(layer, text, count){...
2
You're unlikely to get the accuracy and precision you're looking for from the imagery on Google Maps. While aerial imagery can often be quite accurate, remember that it's taken from a moving aircraft where the camera is constantly moving and tilting, so calculating the real-world position of each pixel in each image is a hard process, with a wide range of ...
0
So i figured out what was causing the problem.
.leaflet-popup-content {
width:auto;
padding-right:14px;
}
The width setting to auto in the qgis2web.css sheet produced the error. I just changed the value to 100 px and now it looks perfect.
1
Use setStyle() instead of modifing the property.
const onEachCountry = (country, layer) => {
console.log(country.properties.color) //This shows me that some of the country colors has been changed
layer.setStyle({fillColor: country.properties.color}); // this should change the color of the map according to country.properties.color. But even after ...
1
As @IvanSanchez wrote in his comment, the reason for the error is that you are using function call instead of function object when defining click event handler. It should be click: popup, not popup(feature, layer).
But even in that case it would not be correct, since popup handler would bind layer popup again and again at each click.
Correct way is to bind ...
0
Obviously if I declare var **customLayer** = L.geoJson (...,
then that I use **geoJson**.resetStyle (e.target); as in the example it does not work.
I have to use **customLayer**.resetStyle (e.target);
0
I don't know aht result is but you can use this code:
searchControl.on('results', function (data) {
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
L.marker(data.results[i].latlng).addTo(results)
.bindPopup('Hi, I am here.<br> Which services are nearby?')
.openPopup();
}
}
1
I think the problem on this is that in the addDrawToolbar command, you have position equal to: c('topleft', 'topright', 'bottomleft', 'bottomright'). You need to pick one of these, like position = 'topright'.
5
A simple way of doing this would be to count load events of individual layers and when count is equal to number of layers, it's done.
Code could then look something like this:
var nLayers = 0;
var nLayersLoaded = 0;
function setLoadEvent(layer) {
nLayers++;
layer.on("load", function() {
nLayersLoaded++;
if (nLayersLoaded == nLayers) {
...
0
You need to add the wms-layers to the map with .addTo(map)
var PostosAdministraticosWMS = L.tileLayer.wms('http://localhost:8080/geoserver/Mocambique/wms?',{
layers:'Mocambique:Moçambique_Distritos_e_Postos',
version: '1.1.0',
transparent:'true',
format: 'image/png',
attribution: "myattribuition"
}).addTo(map);
1
GPX XML schema definition (see https://www.topografix.com/GPX/1/1/) states that <trk> element can have several members that describe it. Leaflet-omnivore plugin you are using to read GPX brings only two of them as feature properties to GeoJSON layer: <name> and <desc>.
You are already using the first one to name your tracks, so you can use ...
0
Since GeoJSON layer in question is not big, the simplest solution would be to iterate through all the layers/features of GeoJSON layer and set style for those that have desired num_mur property.
Code could the look something like this (not tested):
function setMurStyle(selLayer, style) {
var numMur = selLayer.feature.properties.num_mur;
lat_murs....
0
// Agregar el Search Box
L.Control.geocoder({
position: "topright",
placeholder: "Buscar Direccion",
errorMessage: "Dirección no encontrada.",
showResultIcons: true,
defaultMarkGeocode: false
}).on('markgeocode', function(e) {
posMarker(e.geocode.center);
objMap.panTo(e.geocode.center);
} ).addTo(...
0
You can change the current path of the icon in leaflet css. So don't use the url leaflet.css, download the file and change it.
.leaflet-default-icon-path {
background-image: url(https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png);
}
0
It seems that leaflet is reprojecting the raster and that is causing some interpolation of cells.
Since your grid is a lat-long decimal degree grid, if you add project=FALSE you can get it to skip this step and the output has none of these interpolated pixels and all seems to be the right colour:
leaflet() %>% addRasterImage(ras,colors = pal)
...yuck
...
0
I managed to do this by passing in the geojson polygon as a layer into the search control and display the info by using bindPopup. In case anyone has the same question, here is the html code:
<!DOCTYPE html>
<html>
{% load static %}
{% load leaflet_tags %}
<head>
{% leaflet_js %}
{% leaflet_css %}
<title>Home</title>
...
1
This is an instance of the XY problem. You say you want to...
How can I convert the gpkg file into an array that I can easily traverse through?
...but I do not think you want to convert the data into a structure you can traverse through, I think you just want to traverse through the data.
Now, the geopackage-js documentation states:
GeoPackageFeatureLayer ...
2
No, the number of relevant decimal places used in numbers do not matter.
In Javascript*, all numbers are stored as 64-bit IEEE-754 floating point numbers, as documented. No matter how many base-10 relevant digits you see, internally there's always a 52-bit mantissa.
(* I mean, non-WebGL, non-Float32Array Javascript, which is the case for Leaflet. Since using ...
2
The easiest way is to call .resetStyle() on the GeoJSON Group. This clears the style of all markers. Or you can call .resetStyle(layer) then it resets only the passed layer.
I recommand to reset all styles when a marker is clicked and then add the new style:
function resetMarkerStyles(){
contentLayer.resetStyle();
infoWindow.update();
}
function ...
0
Rearranging the colour click and reassigning functions will make this easier.
There was an issue with the way in which the colour changing script led to an error in which the way the infobox was called.
Splitting the functions up helped to reduce confusion and enable to colour change to be called upon click and then updating the infobox by assigning it to ...
2
If you look at the docs of leaflet-omnivore plugin, you'll se you can style layer with the help of so called custom GeoJSON layer, where you can apply styles to your GPX features/tracks.
Since your GPX XML has no property to be used as the basis for color assignment, solution below assigns colors from a array of predefined colors. Each feature is at the ...
1
It seems you are out of luck here with regular standard solutions, since leaflet-markers-canvas plugin somehow messes with regular Leaflet event processing. Neither L.DomEvent.stopPropagation(e) or L.DomEvent.preventDefault(e) prevent click event reaching the map.
One possible solution would be to have marker click indicator markerClick and set it to true ...
1
Here is a full answer with a if ... else if ... else condition :
filter: function(feature, layer) {
if (varState == "01") {
return (feature.properties.field1 == "yes" && feature.properties.field2 == "yes");
}
else if (varState == "02") {
return (feature.properties.field1 == "yes"...
3
Quick and 'dirty' solution would be to simply create global var marker for saving created marker, which can then be remove upon mouse exit:
var marker;
function locOver(event) {
var llt = event.target.dataset["lat"],
lln = event.target.dataset["lon"];
marker = L.marker([llt, lln]).addTo(...
0
For those who're straggling with the incorrect location of the marker after drag and drop an img on the map(addition to the previous comment):
const val = target.getBoundingClientRect();
const { x, y } = val;
[e.clientX-x, e.clientY-y]
2
You can use the turf function booleanContains:
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5.1.6/turf.min.js"></script>
var poly = L.polygon([[22.29227, 114.20847],[32.28227, 110.24847],[42.08227, 114.19847]]).addTo(map)
function onLocationFound(e) {
var marker = L.marker(e.latlng).addTo(map)
var contains = turf....
1
As @IvanSanchez wrote in his answer, problem comes from clicking on the default marker, which has no setStyle method. And there is definitely no need for two layers from the same GeoJSON source.
Solution for what you want to achieve is to use just pointToLayer method to create marker and click event.
Code could the look something like this:
var clicked;
var ...
0
I do answer my own question if someone with the same question finds this topic:
1: In the handsontable intit:
afterChange: function (changes, src) {
if (src !== 'loadData') {
var editedRow = this.getDataAtRow(changes[0][0]);
for (key in drawnItems._layers) {
...
1
The way is simple.
You just need tobound your whole file in the JavaScript code and attach it to your map.
It has been explained here:
http://www.mkrgeo-blog.com/excel-spreadsheet-batch-data-geocoding-for-geojson-and-json-files/
If I would bring your example here it could look like this:
var file = { your JSON data }
Next save this file as the .js file ...
1
Your code (which I adapted into a reproducible example here) is adding the dataset twice to the map, once as L.CircleMarkers...
var trainGeo = L.geoJSON(wtsGeo, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, tMarker);
},
});
...and once as default L.Markers...
var clickLayer = L.geoJSON(wtsGeo, {
style: ...
0
This question already has an accepted answer, but it seems like the answer may be very specific to OP's particular code.
If anyone else is having trouble loading more than 1 leaflet layer with this whole asynchronous/synchronous problem, here is a solution I found and have tested for my personal use. It's working perfectly for me.
My problem: A leaflet map ...
2
In Leaflet each member of a group layer (marker is member of GeoJSON group layer) gets internal id, which can be retrieved with .getLayerId method. This id can later be used to retrieve desired member (marker) with the .getLayer method.
When you construct your popup with attachPopup(layer), you can retrieve marker layer id with
var layerId = markers....
0
turf.buffer method returns GeoJSON feature, which cannot be directly added to the map. You have to create GeoJSON layer, add feature to the layer and layer to the map. Leaflet polyline also has to be converted to GeoJSON to be used as input to turf.buffer method.
Code could then look something like this:
var buffered = turf.buffer(lineString.toGeoJSON(), 500,...
0
I managed to solve this by marking the coordinates with array numbers and setting them into the correct order for the rendering into leaflet. Another way would be using the leaflet method 'l.geojson.coordstolatlngs()' to switch the lat and lng coordinates.
{this.state.schoolList.length > 0 &&
this.state.schoolList.map(({ ...
0
Leaflet has only one standard blue icon for markers, so if you want to have markers with different icons, you'll have to create them yourself (see https://leafletjs.com/reference-1.7.1.html#icon).
Since you have two different GeoJSON layer sources and want to have different markers for each source, the simplest way is to create two separate layers, where you ...
0
I'm writing this to inform that I solved this problem by changing the name of the callback (both in format_options and jsonpcallback) making it unique in each WFS request I needed
1
I think it should work to call both request. But the problem that I see is that you don't add it to the map in your code.
Replace it with:
...
success: function (response) {
WFSLayer.addData(response);
WFSLayer.addTo(map);
}
...
success: function (response) {
BuildingsWFSLayer.addData(response);
BuildingsWFSLayer....
1
The cause of your problem with WFS layer is that layer object initially has NULL value. Since actual layer is created async via AJAX, layer does not exist at the time of Leaflet tree control creation and as a consequence you get mentioned error.
Solution for this is to initially create an empty GeoJSON layer, and then fill it with data async and add to map:
...
Top 50 recent answers are included
