How to add persistent text to a leaflet circle marker?

[J T]

I have extended the Leaflet CircleMarker to include metadata in the marker options and bound it with a popup using the bindToolTip(..) method. Therefore when the user mouseovers the marker the metadata shows in the popup.

What I would like to have is a persistent ASCII character (e.g. '*') placed in the center of the marker. This ASCII character will help the user know that the popup includes important information. I cannot use marker color coding for this purpose because it is reserved for other reason.

[Pat Keller]

Since you have already extended CircleMarker, could you place a DivIcon in the center of the circle when you have metadata?

[J T]

I would like to try this approach.  Can you demonstrate how this is done?  Below is my  customCircleMarker  definition:

// define the custom circle marker object and function

customCircleMarker = L.CircleMarker.extend({

options: {

event_ID: 0,

event_type: 0,

event_time: 0.0,

input_time: 0.0,

sp: 0.0,

kurt: 0.0,

zone: 0,

img_url: ''

}

});

[Pat Keller]

I realized that extending might not work, but I was able to add a DivIcon to the center of the circle marker a different way. 

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

  maxZoom: 18,

  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +

    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

}).addTo(mymap);

L.circleMarker([51.5, -0.09]).addTo(mymap);

var myIcon = L.divIcon({

  className: 'my-div-icon',

  html: '*',

  iconAnchor: [2, 5]

});

// you can set .my-div-icon styles in CSS

L.marker([51.5, -0.09], {

  icon: myIcon

}).addTo(mymap);

https://jsfiddle.net/pkeller3/na9vopdb/2/

[Mighri Imen]

Thanks a lot.

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/sD_198ZjUPw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/14a8f906-e6a3-4095-9d53-cc13a0be524cn%40googlegroups.com.

[Pat Keller]

You're welcome. You should be able to change the text font, size, color, etc using css.