In this post I’ll discuss the Leaflet marker in more detail and give it some internal functionality. If you haven’t read the previous post you can check it out here.

If you’ve done previous work with Leaflet you’ve probably created some great viewmodels that have functionality to drive the markers. In my first attempts to create map based modules I just followed the regular tutorials and some freely available plugins from the Leaflet plugin repository. After some iterations on the functionality we had created a monstrous JavaScript file with lots and lots of methods driving the markers. Add to that the performance issues we found when creating and destroying large amounts of markers, so the time had come to restructure the code.

In thinking about the restructuring of the map code I decided to move some basic functionality I had to contend with when dealing with markers that should show an actual location of an asset on the map into the marker itself. This way the code driving the markers could be a lot less complex and I could also add some nice features like sprites (which I’ll get to in part 3).

The first step to self-sufficiency

As I mentioned I have to deal with markers that represent assets which have a variable location on the map. The properties I need to represent that, are location (but that’s part of the default marker), direction, speed, scale and visibility.

First I’ll set some default options in the marker definition.

Next up I want to be able to set the options in the constructor from the already existing options parameter provided for the base Lealeft marker itself. I use an Underscore.js function to do this, I could’ve used some vanilla JavaScript, but I was lazy. (If you’ve never heard of Underscore.js, do yourself a favor, stop reading this and check it out now!)

The Underscore.js function also allows me to specify only those options I actually want to set. So if I only want to set the angle I just specify options.angle without all of the other options.

Updating makes the marker go round

Now, setting the options upon construction is great, but I also want to be able to update the options later on once the marker has been created. In order to do so I’ve added an updateOptions method in the marker definition. Again, add this to the L.Marker.extend definition.

Just to stay brief I’ve excluded the older browser code (IE8-) for rotating the icon in this example. If you want to know how to do that, send me a message or leave a comment and I’ll send it to you.

For a working example with an update of the angle, have a look at this demo.

A little corrective surgery

As you might have noticed in the demo, the marker rotates around its center point. Although this may not be apparent at first, it really shows when you, for example, want to open a popup. The popup’s little pointer at the bottom points to the center of the icon, and not where I would expect: the center of the white circle that’s in the icon. I’d expect it to rotate around that point.

To correct this issue we have to change the anchor point of the marker. The concept of an anchor point is actually default Leaflet functionality, as part of the L.icon class. Changing it according to its rotation however, isn’t.

To make this work we have to define a simple icon to stuff into the marker. So I’ve added one in the constructor method. And to do some of the calculations later on I’ve also defined the size of the icon and the anchor point within the icon. In our case, the white dot in the default Leaflet marker icon.

Now that we got that out of the way, let’s get to the good stuff …

Calculating the new anchor point

Before I begin I have a small confession to make. I’m nowhere near a math genius, so I borrowed the actual algorithm from Wikipedia.

Now that we have a function to get the corrected anchor point and to set it, the only thing that’s left is to apply it when the angle gets updated. In the updateOptions function I’ve added two lines to get and subsequently set the new anchor point:

And that is, as they say, that! You can find the demo of the entire script here.

Now go and play around with it. Make a cool airplane icon, some spaces invaders or clouds and move them around 😉