Labeling Features

This demo shows how to add static text labels to the center of features. This is not the same as fitting labels dynamically, so labels will start to collide as you zoom out.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Labeling Features</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet Vector from CDN -->
  <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"
    integrity="sha512-EMt/tpooNkBOxxQy2SOE1HgzWbg9u1gI6mT23Wl0eBWTwN9nuaPtLAaX9irNocMrHf0XhRzT8B0vXQ/bzD0I0w=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<style>
  .label {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-top: -1em;
  }

  .label div {
    position: relative;
    left: -50%;
    top: 10px;
    text-shadow: 0px 2px 1px rgba(255,255,255,0.85);
  }
</style>

<div id="map"></div>

<script>
  var map = L.map('map').setView([37.428, -121.978], 9);

  L.esri.Vector.vectorBasemapLayer('ArcGIS:Oceans:Base', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  }).addTo(map);

  var earthquakes = L.esri.featureLayer({
    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'
  }).addTo(map);

  var labels = {};

  earthquakes.on('createfeature', function (e) {
    var id = e.feature.id;
    var feature = earthquakes.getFeature(id);
    var center = feature.getLatLng();
    var label = L.marker(center, {
      icon: L.divIcon({
        iconSize: null,
        className: 'label',
        html: '<div>' + e.feature.properties.name + '</div>'
      })
    }).addTo(map);
    labels[id] = label;
  });

  earthquakes.on('addfeature', function (e) {
    var label = labels[e.feature.id];
    if (label) {
      label.addTo(map);
    }
  });

  earthquakes.on('removefeature', function (e) {
    var label = labels[e.feature.id];
    if (label) {
      map.removeLayer(label);
    }
  });
</script>

</body>
</html>

Edit this sample on GitHub

Terms