plug-in leaflet-locatecontrol

90 views
Skip to first unread message

Emanuele Paccamiccio

unread,
Oct 4, 2022, 3:01:43 PM10/4/22
to Leaflet
I am trying to use this plugin but cannot implement marker customization with "markerClass". Anyone know an example of how to use the "LocationMarker" class.
Thk

Mark Lawton

unread,
Oct 4, 2022, 3:46:11 PM10/4/22
to leafl...@googlegroups.com
check out my site and see if there is anything there looks like what you want.  if so, i might be able to help





On Oct 4, 2022, at 9:01 PM, Emanuele Paccamiccio <emanuele.p...@gmail.com> wrote:

I am trying to use this plugin but cannot implement marker customization with "markerClass". Anyone know an example of how to use the "LocationMarker" class.
Thk

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/48ebad8a-bdba-4523-8d0f-351412cb4d3fn%40googlegroups.com.

Emanuele Paccamiccio

unread,
Oct 4, 2022, 5:41:05 PM10/4/22
to Leaflet
Nice webapp!
I try to use this plug-in:

is a leaflet plug-in useful for user geolocalization

but i don't understand how tu apply it for change the marker.

If have any idea please let me know.
Thanks!

Mark Lawton

unread,
Oct 5, 2022, 3:21:19 AM10/5/22
to leafl...@googlegroups.com
I don’t completely understand the issue.  You should be able to just set the latitude and longitude coordinates of the marker.  

Sent from my iPhone

On Oct 4, 2022, at 11:41 PM, Emanuele Paccamiccio <emanuele.p...@gmail.com> wrote:



Edwin Corrigan

unread,
Oct 6, 2022, 8:56:53 AM10/6/22
to leafl...@googlegroups.com
Hi Emanuele,

If I understand correctly, I think you want to know how to create and use a custom class for the markerClass option on the leaflet-locatecontrol plugin instead of the default LocationMarker class? 

If so, the default marker class is below. I copied it from the repository you are using and changed the color from blue to black and commented what I changed:
var MyCustomMarker = L.Marker.extend({
initialize(latlng, options) {
L.Util.setOptions(this, options);
this._latlng = latlng;
this.createIcon();
},

/**
* Create a styled circle location marker
*/
createIcon() {
console.log('creating icon');
const opt = this.options;

let style = '';

if (opt.color !== undefined) {
style += `stroke:#000;`; // I changed this
}
if (opt.weight !== undefined) {
style += `stroke-width:${opt.weight};`;
}
if (opt.fillColor !== undefined) {
style += `fill:#000};`; // I changed this too
}
if (opt.fillOpacity !== undefined) {
style += `fill-opacity:${opt.fillOpacity};`;
}
if (opt.opacity !== undefined) {
style += `opacity:${opt.opacity};`;
}

const icon = this._getIconSVG(opt, style);

this._locationIcon = L.divIcon({
className: icon.className,
html: icon.svg,
iconSize: [icon.w,icon.h],
});

this.setIcon(this._locationIcon);
},

/**
* Return the raw svg for the shape
*
* Split so can be easily overridden
*/
_getIconSVG(options, style) {
const r = options.radius;
const w = options.weight;
const s = r + w;
const s2 = s * 2;
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${s2}" height="${s2}" version="1.1" viewBox="-${s} -${s} ${s2} ${s2}">` +
'<circle r="'+r+'" style="'+style+'" />' +
'</svg>';
return {
className: 'leaflet-control-locate-location',
svg,
w: s2,
h: s2
};
},

setStyle(style) {
L.Util.setOptions(this, style);
this.createIcon();
}
});

Then you can set the markerClass option for your plugin to the MyCustomMarker class from above by doing the below:
lc = L.control.locate({
strings: {
title: "Show me where I am, yo!"
},
markerClass: MyCustomMarker // setting custom marker class
}).addTo(map);



Emanuele Paccamiccio

unread,
Oct 6, 2022, 9:48:41 AM10/6/22
to leafl...@googlegroups.com
I Edwin
Thanks for your reply!
Yes, You understood correctly.
And if i want to change the icon with a png or svg?
Regards
Emanuele




Edwin Corrigan

unread,
Oct 6, 2022, 10:09:07 AM10/6/22
to leafl...@googlegroups.com
Here are some instructions on how to use your own png for a leaflet marker - https://leafletjs.com/examples/custom-icons/

Best Regards, 

Edwin


Edwin Corrigan 


Emanuele Paccamiccio

unread,
Oct 8, 2022, 6:06:06 PM10/8/22
to leafl...@googlegroups.com
Ok, I will try to explain myself.

I use this code

var locateControl = L.control.locate({
  position: "bottomright",
  markerClass:mymarkerLocation,
  drawCircle: true,
  drawMarker: true,
  follow: true,
  setView: true,
  keepCurrentZoomLevel: false,
  markerStyle: {
    className: 'leaflet-control-locate-marker',
    color: '#fff',
    fillColor: '#2A93EE',
    fillOpacity: 0.5,
    weight: 3,
    opacity: 1,
    radius: 15
  },
  circleStyle: {
    className: 'leaflet-control-locate-circle',
    color: '#136AEC',
    fillColor: '#136AEC',
    fillOpacity: 0.05,
    weight: 0,
    clickable: false,
  },
  icon: "fa fa-location-arrow",
  metric: false,
  strings: {
    title: "My location",
    popup: "You are within {distance} {unit} from this point",
    outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
  },
  locateOptions: {
    maxZoom: 22,
    zoom: 15,
    watch: true,
    enableHighAccuracy: true,
    maximumAge: 10000,
    timeout: 10000
  },

}).addTo(map);

In this way a see the circle of the geolocation.
but i am not able to monitor the coordinates of the marker in a global way
So i would like to declare the generated circle like a marker in a global variable lin "var mymarkerLocation"
and check the dynamic position to trigger the collision with some poligone in the map.
Sorry for my poor english!
Thanks in advance
Emanuele


Reply all
Reply to author
Forward
0 new messages