Skip to content

Instantly share code, notes, and snippets.

@comp615

comp615/leaflet_numbered_markers.css

Created April 2, 2012 23:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save comp615/2288108 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save comp615/2288108 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. comp615 created this gist Apr 2, 2012.
    12 changes: 12 additions & 0 deletions leaflet_numbered_markers.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    .leaflet-div-icon {
    background: transparent;
    border: none;
    }

    .leaflet-marker-icon .number{
    position: relative;
    top: -37px;
    font-size: 12px;
    width: 25px;
    text-align: center;
    }
    33 changes: 33 additions & 0 deletions leaflet_numbered_markers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    L.NumberedDivIcon = L.Icon.extend({
    options: {
    // EDIT THIS TO POINT TO THE FILE AT http://www.charliecroom.com/marker_hole.png (or your own marker)
    iconUrl: '<%= image_path("leaflet/marker_hole.png") %>',
    number: '',
    shadowUrl: null,
    iconSize: new L.Point(25, 41),
    iconAnchor: new L.Point(13, 41),
    popupAnchor: new L.Point(0, -33),
    /*
    iconAnchor: (Point)
    popupAnchor: (Point)
    */
    className: 'leaflet-div-icon'
    },

    createIcon: function () {
    var div = document.createElement('div');
    var img = this._createImg(this.options['iconUrl']);
    var numdiv = document.createElement('div');
    numdiv.setAttribute ( "class", "number" );
    numdiv.innerHTML = this.options['number'] || '';
    div.appendChild ( img );
    div.appendChild ( numdiv );
    this._setIconStyles(div, 'icon');
    return div;
    },

    //you could change this to add a shadow like in the normal marker if you really wanted
    createShadow: function () {
    return null;
    }
    });
    6 changes: 6 additions & 0 deletions usage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    //Make sure you downloaded the image file in numbered_markers.js

    //Note that the text could also be letters instead of numbers if that's more appropriate
    var marker = new L.Marker(new L.LatLng(0, 0), {
    icon: new L.NumberedDivIcon({number: '1'})
    });