How to Use Custom Markers for OpenLayers | Morpht

Good selection of markers can have a big influence on the overall success of the site. It can improve user experience because with good icons and color codes, the user can easily see what the marker is about without clicking it. The default set of markers in Open Layers is too generic, they are just basic points with no added value – and that is perfectly fine. For a simple site with few points and basic categorization, there is no need for fancy markers. But if the map needs to be clear to users and the markers look good on high resolution screens then you'll need to create custom markers. Open your favorite image editing or vector drawing application. It doesn’t matter which you use, what matters is the final exported file. I use Adobe Photoshop or Illustrator, but you can use Corel Draw, Gimp, Fireworks etc... Once you have the image(s) ready, you have to export them in the correct format. OpenLayers works with PNG, GIF and SVG. Many of you will cheer that SVG is supported, but I strongly recommend to stick with PNG files. The time for SVG has not arrived. There are still some backward compatibility issues, and I’ve noticed jagged lines on some browsers/devices combination. If you create the PNG marker with alpha transparency and make it two times larger, the resulting PNG will be crisp everywhere. Now that we have the image ready upload it to the site. You can store it in a simple module or add inside a Feature module. Go to /admin/structure/openlayers/styles and from this page you can see all the current styles. Instead of creating a new marker, just clone an existing one. This will save you time because you won't have to fill out the whole form. As you can see, it's relatively easy to change the look and feel of a map using custom markers. It's now more readable and descriptive for users. You could further improve things by creating a legend which will explain the markers. Thanks for this article. Your 'before' and 'after' screenshots demonstrate your point perfectly: a somewhat boring map suddenly looks interesting thanks simply to a change of markers. Source.


Яндекс.Метрика Рейтинг@Mail.ru Free Web Counter
page counter
Last Modified: November 30, 2014 @ 12:00 am