10

I'm using Leaflet combined with GeoJSON features. Is there a way to label GeoJSON features (in this case - polygons)? It should get labels from 

feature.properties.name

This is my code where I think I could insert label:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }
Improve this question
1
  • 1
    Would you mind posting the solution you used to label the polygon, if still at hand?
    – a1an
    Sep 7, 2015 at 13:18

3 Answers 3

Reset to default
6

Here's how I solved it with Leaflet Polygons and Labels, so that you get a floating label on the polygon with its name property.

Suppose:

  • you get the json response parsed into the variable json
  • there are only simple polygons with no holes in json
  • polygon_style holds style options returned by your style function
  • labels_layer is a leaflet Layergroup (or directly your map)

Then:

for ( var i=0; i < json.features.length; i++ ) {
    feat = json.features[i];
    coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];
        point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    labels_layer.addLayer(L.polygon( coords, polygon_style ).bindLabel(feat.properties.name))  ;
}

Remarkably oddly enough, GeoJson (actually EPSG:4326) and Leaflet coordinates are swapped in order.

Improve this answer
1
  • 2
    For those using Leaflet 1.0+, the L.Label has been moved into Leaflet core as L.Tooltip and the plugin has been deprecated. You'd use bindTooltip() instead of bindLabel(). github.com/Leaflet/Leaflet.label
    – aethergy
    May 31, 2018 at 19:55
5

You need to know the format leaflet expects to use. Example: OpenLayers expects this GeoJSON format to create a point and give some custom attributes:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "name":"TRON-02",
                "serial":"TRON002",
                "bearing":0,
                "color":"green",
                "size":15,
                "image":"img/unit_map3.png",
            },
            "geometry":{
                "type":"Point",
                "coordinates":[-50.06542968749966,-23.749149728383717]
            }
        }
    ]
}

As you can see, I've created a Geometry (Point) and join my attributes to it. When I send this to OpenLayers, the result will fit in @Aragon's example, using "color" and "name" (as label) to customize the point in map.

Please copy and paste this GeoJSON example in http://json.parser.online.fr/ or use the site to try and validate your own.

Improve this answer
9
  • 1
    Wasn't the question about polygons? How did an answer about Point geometry solved the question?
    – a1an
    Sep 1, 2015 at 9:13
  • And what is a polygon? You'll name as same. The only thing that will change is the "geometry" part. Not only solved the question but received 5 ups until now.
    – Magno C
    Sep 1, 2015 at 17:20
  • 1
    Just add the "properties" stuff and all will be fine. See @Aragon answer return feature.properties.color; As you can see, propertiesis a feature attribute and have color as one of its attributes. You can put anything you want into this object following this way.
    – Magno C
    Sep 3, 2015 at 17:15
  • 2
    RFM is totally uncalled for. And the difference between a point and a polygon is significant, since knowing which geometry to use is exactly the issue here
    – Stephen Lead
    Oct 25, 2017 at 22:55
  • 1
    @Stephen Lead Ok. I was not much clear. To those that come here please consider the a1an's answer. That must be the accepted one. And please don't upvote mine.
    – Magno C
    Oct 26, 2017 at 15:21
1

i think this question is about openlayers.if so, you can use for labelling;

var style = new OpenLayers.Style({
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7,
    fillColor: "${getColor}",  
    label: "${getLabel}"
  } , {
    context: {
      getColor: function(feature) {
        return feature.properties.color;
      },
      getLabel: function(feature) {
        return feature.properties.name;
      }
    }
  );

i hope it helps you...

Improve this answer
5
  • 1
    It isn't OpenLayers. I'm using Leaflet combined with GeoJSON features. So this doesn't work. But thank you for trying.
    – againstflow
    Dec 4, 2012 at 13:42
  • Why you do not fillColor: "${color}" instead of creating a function?
    – Magno C
    Dec 4, 2012 at 14:29
  • 1
    @Magno C there is no difference between your point.both of them are the same. i have written this for if you want to add more complicated function as random color or anything else. still thank you for your point.
    – urcm
    Dec 4, 2012 at 14:38
  • Understood Aragon. Thanks for the new method. May be useful in future. Thumbs UP !
    – Magno C
    Dec 4, 2012 at 14:45
  • I think there is no way @againstflow run out from the format I've show, since there is a specification ruling GeoJSON here : link
    – Magno C
    Dec 4, 2012 at 15:03

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.