Map marker icon anchor points

[harry-wood]

You're using a lot of custom icons for your map markers. When you do this in leaflet, it defaults to setting the "anchor point" to the centre of the icon graphics. The anchor point is the point within the icon graphic which leaflet will take as the spot it's pointing to

So... the result is a subtle drifting effect when you zoom in and out. For example, are these two markers pointing to the north or the south of the street?

Quite weird when you notice it, but quite subtle. You can see that the centre of the marker icon is always on the right spot. So you want to change this so that the middle bottom of the icon is the anchor point.

I see your various icons are referenced in this file:
https://github.com/cyclestreets/bikedata/blob/master/js/bikedata.js#L204

I think the size of icon_enforcement_bad.svg for example, is 38x42 pixels. So the following setting would position the anchor point half way along horizontally and all the way vertically to the bottom of the image:

iconAnchor: [19, 42]

Maybe you can simply add this into that layerconfig structure, if it gets fed through from there

[mvl22]

Well spotted - yes, I agree this needs to be fixed. Thanks for flagging this up.

Pull requests are of course welcome :) Personally I always find the Leaflet.js options for this takes quite a bit of mental effort to work out what numbers to use!

Maybe you can simply add this into that layerconfig structure, if it gets fed through from there

Yes, that would be the approach. The strategy is that there is no layer-specific code in the application code itself, but that any differences between layers are in the layerConfig settings, and the application code picks those up and reacts by having support for the various flags. So things like icon size/shadow/position should be defined there, unless all layers use the same size icons.