3

I'm trying to add a button above my map that would show the current location of the user.

Basically i want to duplicate the functionality of the built in button but make a more obvious one.

Here's my code:

<script>
  var map = L.mapbox.map('map', 'plisvb.hopljoko');
  L.control.locate({
    drawCircle: true, // controls whether a circle is drawn that shows the uncertainty about the location
    setView: true, // automatically sets the map view to the user's location, enabled if `follow` is true
    keepCurrentZoomLevel: false, // keep the current map zoom level when displaying the user's location. (if `false`, use maxZoom)
    icon: 'icon-location', // `icon-locate` or `icon-direction`
    iconLoading: 'icon-spinner  animate-spin', // class for loading icon
    circlePadding: [0, 0], // padding around accuracy circle, value is passed to setBounds
    locateOptions: {
      maxZoom: 15
    },
    strings: {
      title: "Click to see your current location", // title of the locate control
      popup: "Your current location", // text to appear if user clicks on circle
      outsideMapBoundsMsg: "You seem located outside the boundaries of the map" // default message for onLocationOutsideMapBounds
    }
  }).addTo(map);
  map.scrollWheelZoom.disable();
</script>

any ideas?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
user127181
  • 735
  • 3
  • 11
  • 32

2 Answers2

5

The question was posted a year ago but if people are still looking for an answer I found the following: http://codepen.io/leemark/pen/vcbuf

$('.pure-button').on('click', function(){
mymap.locate({setView: true, maxZoom: 15});
});

In the example provided this is the call on the click event of the button. You can either use their button or create a different looking one.

I'm not sure if it is exactly what I want and not sure if I will implement it. However it seem to answer the original post.

user1527152
  • 946
  • 1
  • 13
  • 37
0

I'd recommend browsing over to the leaflet-locate repository and reading the documentation, that covers the .locate() method that you can trigger yourself, like $('a.somelink').click(function() { locateControl.locate(); });

tmcw
  • 11,536
  • 3
  • 36
  • 45
  • This is not the leaflet repository but a plugin made by other people. – user1527152 Sep 22 '15 at 14:36
  • Yes, that's what I linked. You're using the leaflet-locate plugin, and I linked to the repository for the leaflet-locate plugin. – tmcw Sep 22 '15 at 16:02
  • This won't show the circle representing the current location on the map. – fooquency Sep 10 '19 at 19:27
  • Looks like there is not yet proper support for plugging this into a custom button: https://github.com/domoritz/leaflet-locatecontrol/issues/205 – fooquency Sep 10 '19 at 19:29