Tuesday, July 2, 2019

note to self: google map's api got expensive and using openlayers as replacement

A while back Google decided it was being too charitable with usage of its Maps API so it cranked up the fees (the most common figure is "by 1400%") to monetize it better.

So I found usage on Porchfest days was costing me a couple hundred bucks for the month. Whoops!

This page has some alternative APIs. Unfortunately, the most obvious candidate to replace it, openlayers doesn't have the friendliest documentation, and gets pretty complex - it's a tool built for serious power-usage, and the examples page is flooded with tons of semi-esoteric things you can do - frustrating when you just want to throw some porch locations on a map and have a little info box pop up when you click one.

The example on https://www.festinosolutions.com/blog/ seems to pretty much cover it (though the way it's the only thing at that URL gives me pause - I posted its working example at https://porchfest.info/temp/festinosolutions/ )

Of course going down this route  will point out the hundred little things I learned to do acceptably well in Google Maps and need to relearn - details like icon sizes and default zoom levels and what not.

FOLLOWUP: Googling a bit more, https://leafletjs.com/ comes up a lot - it seems to cover that "map with marker icons that open informational popups" sweetspot pretty well...

MORE FOLLOWUP: Yeah, Leaflet really is the sweet spot for this kind of thing! The only thing in my usecase that wasn't covered by the first two quick start tutorials is having numbers on the icons... this page on simple numbered markers with leaflet has the solution I like best. I think the only changes might be adding a line-height: 25px; to the CSS - and I might double back and do a 2x icon for it.

No comments:

Post a Comment