I have two deck.gl containers that zoom/pan separately. I want to be able to zoom/pan both of them when I zoom/pan on either. Right now the containers are in two instantiations of deck.gl, but I’m not sure how I can create multiple containers in one new Deck.gl({})
Looking at the documentation, I see how this is possible with React, but I don’t want to use React.
Any thoughts?
Here is my code, and it’s also in a Plunkr– where you’ll find the geojson.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #dad6d0;
}
#ca1 {
height: 100vh;
width: 50vw;
position: absolute;
left: 0;
}
#ca2 {
height: 100vh;
width: 50vw;
position: absolute;
left: 50vw;
}
</style>
</head>
<body>
<div id='ca1'></div>
<div id='ca2'></div>
<script src='https://unpkg.com/deck.gl@latest/dist.min.js'></script>
<script>
const { DeckGL, GeoJsonLayer, MapController } = deck;
const ca_state = new GeoJsonLayer({
data: 'california.json',
id: 'castate',
opacity: 1,
getLineWidth: 23,
stroked: true,
filled: true,
getFillColor: f => [10, 67, 216],
getLineColor: f => [25, 95, 190],
pickable: false
});
const ca_state2 = new GeoJsonLayer({
data: 'california.json',
id: 'castate',
opacity: 1,
getLineWidth: 23,
stroked: true,
filled: true,
getFillColor: f => [218, 207, 82],
getLineColor: f => [25, 95, 190],
pickable: false
});
class MyMapController extends MapController {
handleEvent(event) {
if (event.type === 'pan') {
// do something
} else {
console.log('custom map controller')
super.handleEvent(event);
}
}
}
new DeckGL({
mapStyle: '',
initialViewState: {
latitude: 37.337840681197655,
longitude: -120.19909774948918,
zoom: 5.5,
maxZoom: 16,
minZoom: 0,
pitch: 0
},
controller: MyMapController,
container: 'ca1',
layers: [ca_state],
});
new DeckGL({
mapStyle: '',
initialViewState: {
latitude: 37.337840681197655,
longitude: -120.19909774948918,
zoom: 5.5,
maxZoom: 16,
minZoom: 3,
pitch: 0
},
controller: MyMapController,
container: 'ca2',
layers: [ca_state2],
});
</script>
</body>
</html>