Esri Leaflet
This content has moved to developers.arcgis.com. Please update your bookmarks!

Styling lines

Custom styles for line features with the style option. More information about Feature Layers can be found in the L.esri.FeatureLayer documentation.

Hover to inspect
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Styling lines</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@3.1.2/dist/esri-leaflet-vector.js"
    integrity="sha512-SnA/TobYvMdLwGPv48bsO+9ROk7kqKu/tI9TelKQsDe+KZL0TUUWml56TZIMGcpHcVctpaU6Mz4bvboUQDuU3w=="
    crossorigin=""></script>

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

<style>
  #info-pane {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 400;
    padding: 1em;
    background: white;
  }
</style>

<div id="map"></div>
<div id="info-pane" class="leaflet-bar">Hover to inspect</div>

<script>
  var map = L.map('map').setView([37.81, -85.85], 7);

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

  var bikePaths = L.esri.featureLayer({
    url: 'https://services2.arcgis.com/CcI36Pduqd0OR4W9/ArcGIS/rest/services/Bicycle_Routes_Public/FeatureServer/0',
    style: function (feature) {
      var c;
      switch (feature.properties.D_BI_RT_NAME) {
        case 'Bluegrass Bike Tour':
          c = '#377EB8';
          break;
        case 'Cave Country Bike Tour':
          c = '#E41A1C';
          break;
        case 'Kentucky\'s TransAmerica Bike Trail':
          c = '#4DAF4A';
          break;
        case 'Ramblin\' River Tour':
          c = '#984EA3';
          break;
        case 'Underground Railroad':
          c = '#FF7F00';
          break;
        default:
          c = '#C0C0C0';
      }
      return { color: c, opacity: 0.65, weight: 5 };
    }
  }).addTo(map);

  bikePaths.on('mouseout', function (e) {
    document.getElementById('info-pane').innerHTML = 'Hover to Inspect';
  });

  bikePaths.on('mouseover', function (e) {
    document.getElementById('info-pane').innerHTML = e.layer.feature.properties.D_BI_RT_NAME;
  });
</script>

</body>
</html>