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

Styling heatmaps

Custom styling of heatmap gradients with the L.heat options. More information about Feature Layers can be found in the L.esri.FeatureLayer documentation.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Styling heatmaps</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>

<!-- Include Leaflet.heat from CDN -->
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>

<!-- Load Heatmap Feature Layer from CDN -->
<script src="https://unpkg.com/esri-leaflet-heatmap@2.0.1"></script>

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

<script>
  var map = L.map('map', {
    maxZoom: 16 // the heatmap plugin needs some help understanding the map's maxZoom
  }).setView([41.759, -88.157], 12);

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

  // new constructor syntax at 2.0.0
  L.esri.Heat.featureLayer({
    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer/0',
    radius: 10,
    gradient: {
      0.2: '#ffffb2',
      0.4: '#fd8d3c',
      0.6: '#fd8d3c',
      0.8: '#f03b20',
      1: '#bd0026'
    }
  }).addTo(map);
</script>

</body>
</html>