Hot answers tagged

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) { ...


4

In your bindPopup, make sure the call to the GeoJSON property matches its actual name: var markerStyle = { radius: 3, fillColor: "#E4007C", color: "#E2062C", weight: 1, opacity: 0.9, fillOpacity: 0.7 }; var city = L.geoJson(cities, { pointToLayer: function (features, latlng) { return L.circleMarker(...


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(...


2

If you want to have popup for each layer, you have bind it to each individual layer, not to the cluster: var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{ onEachFeature: function(feature, layer){ layer.bindPopup(feature.properties.siteid); } });


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....


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....


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 ...


2

In your model, try adding a property to build a list of coordinates, which seems required by Leaflet as you can see here: Source: https://leafletjs.com/reference-1.4.0.html#polygon I would go something this way; class newJob(models.Model): job_name = models.CharField(max_length=64) job_user = models.CharField(max_length=64) job_desc = models....


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 ...


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 ...


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,...


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 ...


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 ...


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 ...


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

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

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 ...


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: ...


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: ...


1

Here is an answer that will use a JSON response from your view and grab it using leaflet ajax. I don't know your data and rarely use the django methods to return SQL data but what you could do is just return the table you want as JSON. Returning it as JSON you will have to figure out yourself (could use Django or if its in postgres just in the db connection ...


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"...


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'.


Only top voted, non community-wiki answers of a minimum length are eligible