Search    Register    Log In   

2 matching results for "osm":

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

By on Nov 19, 2018 at 10:48 PM

A few months ago, Google Maps drastically lowered their free use allowance. The vast majority of us are, alas, still in no danger of having any websites popular enough to hit the limit. For a customer who was hitting the limit, I added a "click to load map" option in WSN to reduce their number of maps impressions. That, of course, is a far from ideal solution. What we really need is an alterative mapping service.

I thought about Bing, but they have limits of their own and may put a tighter squeeze on people at any time. So I settled on investigating Open Street Map, under the theory that OSM being non-commercial should mean we can count on it being scalable and not trying to charge people. Quickly I discovered that OSM isn't so much a mapping service as a toolkit which can be used to start making a mapping service. To do anything but a simple static tile gets complex quickly and people turn to third party tools to help implement OSM.

For the basic task of putting markers on a map with info windows, I've found Open Layers is pretty good. A few more idiosyncracies than Google Maps, but close enough. Driving directions seem to require another third party service, unfortunately. Nor do I have an overlapping marker spiderifier type of tool for OSM. Nor do the min/max zoom tweaks or lots of other things work at the moment with OSM. Nor does it support multiple maps on a page yet, nor ajax progressive marker loading, nor location dragging on submit/edit which has proved a particular pain. It'll be a long slog to get close to feature parity with google maps, but at least the basics are working.

This brought me to another look at geocoding services. OpenLayers, alas, does not include their own geocoder. Considering Google Maps has a rather low geocoding limit that one can quickly hit by regenerating a decent sized directory, finding a good geocoder is definitely a top priority. The problem I'm running into with every one I look at is the same: their terms of service. Map...

Read Full Blog Entry

Narrow results to results containing

Link to these search results