Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
  <meta charset=utf-8 />
  <title>Simple FeatureLayer</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.3.1/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>
​
    <link rel="stylesheet" href="https://brandonxiang.github.io/leaflet.marker.highlight/index.css"/>
    <script src="https://brandonxiang.github.io/leaflet.marker.highlight/index.js"></script>
​
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.2.1/dist/esri-leaflet.js"></script>
​
​
  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>
​
<div id="map"></div>
​
<script>
  var map = L.map('map').setView([45.526, -122.667], 13);
​
  L.esri.basemapLayer('Streets').addTo(map);
​
  // a Leaflet marker is used by default to symbolize point features.
  var fl = L.esri.featureLayer({
    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'
  }).addTo(map);
​
  fl.on("load", function (e) {
    fl.getFeature(5).enablePermanentHighlight();
    // fl.eachActiveFeature((layer) => {
    //     if (layer.feature || layer instanceof L.Marker) {
    //         layer.enablePermanentHighlight();
    //     }
    // });
  });
</script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jgravoispro
0viewers