Leaflet Providing invalid Lng/Lat coordinates when location duplicates on display - javascript

Question
Is the lng/lat provided by leaflet not a GPS coordinate? Do I have a way to convert it into GPS coordinates or is this a bug in leaflet?
Steps to reproduce
Setup a map that repeats. Click on the repeating section, the click event will return diffent and often invalid coordinates.
Expected behavior
The correct (repeated) coordinate would be provided for each GPS location, regardless if it repeats on the display.
Code to show error
Simply bind a click event
L.map(name, {fullscreenControl: true}).fitWorld().zoomIn().on("click", selectorConfirm);
function selectorConfirm = function(e) {
console.log('selected:'+e.latlng.lat+','+e.latlng.lng);
}
Minimal example reproducing the issue
https://www.hikerock.com/rock/210/
Click on map -> the console log will output what the gps coordinates are provided by leaflet.
The code is super simple, if you need to access it :
https://www.hikerock.com/plugin/map/js/map.min.js?cache=6x3cWuxp
function map() => inits leaflet
map.prototype.selectorConfirm () -> is what is collects the event, is doing the console.logging

Looks like this is how Leaflet is designed :
https://github.com/Leaflet/Leaflet/issues/1885
It can be addressed by using :
e.latlng.wrap();
e.latlng.wrap().lat;

Related

Issues displaying OpenWeatherMap with leaflet

I am practicing on a simple weather app using OWM. I am fetching the coordinates and pass them to a function to display a map using leaflet.
Here is my code
function drawMap(lat,lon){
const mymap = L.map('map').setView([lat, lon],3);
L.tileLayer(`https://tile.openweathermap.org/map/temp_new/3/1/1.png?appid=${apiKey}`).addTo(mymap);
}
My issues are :
-Zoom level is required by leaflet but it's also in the openweather URL so i don't know if i need to put the same or not
-in the url, i'm supposed to put x and y tile coordinates , I don't really understand the required X and Y values and the OWM API doc doesn't really elaborate on those.
Right now , using the values 3/6/1 for example, i get
The zoom is just the same tiles over and over and you can't make out anything so obviously I'm doing something wrong
Thanks
I don't really understand what you are describing but normaly you would set template strings in the Tile-Url that can are replaced by leaflet:
L.tileLayer(`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${apiKey}`).addTo(mymap);

How Can I return a specific attribute using MarkerClusterGroup in Leaflet?

In leaflet there is a an extension called : Leaflet.markercluster
In this extension, there is a function called markerClusterGroup that clusters and returns the count of multiple Markers (points).
see example : Here.
In my example I'm doing the same thing for my polygons centroids, that I calculated using turf. Each of my polygon has an attribute "Inhabitants" which represents the total inhabitants in the polygon. (this looks like the example i'm working on)
The method markerClusterGroup returns the count of centroids in my example. Can I modify the method to modify the returned value into an aggregation of inhabitants ? If no, is there any library you know of capable of aggregating polygons on a specific attribute ?
Have a look at the "Customising the clustered markers" section of the plugin Readme page.
It shows how the default cluster icon is generated. From there you can modify it to sum your child centroid markers property instead of just the count of child markers.

Leaflet geosearch: return lat/lng from address found event

I use great Leaflet plugins for geocoding such as https://github.com/smeijer/L.GeoSearch
While these are perfect for showing address locations on the map when found, I would also like to be able to use the coordinates from the result to other functions that I have included in my map (e.g. I've written one which finds nearby points from a data layer based on the locationfound event fired from Leaflet's inbuilt locate function).
I know the answer (probably) lies in accessing the events from the geosearch plugin, but that's a bit beyond my skills at the moment. Any help would be very welcome.
The L.GeoSearch plugin fires it's events on your map instance. You'll need to listen for the geosearch_foundlocations event. The object that's returned when the event is fired holds a Locations property which contains an array with L.GeoSearch.Result objects. Each object has four properties; Label, X, Y and bounds
Example in code:
map.on('geosearch/showlocation', function (e) {
e.Locations.forEach(function (Location) {
// Location.Label = full address
// Location.X = longitude
// Location.Y = latitude
// Location.bounds = boundaries
});
});

Google Maps receive polygon coordinates

I use this example to draw polygon on google maps :
http://nettique.free.fr/gmap/toolbar.html
After drawing a polygon, I would like to read coordinates of polygon created by me. So, in file mapToolbar.js (which is part of above example from nettique.free.fr) in javascript function called stopediting (is run when I click on 'hand' button).
So, my solution to read those coordinates is somekind of loop which I read coordinates :
MapToolbar.features.shapeTab.shape_1.latLngs.b[0].b[i].ib - latitude
MapToolbar.features.shapeTab.shape_1.latLngs.b[0].b[i].jb - longitude
It works quite well, but my problem is that from time to time the suffix ib and jb change to for instance Ya and Za. I hope that you know what it means. I must change my code ;/ but i do not want to! ;)
Do you know how to fix this issue ?
MapToolbar.features.shapeTab.shape_1 is a google.maps.Polygon-instance.
Use getPath() to retrieve the path and the method forEach to loop over the path:
MapToolbar.features.shapeTab.shape_1.getPath().forEach(function(latLng,index){
console.log('shape_1',index,latLng.toString());
});

Leaflet.js - Fit geoJSON co-ordinates on map view

I have a leaflet.js map that has points and linestrings on it that come from an external JSON file.
If I add:
map.setView(new L.LatLng(0,0), 10);
It will centre the map on the latitude and longitude 0,0. How can I set it so the map centre and zoom fit all of the points from the JSON on it?
You could add all of your layers to a FeatureGroup which has a getBounds method. So you should be able to just say myMap.fitBounds(myFeatureGroup.getBounds());
The getBounds method for L.FeatureGroup is only available in the master branch (not the latest version, 0.3.1), for now at least.
Similar case with me. I drawn all the markers from GeoJson data. So I written the function, which gets called repeatedly on button click. Just try if it suits your requirements.
function bestFitZoom()
{
// declaring the group variable
var group = new L.featureGroup;
// map._layers gives all the layers of the map including main container
// so looping in all those layers filtering those having feature
$.each(map._layers, function(ml){
// here we can be more specific to feature for point, line etc.
if(map._layers[].feature)
{
group.addLayer(this)
}
})
map.fitBounds(group.getBounds());
}
The best use of writing this function is that even state of map/markers changed, it will get latest/current state of markers/layers. Whenever this method gets called all the layers will be visible to modest zoom level.
I needed to do this when showing a user directions from his origin to a destination. I store my list of directions in an array of L.LatLng called directionLatLngs then you can simply call
map.fitBounds(directionLatLngs);
This works because map.fitBounds takes a L.LatLngBounds object which is just an array of L.LatLng
http://leafletjs.com/reference.html#latlngbounds

Categories