index.html

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<h1>Srinagar Containment Zones Heatmap</h1>
Page Last updated on: 24/04/2021
See <a href="https://github.com/test2a/SrinagarContainmentHeatmap/blob/main/Changelog.md">Changelog</a> for details
<div id="map"></div>

<link href="leaflet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leaflet-heatmap@1.0.0/leaflet-heatmap.js"></script>
<script type="text/javascript">

axios.get('https://api.github.com/gists/0f92d2a840f4193a6237f57344d3cbf0')
  .then(response => {
  
  	let sales = JSON.parse(response.data.files['sxr.json'].content)
    
    // Create the base Leaflet layer (the map itself)
    let baseLayer = L.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>'
      }
    )

    // Configure and create the heatmap.js layer
    let cfg = {
      "radius": 45,
      "useLocalExtrema": true,
      valueField: 'price'
    }

    let heatmapLayer = new HeatmapOverlay(cfg)

    // Determine min/max (from sales.js file) for the heatmap.js plugin
    let min = Math.min(...sales.map(sale => sale.value))
    let max = Math.max(...sales.map(sale => sale.value))

    // Create the overall Leaflet map using the two layers we created
    let propertyHeatMap = new L.Map('map', {
      center: new L.LatLng(34.0868, 74.8461),
      zoom: 12,
      layers: [baseLayer, heatmapLayer]
    })

    // Add data (from sales.js file) to the heatmap.js layer
    heatmapLayer.setData({
      min: min,
      max: max,
      data: sales
    });
  
  
  })
    .catch(error => {
    console.log(error)
  })
</script>


<style>
#map
{
  width: 100%;
  height: 100%;
  border: solid 1px black;
}
</style>