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 '15 at 13:18
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
  • 1
    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 '18 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
  • Wasn't the question about polygons? How did an answer about Point geometry solved the question?
    – a1an
    Sep 1 '15 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 '15 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 '15 at 8:04
  • 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 '15 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 '17 at 22:55
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 '12 at 13:42
  • Why you do not fillColor: "${color}" instead of creating a function?
    – Magno C
    Dec 4 '12 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.
    – 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

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.