dianaow · September 12, 2020 04:50
diff --git a/index.html b/index.html
 <html>
  <head>
    <title>Using deck.gl with Google Maps</title>

    <script src="https://d3js.org/d3.v5.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
    <script defer src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initMap"></script>
    <style type="text/css">
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        position: relative;
      }
      #map {
        width: 100%;
        height: 100%; // do not forget to declare the height of the map div
      }
      #tooltip {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background-color: white;
        visibility: visible;
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <div id='map'></div>
    <div id='tooltip'><div>
  </body>

  <script type="text/javascript">

    const {DeckGL, ScatterplotLayer, HeatmapLayer, GoogleMapsOverlay} = deck;

    function initMap() {

      d3.json("data.json").then(function(data){

        function initHeatmapLayer(){
          return new HeatmapLayer({
            data,
            id: 'heatmap-layer',
            getPosition: d => [+d.lon, +d.lat],
            getWeight: 1,
            colorRange: [[1, 152, 189, 255], [73, 227, 206, 255], [216, 254, 181, 255], [254, 237, 177, 255],[254, 173, 84, 255],[209, 55, 78, 255]],
            radiusPixels: 20,
            intensity: 1.2,
            threshold: 0.03
          })
        }

        function initScatterLayer(){
          return new ScatterplotLayer({
            id: 'scatter-plot',
            data,
            getPosition: d => [+d.lon, +d.lat],
            getFillColor: [1, 152, 189, 255],
            //getRadius: 500,
            radiusScale: 1,
            radiusMaxPixels: 10,
            radiusMinPixels: 5,
            opacity: 0.5,
            pickable: true,
            //onHover: info => showTooltip(info),
            onClick: info => showTooltip(info)
          })  
        }

        const map = new google.maps.Map(document.getElementById('map'), {
          center: { lat: 1.35, lng: 103.84 },
          zoom: 12
        })

        //https://medium.com/vis-gl/using-deck-gl-with-google-maps-9c868d18e3cd
        const deckgl = new GoogleMapsOverlay({
          layers: [
            initHeatmapLayer()
          ],
          controller: true
        });

        deckgl.setMap(map)

        map.addListener("zoom_changed", event => {
          const zoom = map.getZoom() // in Google Maps, the zoom_changed event is fired only once when zoom happens, and the map.getZoom method only returns the target (integer) zoom level. This means there’s no way for deck.gl to stay synchronized with Google’s transition animation between zoom levels.
          d3.select('#tooltip').style('visibility', 'hidden')
          if(zoom > 14){
            deckgl.setProps({layers: [initScatterLayer()]});
          } else {
            deckgl.setProps({layers: [initHeatmapLayer()]});
          }   
        });

        function showTooltip(info){
          d3.select('#tooltip')
            .style('top', info.y)
            .style('left', info.x)
            .style('visibility', 'visible')
            .html(`<p>${info.object.town}</p><p>${info.object.address}</p>`)
        }

      })

  }

  </script>
 </html>
	<html>
	<head>
	<title>Using deck.gl with Google Maps</title>

	<script src="https://d3js.org/d3.v5.min.js" type="text/javascript"></script>
	<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
	<script defer src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initMap"></script>
	<style type="text/css">
	body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	position: relative;
	}
	#map {
	width: 100%;
	height: 100%; // do not forget to declare the height of the map div
	}
	#tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: white;
	visibility: visible;
	padding: 5px;
	}
	</style>
	</head>

	<body>
	<div id='map'></div>
	<div id='tooltip'><div>
	</body>

	<script type="text/javascript">

	const {DeckGL, ScatterplotLayer, HeatmapLayer, GoogleMapsOverlay} = deck;

	function initMap() {

	d3.json("data.json").then(function(data){

	function initHeatmapLayer(){
	return new HeatmapLayer({
	data,
	id: 'heatmap-layer',
	getPosition: d => [+d.lon, +d.lat],
	getWeight: 1,
	colorRange: [[1, 152, 189, 255], [73, 227, 206, 255], [216, 254, 181, 255], [254, 237, 177, 255],[254, 173, 84, 255],[209, 55, 78, 255]],
	radiusPixels: 20,
	intensity: 1.2,
	threshold: 0.03
	})
	}

	function initScatterLayer(){
	return new ScatterplotLayer({
	id: 'scatter-plot',
	data,
	getPosition: d => [+d.lon, +d.lat],
	getFillColor: [1, 152, 189, 255],
	//getRadius: 500,
	radiusScale: 1,
	radiusMaxPixels: 10,
	radiusMinPixels: 5,
	opacity: 0.5,
	pickable: true,
	//onHover: info => showTooltip(info),
	onClick: info => showTooltip(info)
	})
	}

	const map = new google.maps.Map(document.getElementById('map'), {
	center: { lat: 1.35, lng: 103.84 },
	zoom: 12
	})

	//https://medium.com/vis-gl/using-deck-gl-with-google-maps-9c868d18e3cd
	const deckgl = new GoogleMapsOverlay({
	layers: [
	initHeatmapLayer()
	],
	controller: true
	});

	deckgl.setMap(map)

	map.addListener("zoom_changed", event => {
	const zoom = map.getZoom() // in Google Maps, the zoom_changed event is fired only once when zoom happens, and the map.getZoom method only returns the target (integer) zoom level. This means there’s no way for deck.gl to stay synchronized with Google’s transition animation between zoom levels.
	d3.select('#tooltip').style('visibility', 'hidden')
	if(zoom > 14){
	deckgl.setProps({layers: [initScatterLayer()]});
	} else {
	deckgl.setProps({layers: [initHeatmapLayer()]});
	}
	});

	function showTooltip(info){
	d3.select('#tooltip')
	.style('top', info.y)
	.style('left', info.x)
	.style('visibility', 'visible')
	.html(`<p>${info.object.town}</p><p>${info.object.address}</p>`)
	}

	})

	}

	</script>
	</html>