image/svg+xml Openclipart 2007-11-20T10:29:44 Some shapes from photos. http://openclipart.org/detail/8766/tree-silhouettes-by-chrisdesign-8766 Chrisdesign clip art clipart image media nature png public domain shape silhouette svg tree

zzolo

OpenLayers Facelift

11 Nov 2011

In the current D7 development branch of the Drupal OpenLayers module there are some really great interface and styling updates that will make maps a lot more exciting and more intuitive to use.

Before

OpenLayers | openlayers-6

After

Clone map geojson | openlayers7

The images above are screenshots (click to expand) of the default maps that currently come with the stable version of the OpenLayers module and library (before) and then new styling for default maps in the development branch (after). Let’s go through the changes:

  1. New image set based on MapBox’s image set and filled in by ndagire. This is huge! The default image set that comes with the OpenLayers module is pretty ugly; see for yourself.
  2. New default feature styles. This was a no brainer once we got new images. It is much better than that orange color.
  3. Provided markers come with the modules, a combination of ndagire’s images and a couple markers I made, the module now comes with some markers out of the box. Besides this being visually exciting, I think it will help people grok the module more easily.
  4. New popup provided by Harris Rashid which goes very well with the new image set.
  5. New map styling to compliment the image set. A little CSS can go a long way.
  6. New Mapquest tiles by default. mikl helped get this tile set into the module core. And though it was tough to let go of the OpenStreetMap default tileset, the MapQuest tiles are actually based off the OpenStreetMap data, don’t require a third-party library, are free, and look so much better!
  7. Wrap dateline (not numbered) is when the tiles repeat themselves as they go past the International Date Line which means as you pan east or west, it keeps going. This is a bit nerdy, but it means that the map fills up the area completely and looks much better.

So, all in all, an amazing improvement to what was a mediocre visual experience out of the box. I am really taken back by the contributions of the community to make this happen. And considering that I have talked twice about Making Beautiful Maps in Drupal both here and here, it was about time this became more of a reality.

Map Previews

I have also been adding some interface improvements to the OpenLayers UI module that comes with the main core module. If you look at the After image above, you’ll notice it says “Preview”. The map building interface now has a preview button so that you can see the map before you even save it (data and all). This is really great, as before you had to save the map, then go to the display page (done with the Views module), just to see if it worked. I can’t believe I hadn’t done this earlier.

Style Previews

When listing styles in the OpenLayers UI, you will now see a marker preview for the styles with icons, and a little map thumbnail for vector based styling. The icon preview was done by Pol at the OpenLayers Sprint at DrupalCon London. The map thumbnails are actually little OpenLayers maps that show a random place with the style on top.

When editing styles, there is also a larger map to preview the style. This is a larger map, but same principle as the list. This also contains crosshairs so that you can see how the style is centered on the feature it is representing.

Layer Previews

Coming soon. This is not implemented yet, and a bit harder to accomplish as often layers require maps to be certain ways. But I think we can still have this doable for the majority of layers.

Testing

All this work and more is currently in the development branch. There are some known bugs. Any help testing out would be greatly appreciated. Please put any bugs into the issue queue. I am hoping to have some time over Thanksgiving to follow through with this sprint and get out another release (probably the final alpha).