I have a json file describing features on a map (routes, points etc)

points include places of interest such as airport, harbor etc.

Is there a way to assign icons to these points?

example: have a path to an icon in my json file as an attribute to that point and request that that icon be used as a marker for that point?

I used the advice below by @Aragon, still can't get it to work..

my json looks like this:

"type": "FeatureCollection",
"features": [
        "type": "Feature",
        "id": "id0",
        "properties": {
            "graphic": "../../icons/pushpin.png",
            "title": "blah",
            "transportation": "Blah",
            "description": "blah"
        "geometry": {
            "type": "Point",
            "coordinates": [
        "crs": {
            "type": "name",
            "properties": {
                "name": "EPSG: 900913"

and my javascript looks like this:

 var context = {
        getGraphic: function(feature) {                    
            return feature.attributes.graphic;
    var template = {
        'externalGraphic': '${getGraphic}',
        'graphicWidth' :15,

            var data_vector_style = new OpenLayers.Style(template, {context: context});

            // Style Map tells vector Layer what style objects to use when features are
            //  in a certain state (states can be default, select or temporary
            var data_style_map = new OpenLayers.StyleMap({'default':data_vector_style});
            var dataLayer =  new OpenLayers.Layer.Vector("My GeoJson data from server", {
                projection:  new OpenLayers.Projection("EPSG:4326"),
                styleMap : data_style_map

            var features = getFeatures("../../controller?action=GET_USER_LOCATIONS");

if I change any of the other styling in template, it works fine. if I hardcode the marker in the styling 'externalGraphic': '../../icons/pushpin.png', it works fine. when I try to use attribute replacement the marker isn't used... Am I doing it wrong in the json object?


you can do this with some ways:

  • defining context style:


{Object} An optional object with properties that symbolizers’ property values should be evaluated against. If no context is specified, feature.attributes will be used. you

you can check out here for some idea.

       var context = {
            getGraphic: function(feature) {                    
                return feature.attributes.url;
        var template = {
            externalGraphic: "${getGraphic}"

        var style = new OpenLayers.Style(template, {context: context});
        var layer = new OpenLayers.Layer.Vector('Points', {
            styleMap: new OpenLayers.StyleMap(style),
            renderers: renderer

  • defining marker when adding all points from json for icon style:

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',
                   size, offset);
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));
  • change it after adding to map:

         // Define Marker Layer Here
         var feat = vectorLayer.features;
         for(var a = 0; a < feat.length; a++){
            var iconAdress = feat[a].attributes.url;
            marker.icon = new OpenLayers.Icon(iconAdress , size, offset);
            marker.icon.size = size;
            marker.icon.offset = offset;             
  • using marker setUrl method here


    i hope it helps you..

| improve this answer | |
  • WOW that was really quick! I've been trying to make it work but no luck so far.. my style is var data_vector_style = new OpenLayers.Style({ 'externalGraphic': 'icons/transportation_plane.png'}); and I'd like to use context to solve my problem but I can't really get the hang of it.. :S – chri_chri Jun 4 '12 at 14:51
  • 1
    Don't forget to include size for your icon, it's critical – Vadim Jun 4 '12 at 16:58
  • you are right @Vadim. For the example given above, probably understandable... :) – Aragon Jun 4 '12 at 17:06
  • My advice was for @chri_chri's comment since she only had the img URL in the style object. – Vadim Jun 4 '12 at 17:12
  • @Aragon would you mind taking another look at my edit? it must be something trivial I am getting wrong... :/ – chri_chri Jun 7 '12 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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