[GIS] Show text inside polygon on Leaflet map

errorlabelingleafletpolygon

When I try to label the polygon on my Leaflet map I always get the error:

t is undefined

I am trying to do it as shown below:

<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
    <script src="test.js"></script>
    <style>
        #mapid { height: 600px; }
    </style>
</head>
<body>
<div id="mapid"></div>
<script>

    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: 'your.mapbox.project.id',
        accessToken: 'your.mapbox.public.access.token'
    }).addTo(mymap);
    var marker = L.marker([51.5, -0.09]).addTo(mymap);
    var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ]).addTo(mymap);
    var label = new L.Label()
    label.setContent("static label")
    label.setLatLng(polygon.getBounds().getCenter())
    mymap.showLabel(label);
</script>

</body>
</html>

I want to show some text inside the polygon. I've tried to accomplish it using label but unable to do it.

Best Answer

Since you seem to be using leaflet 1.0 you can use the tooltip to attach text to a polygon. No need for a separate label plugin or anything. Just this:

 polygon.bindTooltip("My polygon",
   {permanent: true, direction:"center"}
  ).openTooltip()

For more info: http://leafletjs.com/reference-1.0.0.html#tooltip

Related Question