Webmastersite.net

Search    Register    Log In   

1 matching result for "google maps":

Show listings, ordered by


By on Jan 30, 2019 at 1:45 PM

Time to revisit the color-coded map pins option.

First, I thought it'd be a good idea to make google maps use the same marker image as Open Street Map. That way you can customize it (marker.png in your theme images), and more importantly it removes the dependance on google's long-depreciated charts API which was being used to generate the google maps pin images dynamically before -- that API could go dark any day.

The tricky part was to maintain support for the colored map pins option without having to create 10 new images for different colored pins which would be a pain for you to customize. To achieve this for google, I ended up using some tricky CSS. Basically I have it append a color number to the image with marker.png?color=2. Then the CSS img[src="https://www.quietplease.org/attractions/templates/images_blog/marker.png?color=2"] { filter: hue-rotate(60deg); } alters the color of just the ones with ?color=2.

I was hoping this would make it easy to port the colored pins option to OSM. No such luck, somehow the CSS trick doesn't work with OSM. Seems as if the markers aren't actually img tags in the DOM for OSM. Who knows what they are? Chrome's element inspector should know and it says it's an <image> tag with a weird xlink:href attribute containing the url. But image[xlink:href="https://www.quietplease.org/attractions/templates/images_blog/marker.png?color=3"] { filter: hue-rotate(120deg); } didn't work. A search result suggested escaping the colon, but that didn't work either. Even using the image tag's id didn't help, so there must be something mysteriously keeping it from acting as part of the page DOM.

Eventually, after reading novel upon novel of documentation, I realized the only way to get this done before I die of old age is to use something much like the google chart image-generating API. Rather than use the depreciated one, I've built a new one into WSN that uses your marker.png and applies color changes via gd/imagemagick in a s...

Read Full Blog Entry

Narrow results to results containing

Link to these search results