Sign up ×
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'm using Leaflet combined with GeoJSON features. Is there a way to label GeoJSON features (in this case - polygons)? It should get labels from 

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(
share|improve this question
Would you mind posting the solution you used to label the polygon, if still at hand? – a1an Sep 7 at 13:18

3 Answers 3

up vote 5 down vote accepted

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


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 or use the site to try and validate your own.

share|improve this answer
Wasn't the question about polygons? How did an answer about Point geometry solved the question? – a1an Sep 1 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 at 17:20
Let me rephrase then: I have the same question and placing a label on a polygon is quite different than placing it at a point, so polygon means to me a two dimensional closed object with several edges, in this context. That's why I have interest in getting some details, hence my first comment. An "it did solve it" answer is not so helpful then but thanks anyway :-) – a1an Sep 3 at 8:04
Just add the "properties" stuff and all will be fine. See @Aragon answer return; 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 at 17:15
Tried it out, however leaflet does not have any "label:" property available (whether for paths, nor for any other feature). the bindLabel method of leaflet.Label also requires the polygon to be "manually drawn" (I guess, since it needs the polyline object to bound to). – a1an Sep 7 at 13:15

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) {
      getLabel: function(feature) {

i hope it helps you...

share|improve this answer
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 '12 at 13:42
Why you do not fillColor: "${color}" instead of creating a function? – Magno C Dec 4 '12 at 14:29
@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. – Aragon Dec 4 '12 at 14:38
Understood Aragon. Thanks for the new method. May be useful in future. Thumbs UP ! – Magno C Dec 4 '12 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 '12 at 15:03

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.


  • 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)


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(  ;

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

share|improve this answer

Your Answer


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.