Leaflet will become even better if you add …

Number the markers

it sould be nice if we ware abble to number the markers, for a search around a point for exemple.

66 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    RicozorRicozor shared this idea  ·   ·  Admin →

    5 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • AnonymousAnonymous commented  · 

        Thanks Ricozor, this is what I need!

      • efcefc commented  · 

        Ricozor, that was super helpful! I've been able to simplify the code quite a bit and eliminate some of the extra styling that was being added on for icons. I also made it clear that this marker can be used for any text, not just numbers. I needed to show other values, and any HTML can be stuffed inside these text markers. I do hope that a generic text marker could become part of Leaflet in the future.

        ==================
        var LeafMarkerText = L.Icon.extend({
        markerText: '', //
        initialize: function (markerText) { // use number has parameter instead of iconUrl
        if (markerText) {
        this.markerText = markerText;
        }
        },
        _createIcon: function () {// override Icon creation to replace
        var t = document.createElement('div');
        t.className = "leaflet-marker-icon leaflet-marker-text";
        t.innerHTML = this.markerText;
        return t;
        },
        });
        ==================

        Just create these with...

        ==================
        marker = new L.Marker(markerLocation, {icon : myText});
        ==================

        ...add CSS for the leaflet-marker-text class and you are good to go.

      • RicozorRicozor commented  · 

        Finally I succed to add different number for each marker.
        to do this I've overrided L.Icon like this :
        ==================
        var LeafIconNumber = L.Icon.extend({
        number: '', //
        initialize: function (number) { // use number has parameter instead of iconUrl
        if (number) {
        this.number = number;
        }
        },
        iconUrl: 'path/to/marker.png',
        shadowUrl: 'path/to/marker_shadow.png',
        iconSize: new L.Point(22, 34), //
        shadowSize: new L.Point(37, 34),
        iconAnchor: new L.Point(11, 34),
        popupAnchor: new L.Point(-97, -31),
        createIcon: function () {// override Icon creation to add
        var img = this._createIcon('icon');
        img.innerHTML = this.number;
        return img;
        },
        _createImg: function (src) { // override img creation to replace the img by a div with backgroundImage
        var el;
        if (!L.Browser.ie6) {
        //el = document.createElement('img');
        //el.src = src;
        el = document.createElement('div');
        el.style.backgroundImage = 'url('+src+')';
        } else {
        el = document.createElement('div');
        el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
        }
        return el;
        }
        });
        ==================

        then in the loop where I've created my markers, I call LeafIcon like this

        ==================
        for (i=0; i<numberOfMarkers ; i++ ){
        var myIconNumber = new LeafIconNumber(i+1),
        markerLocation = new L.LatLng(latData, lngData);,
        var marker = new L.Marker(markerLocation, {icon : myIconNumber});
        }
        ==================

        and at least I've added css properties to div.leaflet-marker-icon{ text-align:center; color:#f00; line-height22px; font-size:9px;} to align numbers

      Feedback and Knowledge Base