Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 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..

share|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
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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