[GIS] Assign Icons to specific points dynamically in OpenLayers

featuresopenlayers-2style

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": [
                24.067939338686,
                35.525197669582
            ]
        },
        "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,
        'graphicHeight':15,
        'fillColor':'#669933',
        'fillOpacity':.8,
        'strokeColor':'red',
        'strokeWidth':5,
        'pointRadius':6

    };
            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");
            //alert(features);
            dataLayer.addFeatures(features);

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?

Best Answer

you can do this with some ways:

  • defining context style:

context

{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
        });
        layer.addFeatures(features);

        map.addLayer(layer);

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

        var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(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;             
     };
     marker.draw();

  • using marker setUrl method here

         markers.setUrl('newSRCAdres');

    i hope it helps you..

Related Question