Wednesday, May 27, 2015

Marker "spotlight" for Leaflet and for Google Maps API

A client really liked this spotlight effect demonstrated for ModestMaps. It calls out the selected markers, without hiding the other markers or forcing the user to perform a new search. And hypothetically this would be a great feature for the legend, to mouse over the legend and have the matching markers "light up"


But it didn't exist for Google Maps API (which the client uses), nor for Leaflet (which we use on 95% of our other projects). So I spent an afternoon coding this up:
https://github.com/greeninfo/MapSpotlight

All in all it was pretty easy, and even fun. I got to read about the HTML5 Canvas which I rarely get to work with outside of some charting libraries, and got to learn about Google Maps API's OverlayView capability, and the analogous iLayer interface for Leaflet.

So yeah, go grab a copy and highlight some markers. :)