How to Use Custom Markers for OpenLayers

OpenLayers module is a popular solution for mapping in Drupal. The biggest benefit is the ability to use different map providers, complete Feature support and, last but not least, the simplicity of creating custom markers.

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.

OpenLayers Markers default

Creation of marker

Let's create a marker

The first step is to create your own marker images.

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...

Create a new document, make it at least two times larger than your desired marker size in both directions. On the new blank canvas make sure the marker point is on the bottom border. In fact, the marker should fill the whole canvas.

Exporting the marker image

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.

Creating custom marker

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. 

Marker clone

 

In the marker edit form, you have to specify the correct path to the marker.

Marker path Open Layers

The most important part of this form is where you set the dimensions and offset for your image. Offset needs to be changed so the point of the marker is in the middle of the preview square on style list. This will require some trial and error to get right. Here, you also set half the real image size – we have created the images double the size, remember? This will provide us with crisp looking images on high resolution ('retina') devices.

OpenLayers Marker setup

Once you've finished configuring the marker, save the form and it's ready to be used in a map.

OpenLayers Custom Markers

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.

If you have any questions, or want to show others your new marker set, please leave a comment.

Comments

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.

Add new comment

(If you're a human, don't change the following field)
(If you're a human, don't change the following field)

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.