Questions tagged [leaflet]

An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Filter by
Sorted by
Tagged with
0
votes
2answers
96 views

Integrate JSON file inputs (specifically latlng) in Leaflet with JS

It's my first time using Leaflet and I wanted to simply put two markers based from my inputs. I managed to connect my JSON file with the JavaScript and the only problem I have is how to dynamically ...
0
votes
1answer
15 views

Connect GeoServer WMS data to Leaflet.js

I have WMS Layer in GeoServer, I've made it following the walk through tutorial in https://www.e-education.psu.edu/geog585/node/701 I'm confused on how to connect my WMS to leaflet.js.
1
vote
1answer
352 views

Leaflet search and popup at other position

In leaflet I want the popup on another position then the standard. So I created a div in which the popup-information is opens. countryLayer = L.geoJson(countryLayer, { onEachFeature: ...
0
votes
1answer
493 views

Creating layers depending on a property?

I have a .js file with coordinates for internships: var internships = [{ "features": [ {"type":"Feature","properties":{"category":"entretient","Name":"green"},"geometry":{"type":"Point","...
0
votes
1answer
40 views

Handling popups with overlapping layers in Leaflet

I have two polygon layers (polygons) that overlap. I've created a leaflet map using qgis2web. The issues is that, if I click on the overlapping area, the popup only shows information for the topmost ...
1
vote
1answer
690 views

L.control.layers: Uncaught TypeError: Cannot read property 'minZoom' of undefined

I am trying to add my geojson urls which I loaded from my gist as L.LayerGroup for L.control.layers but I have encountered error "Uncaught TypeError: Cannot read property 'minZoom' of undefined" on L....
1
vote
2answers
190 views

Leaflet: Change displayed column on click

I have a GeoJSON layer in a Leaflet map showing buildings. The columns of the buildings layer contain electricity usage info by date (eg., the column 12052015 contains electricity usage on Dec 5, 2015)...
1
vote
1answer
14 views

Passing multiple arguments to callback function in Leaflet layer method bindTooltip()

I have a few GeoJSON layers on a Leaflet map that I am using the bindTooltip method on. Specifically, I am trying to use a function as the argument to bindTooltip so that I can produce some custom ...
0
votes
0answers
21 views

Leaflet: Unable to filter GeoJSON beyond the `properties` element level

I have the following code which displays a Layer in my Leaflet map from some remote GeoJSON: // Create Layer: Airspace var featuresUTMAirspace= L.geoJson(dataGuardianUTM, { filter: FuncAirspace, ...
0
votes
1answer
468 views

Icon inside Leaflet control layer does not display?

I created a leaflet control layer to switch between two base maps (Bing and OpenCycleMap), Yet I don't see the icon inside the layer control: var baseMaps = { "Bing": bingLayer, ...
1
vote
0answers
36 views

Visualizing street shape data for London?

I am trying to visualise some street-level data I got, but since I'm very new to GIS I don't know the correct terminology to Google. My data looks like this: Street, Incident Count Congo Road, 12 ...
0
votes
1answer
12 views

Linked popup image in GeoJSON file

Developing the issue solved in this post: Trying to pop up image in GeoJSON file? I would like to have each GeoJSON image thumbnail possible to open in larger window. I was trying to connect with ...
1
vote
1answer
29 views

Trying to pop up image in GeoJSON file?

I am trying to put an image inside the geoJSON file. I know, that Geojson works as string and I cannot input the image directly, however I found some stuff, like this below: http://www....
1
vote
1answer
126 views

Making one marker adjustable at a time

This screenshot is an example of what I have to do : This picture was taken on a different and older version of what I have now, since all of the present images were NOT markers bound to the map ...
1
vote
0answers
20 views

Display .kml file in Leaflet

I would like to show my .kml file in my leaflet map.~ There is a plugin: https://github.com/windycom/leaflet-kml whixh unfortunately doesn't work. It show only a blank map in the coordinates provided....
2
votes
1answer
39 views

How to write hyperlinks to local files in GeoJSON properties?

I am wondering how to make a hyperlink from GeoJSON file properties to the local drive file. I found two options here: Clickable hyperlink from GeoJSON field in feature this option refers to a whole ....
1
vote
1answer
21 views

Binding multiple Leaflet image overlays as one

I am planning to put at least ten single image overlays, spread across the country. I have got two so far: var priorycourt = 'Priory_court.PNG', imageBounds = [[52.399892, -1.531154], [52.400837, -1....
2
votes
1answer
64 views

Adding dialog plugin QGIS2Web

I am kind of a beginner. I have exported my webmap using QGIS2Web and while playing with it, I was able to change the settings of the items already present on the map (for example position, language, ...
1
vote
2answers
808 views

Coloring circleMarkers based on category in Leaflet?

My question is, how can I get Leaflet to color each of circleMarkers I am generating/points with a different color, based off the type property of the point? I've done a bit of research, but all I've ...
0
votes
1answer
645 views

Trying to get WMTS layer in Leaflet, but get error 400 (out of range)

I'm trying to use https://github.com/mylen/leaflet.TileLayer.WMTS to get a wmts layer into my leaflet map, but the error 400 is generated and when I look at the tile it says out of range. While ...
1
vote
1answer
26 views

Resizing Leaflet CircleMarkers after zoom level changes?

I am trying to find a way to have my CircleMarkers resize themselves after zooming in or out so that they scale properly with the map. So far, I have tried firing map.InvalidateSize() on the zoomend ...
0
votes
1answer
45 views

Leaflet - how to add time dimension image layers

Javascript beginner here. I'm working on getting a weather animation done in leaflet. A suitable plugin appears to be leaflet.timedimension but I would be open for other options too. I have 60 PNG ...
0
votes
1answer
19 views

Checking if a specific leaflet.draw control is enabled?

Where exactly are the leaflet controls stored that are added to the map? So at anytime in the app, I can check something like if(controls.polyline.enabled==true) My guess is its somewhere in the map....
0
votes
2answers
33 views

Leaflet GeoJSON map legend

I am struggling with creation of the map legend adequate to my GeoJSON stylization. The code looks like below: var geojsonMarkerOptions = { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, ...
1
vote
1answer
18 views

Iterating through sub-element `sections` of GeoJSON on a Leaflet map?

I have the following code which I use to display a marker on my map with a popup containing the feature.properties.name element from my GeoJSON: var featuresUTMGroundHazards = L.geoJson(...
0
votes
1answer
18 views

Custom functions for SAVE and CANCEL on Leaflet.draw edit control

I have added an edit control on my map which is working fine (On the Frontend); var editControls = new L.Control.Draw({ draw: false, edit: { featureGroup: this.updateGeomLyr ...
0
votes
1answer
403 views

input data coordinates to database from input data inside leaflet js

i have a problem with my update data coordinates form leaflet popup. i just want to make edit form inside leaflet popup. if i click marker in a map it shown coordinate with input form, if the building ...
0
votes
2answers
149 views

Converge origins on destination leaflet geodesic

I am using Tabletop.js to map locations on a leaflet map. With each row I add the lat lng to a feature group and then to the map. What I would also like to do is use leaflet geodesic to draw a line ...
1
vote
3answers
1k views

Using Leaflet, PostGIS and pgRouting for web mapping?

I am newbie at Open Source GIS. I have already create a web mapping using custom tiles and leaflet. I have used my my own database. Tilemill was used to create the tiles and leaflet was used to ...
0
votes
1answer
56 views

Text in layer toggler in Leaflet is really faint - why?

I have added a layer toggler using Leaflet and geojson but the text of layer names is too light to see in the toggler - how do I style the text in a darker colour? It's on a wordpress site, if that ...
1
vote
0answers
369 views

Using Leaflet Marker Dragend? [closed]

I am having a problem with leaflet markers. The problem is that when I drag a marker with a lower z-index under another marker with a higher z-index and let it go, it makes another marker. I have a ...
3
votes
1answer
386 views

Basic Authentication in Leaflet

I'm using Leaflet to display map tiles. The map tiles are loaded from a different site using basic authentication. So the url template looks like this: L.tileLayer('https://username:password@example....
1
vote
1answer
56 views

Choosing correct zoom level to display given area in square km using Leaflet?

I would like to set the zoom on a Leaflet map based on an area (in km^2). I am looking for a simple function that would approximately convert an area of 510,064,472 km to zoom level 0 and (if I read ...
4
votes
1answer
2k views

Changing point icon (geoJSON) on click and changing back when clicking another point using Leaflet?

I have a geoJSON (10 points) that is drawn using an icon. I want to change the icon when I click on one of the points and then I want to change it back when clicking another point. I don't know how to ...
3
votes
1answer
45 views

Leaflet mouse move to get coordinate

I hope to be able to display the coordinates on the map when the mouse moves, not to use marker. But my code can't run successfully. This is my code: <html lang="en-US" xmlns="http://www.w3.org/...
0
votes
0answers
30 views

Leaflet control window is not a function

I trying to add a leaflet control window to my map, but i get an error in the console of browser. The error is in console is: Uncaught ReferenceError: L is not defined at L.Control.Window.js:1 ...
6
votes
1answer
4k views

Make WMS layer background transparent in Leaflet

I have inserted the following layer from a GeoServer WMS in the following Leaflet map : var nexrad = new L.TileLayer.WMS("URL", { layers: 'Wrecks:WrecksGreaterNorthSea', format: 'image/png', ...
0
votes
0answers
25 views

Leaflet GeoJSON legend with custom icons

I have been developed a legend, details are here: Leaflet GeoJSON map legend Now I am wondering how to take into account my custom icons, set for GeoJSON file. var myIcon = L.icon({ iconUrl: '...
1
vote
1answer
521 views

Leaflet-Search plugin error

I try to connect Leaflet search plugin to my map with GeoJSON data. But i get error( When I enter a search query in browser inspector i get error: layer.getBounds is not a function in leaflet-search....
3
votes
1answer
6k views

KML support in Leaflet

I know that GeoJSON is supported in Leaflet but how about KML? Is there any plugin for reading KML data in Leaflet?
0
votes
0answers
29 views

Adding JSON layer in Leaflet just like GeoJSON data? [duplicate]

I am trying to add different layers to a leaflet map. Now i really want these layers in order to add features like zoom. With GeoJSON file this was easy but I am not getting a good way to plot array ...
1
vote
1answer
51 views

Leaflet Foreach point in GeoJSON check Distanceto

So I was wondering how I can get the points from the GeoJSON located here. and then for each of them separately check if the distance of Markers is within 5 meters range of these. I have tried but ...
1
vote
1answer
26 views

Leaflet load JSON data

Does my code have problem? Because if I run in Visual Studio, it doesn't show error, but the file didn't load on my map. I put the JSON file and HTML on my desktop. This is my code : ...
1
vote
0answers
19 views

Display route and the two markers in Leaflet routing Machine?

How do I make the route and the two markers appear in Leaflet routing Machine? Here is my code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> ...
2
votes
2answers
908 views

Snap polygon to grid (lat/lon)

I'm trying to code this in Leaflet, but the key is finding the formula to do this. Give a polygon (filled in the image), how can I expand it to fit a grid (lat/lon, outer line in image) ? This is ...
1
vote
3answers
2k views

Which style options are available for polylines in Leaflet?

I added a polyline layer as GeoJSON within Leaflet and want to style it. The following options to set the style I could find (and which work) are: color weight opacity What are other available ...
1
vote
1answer
39 views

Change Ordering of features within one layer in leaflet

My Question is exactly the same as mentioned in this Question The main difference is that I can't use bringToFront() because I have points inside the highlighted polygon that I want to show a tooltip ...
0
votes
1answer
2k views

How to make the value showing on a leaflet heatmap like this one?

I'm attempting to use leaftlet.js, and heatmap.js (github.com/pa7/heatmap.js/) following this example: But I want to show the value on the heat map like this crime page (with two options on: "Crime ...
2
votes
1answer
2k views

Leaflet popup options with GeoJSON data

In the following how would I customize the popup options? I want to add in the option for the keepInView to be true. var myLayer = L.geoJson(polygon, { onEachFeature: yourOnEachFeatureFunction })....
3
votes
1answer
3k views

Load a raster file directly in leaflet

Is it possible to load a raster file (e.g. geotiff or erdas img) directly into a Leaflet map? If so, can you guide me to the correct documentation or method to do this? I am trying to do this with the ...