Skip to content

Instantly share code, notes, and snippets.

@han-tun

han-tun/index.html

Forked from dianaow/index.html
Created September 14, 2020 02:09
Show Gist options
  • Save han-tun/627efbe6b533f1ec10b66167902d02c2 to your computer and use it in GitHub Desktop.
Save han-tun/627efbe6b533f1ec10b66167902d02c2 to your computer and use it in GitHub Desktop.
Download ZIP
Using deck.gl with Mapbox GL JS (Method 2): Using deck.gl layers as custom Mapbox layers
Raw
index.html
<html>
<head>
<title>Using deck.gl with Mapbox GL JS (Method 2)</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 src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style type="text/css">
body {
width: 100vw;
height: 100vh;
margin: 0;
position: relative;
}
#map {
width: 100%;
height: 100%;
}
.panel {
background-color: white;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#tooltip {
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: white;
visibility: visible;
padding: 5px;
}
</style>
</head>
<body>
<div class='panel'>
<input type="radio" id="satellite" name="map_style" value="satellite">
<label for="satellite">Satellite</label><br>
<input type="radio" id="street" name="map_style" value="street">
<label for="street">Street</label><br>
</div>
<div id='map'></div>
<div id='tooltip'><div>
</body>
<script type="text/javascript">
const {MapboxLayer, ScatterplotLayer, HeatmapLayer} = deck;
d3.json("data.json").then(function(data){
const heatmapLayer =
new MapboxLayer({
data,
type: HeatmapLayer,
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,
visibility: 'visible'
})
const scatterLayer =
new MapboxLayer({
data,
id: 'scatterplot-layer',
type: ScatterplotLayer,
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),
visibility: 'none'
})
mapboxgl.accessToken = 'pk.eyJ1IjoiZGlhbmFtZW93IiwiYSI6ImNqcmh4aWJnOTIxemI0NXA0MHYydGwzdm0ifQ.9HakB25m0HLT-uDY2yat7A'
const map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/dark-v9',
container: 'map',
center: [103.84, 1.35],
zoom: 11,
pitch: 0,
bearing: 0,
renderWorldCopies: 1
});
map.on('load', () => {
const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === "symbol").id;
map.addLayer(heatmapLayer, firstLabelLayerId);
map.addLayer(scatterLayer);
});
map.on('zoom', function () {
d3.select('#tooltip').style('visibility', 'hidden')
if (map.getZoom() > 14) {
map.setLayoutProperty('scatterplot-layer', 'visibility', 'visible');
map.setLayoutProperty('heatmap-layer', 'visibility', 'none');
} else {
map.setLayoutProperty('heatmap-layer', 'visibility', 'visible');
map.setLayoutProperty('scatterplot-layer', 'visibility', 'none');
}
});
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>`)
}
//document.querySelector("#satellite").addEventListener('click',function (){
//map.setStyle('mapbox://styles/mapbox/satellite-v9?optimize=true')
//})
//document.querySelector("#street").addEventListener('click',function (){
//map.setStyle('mapbox://styles/mapbox/streets-v11?optimize=true')
//})
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment