Created
April 2, 2012 23:51
-
-
Save comp615/2288108 to your computer and use it in GitHub Desktop.
Numbered Markers in Leaflet (JS Mapping)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.leaflet-div-icon { | |
background: transparent; | |
border: none; | |
} | |
.leaflet-marker-icon .number{ | |
position: relative; | |
top: -37px; | |
font-size: 12px; | |
width: 25px; | |
text-align: center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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'}) | |
}); |
Great and clean solution.
Thank you!
Thank you for sharing your code, I have adapted it to use text intead of numbers, available here.
Thanks for sharing... helped to save a lot of time 👍
Thanks. FYI, I'm finding the .number div element for the number text introduces an issue meeting WCAG 2.0 success criteria:
Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.
The "background behind the text" in this case is transparent, and only the loaded icon image provides contrast for the text.
Do you have any suggestion?
excellent and thank you for sharing
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
excellent