0

I created a customized marker for leaflet locate control and inserted it with this code

      /*button to turn on GPS*/
      //function from leaflet locate control (plugin)
      L.Control.locategpsmarker = L.Control.Locate.extend({
          
          _drawMarker: function () {

              var icongpsMarker = {
                  iconUrl: 'img2/gps_marker.png',
                  iconAnchor: [18, 18]};

              var startMarker = L.marker(e.latlng, { icon: L.icon(icongpsMarker) });
              startMarker.addTo(mymap);
          }     

      });

      /*add geolocation button to map*/
      var lc = new L.Control.locategpsmarker({
          initialZoomLevel: 13,
          locateOptions: { enableHighAccuracy: true }, 
          position: 'topright',
          drawCircle: false,
          showPopup: false,
      });
      mymap.addControl(lc);
      /*END GEOLOCATION BUTTON*/

and got this error for the customized marker

Uncaught ReferenceError: e is not defined
    at i._drawMarker (main.html:119:44)
    at i._onLocationFound (L.Control.Locate.js:772:12)
    at i.fire (Events.js:190:11)
    at i._handleGeolocationResponse (Map.js:729:8)
_drawMarker @ main.html:119
_onLocationFound @ L.Control.Locate.js:772
fire @ Events.js:190
_handleGeolocationResponse @ Map.js:729

Has anybody already put a customized marker to this plugin?

Improve this question

1 Answer 1

Reset to default
1

The plugin leaflet locate control uses a locationfound event on method onLocationFound to retrieve the fired location when geolocation went successfully.

So If you check onLocationFound, the event data is stored in this._event and the latlng info in this._event.latlng.

You have to use this._event.latLng defining the custom marker:

 var startMarker = L.marker(this._event.latlng, {
      icon: L.icon(icongpsMarker),
 });
 startMarker.addTo(map);

But this is no the recommended way to achieve that. It is better to setup the options markerClass and markerStyle to customize the icon:

var icongpsMarker = {
  iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
  iconAnchor: [18, 18],
};

/*button to turn on GPS*/
//function from leaflet locate control (plugin)
L.Control.locategpsmarker = L.Control.Locate.extend({});

/*add geolocation button to map*/
var lc = new L.Control.locategpsmarker({
  initialZoomLevel: 13,
  locateOptions: { enableHighAccuracy: true },
  position: 'topright',
  drawCircle: false,
  showPopup: false,
  markerClass: L.marker,
  markerStyle: {
    icon: L.icon(icongpsMarker),
  },
});
map.addControl(lc);

I've prepared a complete demo: https://stackblitz.com/edit/js-t6dnt8?file=index.js

Improve this answer
2
  • 1
    I need a bit more help. the marker will not disappear if I switch off the button. which function needs to be edited? i add in the same place as _drawmarker this function ``` stop: function () { this._deactivate(); this._cleanClasses(); this._resetVariables(); this._removeMarker(); if (mymap.hasLayer(gpsMarker)) { mymap.removeLayer(gpsMarker); gpsMarker = undefined; }``` but there is error >>> unexpected identifier "stop"
    – astaga
    Commented Sep 29, 2023 at 14:41
  • 1
    I've edite the response and the stackblitz demo. The optimal way to customize the icon and the solution to your problem is use the options markerClass and markerStyle of the plugin.
    – Antonio Vida
    Commented Oct 3, 2023 at 7:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.