Tag: OpenLayers 2

Some useful and aesthetic free map markers collections.

Posted by – Tuesday 2013-01-22

When creating a web map with OpenLayers, Leaflet, Google Maps or similar, a problem that sometimes arises is finding useful and aesthetic map markers, especially when it is required that the markers themselves have a meaning – for instance, points of interest – that is inmediate to users.

Under this requirement the default marker icons usually provided might not be good enough, or not suit a particular need. In this post we will list some collections of free map markers icons that might fill this gap.

1. Google Maps icons, and more.

A set of map marker icons intended to be used to represent points of interest can be found at http://www.lass.it/Web/viewer.aspx?id=4.

Google Maps map markers

2. OpenStreetMap map icons

The Open Street Map project has its own set of map icons, that can be found at http://wiki.openstreetmap.org/wiki/Osmarender/Symbols.

Open Street Map icons

The Open Street Map icons themselves can be found at the Subversion repository http://svn.openstreetmap.org/applications/share/map-icons/svg/, which is accessible via a web browser.


OpenLayers cluster strategy active state depending of current map scale.

Posted by – Monday 2013-01-07

1. The arena.

Among the strategies that OpenLayers has, a very important one is the cluster strategy (class OpenLayers.Strategy.Cluster). As explained in a OpenGeo workshop about OpenLayers [1]:

Loosely speaking, the OpenLayers.Strategy classes tie together the layer and the protocol. Strategies deal with when to make requests for data (or when to send modifications). Strategies can also determine how to prepare features before they end up in a layer.

The cluster strategy will pack together near features in a single one (clustering) before they are sent to the vector layer and rendered. The clustering threshold can be set by pixels or by distance.

OpenLayers cluster strategy example

This strategy is very useful when we have to deal with the task of showing a layer with a large number of features and we want offer users a clear presentation. Typically, this problem will happen at low zoom levels or, equivalently, at high map scale values. In this situation, most of the features, if not all, will lie in the map extent corresponding to the viewport.


Beware of decimal pixel values in OpenLayers.

Posted by – Wednesday 2012-12-19

So you are programming an OpenLayers based map viewer and attempt to make a WMS GetFeatureInfo request. The response will later be pretty-formatted and displayed to the user. In order to to accomplish this you create JavaScript code like the shown below:

var parameters = {
    srs: map.getProjection(),
    bbox: map.getExtent().toBBOX(6),
    width: map.getSize().w,
    height: map.getSize().h,
    x: evt.xy.x,
    y: evt.xy.y,
    layers: 'municipalities',
    query_layers: 'municipalities'

    method: 'get',
    url: this.getFeatureInfoUrl,
    async: false,
    params: parameters,
    success: function(data) {
       var responseText = data.responseText;
       // ...

where evt (lines 6 and 7) represents the mouse click event that triggered the GetFeatureInfo request.


Marker layers in OpenLayers.

Posted by – Tuesday 2012-12-11

The most usual way of creating a markers layer in OpenLayers is by adding to the map an instance of the class OpenLayers.Layer.Markers. However, this method is no longer encouraged. As said in the OpenLayers documentation [1]:

Markers support only point geometries. They are styled only using the OpenLayers.Icon class. They do not support lines, polygons, or other complex features. Their interaction method differs significantly from vector layers.

In general, Markers are the ‘older’ way to interact with geographic data in the browser. Most new code should, where possible, use vector layers in place of marker layers.


Styling missing tiles in OpenLayers.

Posted by – Tuesday 2012-09-18

In an OpenLayers based web map when a tile fails to load, an a pink colored and ugly one will be displayed instead.

Fortunately, this behaviour can be changed. For instance, the background color can be set from pink to transparent.

OpenLayers.Util.onImageLoadErrorColor = 'transparent';

Another possible solution is using a custom graphic for the tile.

OpenLayers.Util.onImageLoadError = function() {
     this.src = '/path/to/custom-blank.png';

However, as of version 2.12 of OpenLayers it seems that none of these solutions work.