Hot answers tagged

11 votes
Accepted

Styling popup with two separate styles at once in Leaflet

I have no idea what the error means, but you can make a circle and a semicircle, then, combine them in a featureGroup. var map = L.map('map').setView([39, 30], 7); L.tileLayer('https://api.mapbox.com/...
user avatar
9 votes
Accepted

Make polygon of GeoJSON layer unclickable after first click in Leaflet

One possible solution would be to use some custom polygon/layer property, like for example wasClicked (name can be any, as long is does not conflict with standard Leaflet layer properties), to mark ...
user avatar
  • 17.1k
8 votes
Accepted

Show/hide all tooltips at once in Leaflet

Simply create a layer group and instead of adding tooltips directly to the map, add them to the layer group. You can then add this layer group to layer control as an overlay. var tooltipLayer = L....
user avatar
  • 17.1k
6 votes

Variable nested inside another variable not displayed properly in popup in Leaflet

You missed innerHTML in else, and you should change + stream to + innerHTML in setContent. Use this: onEachFeature: function (pointFeature, layer) { var stream = pointFeature.properties.Stream; ...
user avatar
6 votes
Accepted

Search possibility to display filtered data with Leaflet.VectorGrid

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 ...
user avatar
  • 17.1k
5 votes
Accepted

Leaflet making ap invisible out of the world's edge

What you want to achieve cannot be done at the map level. You can achieve this at the tile layer level with the noWrap option set to true. For example, for OSM layer this would look something like ...
user avatar
  • 17.1k
5 votes
Accepted

Calculating Leaflet scale ratio for the particular zoom level?

Is there any way we can calculate the scale ratio using L.CRS.scale? Using L.CRS.scale for that kind of calculation is cumbersome and most probably unreliable in the end. The result of L.CRS.scale() ...
user avatar
  • 9,380
4 votes

Implementing PostgreSQL table trigger with GeoServer JDBC user service in Leaflet app

One, never connect GeoServer to PostGIS using the postgres user (or any other superuser) as it is very insecure and leads to the possibility of losing all your data to a malicious user. The user that ...
user avatar
  • 75.1k
4 votes
Accepted

Updating the filter option for GeoJSON layer in Leaflet?

If you look at the Leaflet docs for GeoJSON layer at https://leafletjs.com/reference-1.7.1.html#geojson, you'll notice the following note for filter option: Note: dynamically changing the filter ...
user avatar
  • 17.1k
4 votes

Leaftlet Map with Carto database to recalculate area on polygon edits

I think your identification of refactoring means you are on the right path. If there is a some commonalities between some code, see how you can abstract it enough to make it work with both functions. ...
user avatar
  • 2,650
4 votes
Accepted

Populating all the data from GeoJSON to an HTML div

That's because you set $("graphs").html() to each element in turn, overwriting the previous content. Use $("graphs").append(content);, that should retain the previous content, or ...
user avatar
  • 3,543
4 votes

The WGS Coordinates (lat,long) of the shapefile (ETRS89 UTM 33 N) are swapped?

The context menu to copy coordinates shown is offering to let you copy the coordinates of the point you clicked on the QGIS map. That will always show longitude / latitude (in that order) for ...
user avatar
  • 818
3 votes
Accepted

Splitting polygon with turf.rectangleGrid in vue.js Leaflet map

This is going to be step-by-step answer. turf.squareGrid method will be used for grid creation since turf.rectangleGrid is fairly new and I couldn't find corresponding turf.min.js library. First ...
user avatar
  • 17.1k
3 votes
Accepted

Show shapefile data by Leaflet

Your code seems like a mixture of examples from various sources that of course does not work together. There are several reasons why it does not work: You have ages old //cdnjs.cloudflare.com/ajax/...
user avatar
  • 17.1k
3 votes
Accepted

Leaftletjs animated or static point that looks like wave

I am going to go with an approach based on Leaflet.GLMarkers, adapted from some of its demos with time-dependent symbols. It would involve the following vertex shader: attribute vec2 aCRSCoords; ...
user avatar
  • 9,380
3 votes
Accepted

Leaflet artifact on GeoJSON hexgrid without borders at zoom 10

It seems like some kind of a bug. I didn't go into details why this happens, just found a workaround with modifying style. Instead of stroke weight 0, it gets weight 1. Since polygons overlap, this ...
user avatar
  • 17.1k
3 votes
Accepted

Leaflet WFST - filter layers on the fly

L.WFS is extension of Leaflet L.FeatureGroup and so has no .redraw() method. A look at plugin source revealed .loadFeatures(filter) method that seems to work. And one more thing. Besides zoomend event ...
user avatar
  • 17.1k
3 votes

Leaflet Tilelayer from Mapbox with URL restrictions

I managed to fix this, and in case its useful for anyone else thought I'd offer the solution here! The issue turned out to have nothing to do with Leaflet or Mapbox, but instead to be about Gatsby ...
user avatar
3 votes
Accepted

Having Leaflet search engine look through multiple columns rather than just one column in Attribute Table of QGIS map

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 ...
user avatar
  • 17.1k
3 votes

Styling popup with two separate styles at once in Leaflet

I agree with @Kadir's comment. It's the line: webcam = L.geoJSON(eurocam).addTo(map); Without explicit icon definition this will produce the default point icon (blue pointer) mentioned in the icon ...
user avatar
  • 303
3 votes
Accepted

Connect corners of two rectangles via SVG line in Leaflet

As I wrote in my comment, to draw a line from point to point with s SVG overlay would be rather complicated and unefficient. Besides that, since SVG overlay is a vector layer, line width would change ...
user avatar
  • 17.1k
3 votes

Leaflet Wikipedia layer

the evt.layer.bindPopup((template), {maxWidth: 200, maxHeight: 200}); was replaced with evt.layer.bindPopup(L.Util.template(template, evt.layer.data), {maxWidth: 200, maxHeight: 200}); ...
user avatar
3 votes
Accepted

Remove link to leafletjs.com in attribution control in Leaflet

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. ...
user avatar
  • 17.1k
3 votes
Accepted

Getting coordinates after address has been picked in Leaflet geosearch control?

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 ...
user avatar
  • 17.1k
3 votes
Accepted

Unable to remove marker cluster group completely from the map in Leaflet

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 = ...
user avatar
  • 17.1k
3 votes
Accepted

Move Leaflet.TimeDimension plugin slider with keyboard?

Since Leaflet.TimeDimension plugin has no native keyboard support, you have to catch keyboard events with standard keydown event listener and then use plugin .nextTime and .previousTime methods to ...
user avatar
  • 17.1k
3 votes

Make polygon of GeoJSON layer unclickable after first click in Leaflet

I see (at least) four ways of achieving this, none of them being really clean: The (default) L.SVG vector renderer applies the interactive option only when a vector is added to the renderer. Thus, ...
user avatar
  • 9,380
3 votes
Accepted

Why is ArcGIS Server JavaScript API throwing a CORS error when Leaflet does not, for the same WMS layer?

Let me quote https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#what_requests_use_cors : This cross-origin sharing standard can enable cross-origin HTTP requests for: Invocations of the ...
user avatar
  • 9,380
3 votes
Accepted

Drag Scale on Leaflet?

Yes , it's actually quite simple. Get the container of the scale control with the .getContainer() method and then make it draggable: var controlScale = L.control.scale({'position':'bottomleft', '...
user avatar
  • 17.1k
3 votes
Accepted

Using GeoJSON as input to leaflet.motion plugin in Leaflet

All you have to do is extract line string coordinates from geoJsonData and store them in some array, let's say dataCoords, and flip coordinates while doing that, since Leaflet expects [lat, lng] ...
user avatar
  • 17.1k

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