Add a custom style to line features using the style
option from the L.esri.
class. For more explanation, visit the Style a feature layer tutorial.
<html>
<head>
<meta charset="utf-8" />
<title>Style lines</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Vector from CDN -->
<script src="https://unpkg.com/esri-leaflet-vector@4.2.5/dist/esri-leaflet-vector.js" crossorigin=""></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</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>
const accessToken = "YOUR_ACCESS_TOKEN";
const map = L.map("map").setView([37.81, -85.85], 7);
L.esri.Vector.vectorBasemapLayer("arcgis/topographic/base", {
token: accessToken
}).addTo(map);
const bikePaths = L.esri
.featureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/kentucky_bicycle_routes/FeatureServer/0",
style: function (feature) {
let 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>