Change Content - Javascript

Change html element content using pure javascript author(s): Deepu Mohan Puthrote (WarFox)

HTML

<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css">
<div id="map" style="width:100%;height:100%"></div>

CSS

html,body {
  width: 100%;
  height:100%;
  padding:0;
  margin:0;
}

JavaScript

window.addEventListener("load",()=>{
    console.log("Loading Map")
    map = new maplibregl.Map({
        container: "map",
        style: {
        version: 8,
        sources: {
            basemap: {
            type: "raster",
            tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
            tileSize: 256,
            maxzoom: 12,
            }
        },
        layers: [
            {
            id: "basemap",
            source: "basemap",
            type: "raster",
            },
        ]
        },

        minZoom: 3,
        center: [-73.83709027567721, 40.7013093283345], // starting position [lng, lat]
        zoom: 8, // starting zoom
        bearing: 0,
        pitch: 0,
        maxPitch:50
    });

    var heatmapLayer=new deck.HeatmapLayer({
      data:"https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/screen-grid/uber-pickup-locations.json",
      id: 'heatmap-layer',
      pickable: false,
      getPosition: d => [d[0], d[1]],
      getWeight: d => d[2],
      radiusPixels:15,
      intensity:1,
      threshold:0.05
    })

    let deckOverlay=new deck.MapboxOverlay({
        interleaved:true,
        layers:[heatmapLayer]
    })
    map.addControl(deckOverlay);
})