Skip to content

Instantly share code, notes, and snippets.

@stevage stevage/index.html
Created Nov 9, 2017

Embed
What would you like to do?
Multi-touch bug demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Multitouch Test</title>
<link rel="stylesheet" href="//necolas.github.io/normalize.css/7.0.0/normalize.css" />
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="maps">
<div id="map-1" class="map"></div>
<div id="map-2" class="map"></div>
<div id="map-3" class="map"></div>
<div id="map-4" class="map"></div>
</div>
<script src="//api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js"></script>
<script src="script.js"></script>
</body>
</html>
/**
* @see https://www.mapbox.com/mapbox-gl-js/api/
*/
class Main {
constructor() {
this.key = 'pk.eyJ1IjoiaW50ZXJhY3RpdmVrbm93bGVkZ2UiLCJhIjoiY2lraW1rNjhoMDRhdnR5ajc3ejhwYmdtdSJ9.UYtOtCLlht6plDXeogbQkQ';
this.init();
}
init() {
mapboxgl.accessToken = this.key;
for (let i = 0; i < 4; i++) {
const key = i + 1;
new mapboxgl.Map({
container: 'map-' + key,
style: 'mapbox://styles/mapbox/satellite-v9',
center: [-134.4197200, 58.3019400],
zoom: 6
});
}
}
}
document.addEventListener('DOMContentLoaded', () => {
new Main();
});
html, body, #maps {
height: 100%;
}
body {
background-color: black;
}
#maps {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
.map {
width: 49%;
height: 49%;
}
#map-1, #map-2 {
transform: scale(-1, -1);
}
.mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right, .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl {
backface-visibility: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.