I have several layers that are point geometries. I am defining them custom markers symbols and such symbols have colors (red, yellow and green) to represent values.

Since there are several of them in an area, I started with marker clusters, but quickly realized that clusters are good only if all markers mean the same (like redfin home markers).

I would like to stick to markers but to avoid visual clutter - I would like to resize them based on the zoom level. If I design these markers in SVG, I could achieve this - as its easy to size SVG than raster formats, similar to this link http://mapbox.com/tilemill/docs/guides/advanced-map-design/#images_as_icons

Please send me any examples or sample sites you have developed or come across so that I can see the visual appeal of having several custom markers in maps.

Thanks, Ramesh


1 Answer 1


In my application I am using PNG images to represent the markers and use Rules, added to the Style of the layer, to set their size based upon the zoomlevel.

var markerStyle = new OpenLayers.Style({
    externalGraphic : '${imagePath}',
    pointRadius     : 15

var markerStyleMap = new OpenLayers.StyleMap({
    'default' : markerStyle

    new OpenLayers.Rule({
        minScaleDenominator : 10,
        maxScaleDenominator : 4999,
        symbolizer          : { pointRadius: 15}

    new OpenLayers.Rule({
        minScaleDenominator : 5000,
        maxScaleDenominator : 9999,
        symbolizer          : { pointRadius: 10}


var layer = new OpenLayers.Layer.Vector("markers", {
    projection : "EPSG:900913"

layer.styleMap = markerStyleMap;

The URL of the image representing the marker is set as an attribute on the feature and can be referenced by using the ${imagePath} notation in the style :

var marker = new OpenLayers.Feature.Vector(pointGeometry, {
     id        : markerId,
     imagePath : '...url of the image to use...'  
  • Thanks Geert. Yes, this is one way to implement sizing of markers. The concern I have is that raster images (PNG, TIFF) don't work all that well compared to vector formats in zooming in/ out. Are there other examples of SVG based markers? Commented Oct 3, 2012 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.