Deprecated: Array and string offset access syntax with curly braces is deprecated in /homepages/18/d158249911/htdocs/blogs/inc/_core/_misc.funcs.php on line 5524

Deprecated: Function get_magic_quotes_gpc() is deprecated in /homepages/18/d158249911/htdocs/blogs/inc/_core/_param.funcs.php on line 2220

Warning: Cannot modify header information - headers already sent by (output started at /homepages/18/d158249911/htdocs/blogs/inc/_core/_misc.funcs.php:5524) in /homepages/18/d158249911/htdocs/blogs/inc/_core/_template.funcs.php on line 398

Warning: Cannot modify header information - headers already sent by (output started at /homepages/18/d158249911/htdocs/blogs/inc/_core/_misc.funcs.php:5524) in /homepages/18/d158249911/htdocs/blogs/inc/_core/_template.funcs.php on line 40

Warning: Cannot modify header information - headers already sent by (output started at /homepages/18/d158249911/htdocs/blogs/inc/_core/_misc.funcs.php:5524) in /homepages/18/d158249911/htdocs/blogs/inc/_core/_template.funcs.php on line 336

Warning: Cannot modify header information - headers already sent by (output started at /homepages/18/d158249911/htdocs/blogs/inc/_core/_misc.funcs.php:5524) in /homepages/18/d158249911/htdocs/blogs/inc/_core/_template.funcs.php on line 337

Warning: Cannot modify header information - headers already sent by (output started at /homepages/18/d158249911/htdocs/blogs/inc/_core/_misc.funcs.php:5524) in /homepages/18/d158249911/htdocs/blogs/inc/_core/_template.funcs.php on line 338

Warning: Cannot modify header information - headers already sent by (output started at /homepages/18/d158249911/htdocs/blogs/inc/_core/_misc.funcs.php:5524) in /homepages/18/d158249911/htdocs/blogs/inc/_core/_template.funcs.php on line 339
Numbered Markers in Leaflet
« My Latest ProjectThe Android Experience (Day 3) »

Numbered Markers in Leaflet

04/02/12 | by Comp615 [mail] | Categories: Web, Technology

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /homepages/18/d158249911/htdocs/blogs/plugins/_bbcode.plugin.php on line 234

Deprecated: Array and string offset access syntax with curly braces is deprecated in /homepages/18/d158249911/htdocs/blogs/plugins/_auto_p.plugin.php on line 502

Deprecated: Array and string offset access syntax with curly braces is deprecated in /homepages/18/d158249911/htdocs/blogs/plugins/_auto_p.plugin.php on line 500

Deprecated: Array and string offset access syntax with curly braces is deprecated in /homepages/18/d158249911/htdocs/blogs/plugins/_auto_p.plugin.php on line 500

Deprecated: Array and string offset access syntax with curly braces is deprecated in /homepages/18/d158249911/htdocs/blogs/plugins/_texturize.plugin.php on line 116

UPDATE: A Gist with the code is available here. You will still need to download the image I mention below.

One of the projects I'm currently working on deals heavily with mapping locations. Although Google Maps is great, I decided to go with a newer and more flexible solution, Leaflet. This little utility allows you to hook into CloudMade's huge database of tilesets to completely change how the maps look, in addition, Leaflet is just generally a super solid and fast mapping library.

After playing around with Leaflet, I really needed a way to label markers 1,2,3,etc. and wasn't able to find any easy way of doing this. So here's a quick little trick that should get anyone else looking for this functionality started.

First, make sure you are using the 4.0+ version of Leaflet, that's what I modeled this after, although you could probably use a similar approach for 3.0 as well.

The default marker wasn't quite the right size for fitting text inside, so I took it and distorted it a bit in photoshop. It's by no means perfect, but should do in a pinch. Download my custom marker here.

Next, we need to create our own icon class. Add the following code to a javascript file in your project, editing the path to the image as appropriate (Mine is ERB js):


L.NumberedDivIcon = L.Icon.extend({
options: {
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;
}
});

Now we need to unstyle the disgusting default div, and a little bit of styling will line up our number nicely. This goes in your CSS somewhere:


.leaflet-div-icon {
background: transparent;
border: none;
}
.leaflet-marker-icon .number{
position: relative;
top: -37px;
font-size: 12px;
width: 25px;
text-align: center;
}

And that's it! Now we have a nice new class we can use to number things, for instance:


var marker = new L.Marker(new L.LatLng(0, 0), {
icon: new L.NumberedDivIcon({number: '1'})
});

Hopefully someone finds this useful! I'd love to see a better implementation of this make it into Leaflet master, but till then this should do nicely. Enjoy and happy mapping!

Permalink

No feedback yet


Form is loading...

A collection of musings from my time at Yale along with some thoughts about my "Freshman year of life" in San Francisco.

Search

  XML Feeds

Blog software