ghybs
  • Member for 6 years, 2 months
  • Last seen more than 1 year ago
Displaying properties of GeoJSON in popup on Leaflet?
27 votes

The line where you create and bind your popup should have been included in the onEachFeature option of your L.geoJSON factory. var layerGroup = L.geoJSON(data, { onEachFeature: function (feature, ...

View answer
Fly To Location in Leaflet
Accepted answer
15 votes

map.flyTo() is available in Leaflet 1.0. However the parameters are different from those in the example. See http://leafletjs.com/reference-1.0.0.html#map-flyto flyTo(<LatLng> latlng, <...

View answer
Add an event listener on a Marker in Leaflet
Accepted answer
15 votes

Welcome to GIS Stack Exchange! There should be no special difficulty in attaching a callback to marker(s) click event. You would simply use myMarker.on('click', callback) like you did with the map. ...

View answer
Alternative basemaps for leaflet
14 votes

There are plenty of free and/or commercial alternative base maps, aka "Tile Sources / Servers". A very nice live demo is available here, which lists many of the "free" ones: https://leaflet-extras....

View answer
How to enable a Leaflet Draw tool programatically
Accepted answer
11 votes

Simply trigger a "click" event on the "Draw a polygon" toolbar button (it has a specific class "leaflet-draw-draw-polygon"): document.querySelector(".leaflet-draw-draw-polygon").click(); Demo: http:/...

View answer
Why empty tiles when zoomed "too much" in Leaflet.js?
Accepted answer
10 votes

You probably have 2 issues: It is unclear whether you have set the maxZoom option on the map or on the Tile Layer, as pointed out by @malcolm in the question comments. For Leaflet to do the behaviour ...

View answer
Zoom to polygon bounds on click. Leaflet ´, GeoJSON
Accepted answer
10 votes

Probably: markers.on("click", function (event) { // Assuming the clicked feature is a shape, not a point marker. map.fitBounds(event.layer.getBounds()); }); You may want to detect if the ...

View answer
Leaflet Basemap zoom to maximum
Accepted answer
9 votes

The Tile Layer maxZoom option default value is 18. The maximum zoom level up to which this layer will be displayed (inclusive). That is why it is automatically hidden when you zoom past level 18. ...

View answer
How can I prevent Leaflet from moving my marker while zooming into the map?
Accepted answer
8 votes

See Leaflet doc about iconAnchor option: The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical ...

View answer
leaflet - divicon - How to hide the default square shadow?
Accepted answer
7 votes

Using the className option of the DivIcon correctly removes the default leaflet-div-icon class, hence removes the default styling (white square with black border): L.marker([lat, long], { icon: L....

View answer
Leaflet reads GeoJSON [x,y] as [y,x]. How can I correct this?
7 votes

For the record, in case you end up in such situation where you have a lot of GeoJSON data in hand but the lat-lng coordinates order is reversed, a very easy workaround within Leaflet is to use the ...

View answer
Add logo to a map using Leaflet/Mapbox
Accepted answer
7 votes

You can try with L.Control.Credits plugin. A simple, attractive, interactive control to put your logo and link in the corner of your map. You can also easily do it yourself with JavaScript: var ...

View answer
Leaflet marker/icon help
Accepted answer
7 votes

It looks strange that you add both a GeoJSON layer from result.geojson and a marker created from [result.lat, result.lon]. If result.geojson contains the same point information as [result.lat, result....

View answer
How to keep vector layer on top of all layers despite toggling order?
Accepted answer
7 votes

The bringToFront() method changes the order of your layer only at the time it is executed. When the user clicks on the Layers Control, your layerONE and layerTWO are added or removed at a later ...

View answer
Leaflet: How to create toggleable overlays from a single GeoJSON FeatureCollection?
Accepted answer
7 votes

The easiest trick is to create your "master" Layer Group and add all other category Layer Groups into it. You can of course add this master into the overlays list of your Layers Control, so that it is ...

View answer
Adding GeoJSON layer on leaflet?
Accepted answer
6 votes

I suspect that the JavaScript code that you provide is within the index.js file? In that case, you just have to re-order your <script> tags to make sure your loc_infra variable is defined and ...

View answer
Changing GeoJSON feature draw order with Leaflet
Accepted answer
6 votes

You should really use the bringToFront method. In Leaflet, everything is a layer (except controls), even when it is the representation of a GeoJSON feature. In the latter case, we are even talking ...

View answer
How to iterate through the attributes of a feature in Leaflet?
Accepted answer
6 votes

If my understanding is correct, you want to read all properties of the given event layer, without knowing in advance which properties are set and available? In that case, this is a simple JavaScript ...

View answer
Adding custom icons to L.markerClusterGroup?
Accepted answer
5 votes

Welcome to GIS SE! As explained in the Leaflet.markercluster plugin home page, the key is to use the iconCreateFunction option of your L.markerClusterGroup() factory. In the case of the demo you ...

View answer
Leaflet JS not displaying map properly
Accepted answer
5 votes

Your Tile Map service uses a zoom offset of 1, i.e. the entire world fits in 4 tiles when {z} value is 2 (unfortunately your service does not provide the tile at zoom 1 where the entire world would ...

View answer
Changing data and style with <select> in Leaflet popup
Accepted answer
5 votes

From the code you provide in your JSFiddle: function onEachFeature(feature, layer) { var popup = '<select name="select" onchange="restyleLayer(this.value)">' popup += '<option value="...

View answer
Geocoding single address with Leaflet?
Accepted answer
5 votes

As per the Leaflet Control Geocoder plugin API documentation, you should: Attach an event on the "markgeocode" event of the L.Control.geocoder object. Read the event.geocode.center LatLng object that ...

View answer
How to set dashed line on Leaflet?
Accepted answer
5 votes

Have you noticed the dashArray option for your vector layers? Forked Plunker: http://plnkr.co/edit/KyHOkjytDJf1QjCO0Nyh?p=preview As for the "Train line style", that would depend on what you mean, ...

View answer
Projections leaflet and OSM
Accepted answer
5 votes

You should not have to do any particular conversion on your OSM data or Leaflet returned coordinates. There is a high confusion on this subject, but I think it comes down to a simple explanation: ...

View answer
leaflet GeoJson vs polyline
Accepted answer
5 votes

The L.GeoJSON layer group is just a Feature Group with extra methods specific for vector layers. It provides a convenient conversion from a GeoJSON data object into a layer group made of Leaflet ...

View answer
Leaflet: How to style my polygons in a GeoJSON layer?
Accepted answer
5 votes

As said in the question comments, unfortunately you cannot use feature.properties as is in your switch statement, because it is an object. You have to provide before hand a way for the user to ...

View answer
How to get attribute of the leaflet marker?
Accepted answer
5 votes

If you still have the reference to your marker, simply use marker.options to access the options object assigned to it. In your case: marker.options.draggable.

View answer
leaflet Uncaught TypeError: Cannot read property 'addLayer' of undefined
Accepted answer
4 votes

Either use new with the class (UPPER case first letter): map = new L.Map('mapid'); var mondayLayer = new L.GeoJSON() OR use the factory (lower case first letter): map = L.map('mapid'); var ...

View answer
image as a background map in leaflet
4 votes

If the image is not too big, you can avoid the tiling step by simply using an L.imageOverlay: Used to load and display a single image over specific bounds of the map. Usage example: var imageUrl =...

View answer
Control custom panes for Leaflet Geojson SVG icons
Accepted answer
4 votes

You just need to specify the pane as an option of your markers (i.e. any individual layer). L.geoJSON(dots400, { pointToLayer: function(feature, latlng) { return L.marker(latlng, { pane: '...

View answer
1
2 3 4 5 6