python-visualization / folium

Python Data. Leaflet.js Maps.
https://python-visualization.github.io/folium/
MIT License
6.89k stars 2.22k forks source link

Detected location of user function #1098

Closed bmaillou closed 4 years ago

bmaillou commented 5 years ago

Please add a code sample or a nbviewer link, copy-pastable if possible

# Your code here

Problem description

I recently used folium and wanted to locate myself as I will be walking around and looking at the map. I noticed folium didn't have this but leaflet does. In my first try I was able to open the html file that folium makes and paste in the locate code and it worked! I am new to developing but I was wondering if it is possible to add a locate function to folium to make this a native option. thanks!

Expected Output

Output of folium.__version__

Conengmo commented 5 years ago

Hi @bmaillou, can you share the locate function you used?

bmaillou commented 5 years ago

I used this website to figure it out. https://leafletjs.com/examples/mobile/ Then in the html just below var map I pasted the text below in and made sure the map id/number matched. If you want to know more here is a description I wrote for myself on my website. Let me know if this helps.

 function onLocationFound(e) {
 var radius = e.accuracy / 2;

 L.marker(e.latlng).addTo(map_3235937e444244df8e4a6b6f3b41e4cc);

 }
 function onLocationError(e) {
 alert(e.message);
 }

 map_3235937e444244df8e4a6b6f3b41e4cc.on('locationerror', onLocationError);

 map_3235937e444244df8e4a6b6f3b41e4cc.on('locationfound', onLocationFound);
Conengmo commented 5 years ago

Thanks for sharing, I see what you want to do. Indeed this functionality is not in folium right now. Could be interesting to add, but I'm not sure if folium users need this, and if so what would be a good way to implement it. If someone wants to take a crack at it that's welcome. But note that I would suggest not to add more arguments to the Map initializing method, it's already too crowded.

hocuspas commented 5 years ago

In leaflet there is a locate control: https://github.com/domoritz/leaflet-locatecontrol This can be added to folium.plugins and gives great functionality, it adds a button to your map to switch on/off your location; when on, and when you walk around the location is updated, similar to this: https://github.com/domoritz/leaflet-locatecontrol/blob/c6f48c312dfaa3f1b352997446b3a07c8d7ea0e6/screenshot.png I tested by manually adding code to html and this works fine. Also a first attempt by adding a basic plugin seems also to work fine. Would be great if this can be included in folium!

fullonic commented 5 years ago

Hey @bmaillou, I needed this feature for a app and made a small plugin based on leaflet.locate. I don't have the locate control because it was not necessary for my map, however if it's a must I could take a look in that. Also it doesn't update when the user moves... The goal was only make it easier to the user check what is around without the need of manually search for his/her current location. Also there is no custom options functionality but could be added to have the same functionality provided by leaflet. https://leafletjs.com/reference-1.4.0.html#locate-options

I wrote some comments add examples to make it public, but could be improved.... check my repo here

To provide a way to make possible customize the default icon using folium.Icon() I had to do a hack that I think can be avoided. After reading some parts of folium code and some tests I saw that the way folium adds a custom Icon or adds a popup to a marker is by appending them to the parent template (Marker). However, this doesn't work for locate because the custom Icon or Popup needs to be inside the onLocationFound(e) in order to set the changes. @Conengmo there is any way to inject the children template inside a specific part of the parent template? Like using {% include ... %}

fullonic commented 5 years ago

@hocuspas, I took a look on leaflet locate control and made a folium LocateControl plugin that works as expected. Please see it here: https://github.com/fullonic/folium/tree/locate_control

bmaillou commented 5 years ago

This is fantastic. I am new to all of this so I will install your version and give it a shot. Thanks!

On Wed, Apr 3, 2019 at 5:53 AM fullonic notifications@github.com wrote:

@hocuspas https://github.com/hocuspas, I took a look on leaflet locate control and made a folium LocateControl plugin that works as expected. Please see it here: https://github.com/fullonic/folium/tree/locate_control

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/python-visualization/folium/issues/1098#issuecomment-479421013, or mute the thread https://github.com/notifications/unsubscribe-auth/AIkxG5YX-eEQO3dO6jCX_td61X_k6gSqks5vdHoIgaJpZM4b3B8_ .

hocuspas commented 5 years ago

@fullonic, thanks, great work! this is exactly what I meant. I hope this will be released in the next version of folium.

fullonic commented 5 years ago

Thanks for your feedback. I just did a PR that is now under revision, you may follow it here #1116. Thanks again!

bmaillou commented 5 years ago

I used it and it worked. it is beautiful. Here is the map I made and I tried it on my iphone. https://bmaillou.github.io/NYCTreeMap/ The one weird thing I have found is that different box sizes changed when I used it. Thank you for all the help on this!

On Wed, Apr 3, 2019 at 4:43 PM hocuspas notifications@github.com wrote:

@fullonic https://github.com/fullonic, thanks, great work! this is exactly what I meant. I hope this will be released in the next version of folium.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/python-visualization/folium/issues/1098#issuecomment-479651046, or mute the thread https://github.com/notifications/unsubscribe-auth/AIkxG8PG0xpQpj6_XvKmaW0m61VORMM0ks5vdRJYgaJpZM4b3B8_ .

fullonic commented 5 years ago

Hey @bmaillou , great to see it on practice.

The one weird thing I have found is that different box sizes changed when I used it.

What do you mean? What boxes do you speak about?

Conengmo commented 4 years ago

Since this feature got merged I'm closing the issue.

Freddie999 commented 3 years ago

Hello, I was wondering if there is a way to get the user's coordinates and pass into another function. Also, is the way to update this when the user moves?