12

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)
            };
        }
0

3 Answers 3

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.

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.

0
0

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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