<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#map2 { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<div id='map2'></div>
<script>
var style = {
"version": 8,
"name": "Empty",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "template"
},
//"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {},
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "rgba(0,255,0,0.4)"
}
}
]
}
mapboxgl.accessToken = 'pk.eyJ1IjoibGlsZWlqb3JkYW4iLCJhIjoiY2luc2Z1a2UxMTEybnUya2pheDdwZjhxOSJ9._ENu7hjywKHQZMcj9S24vA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: style,
center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat]
zoom: 14 // starting zoom
});
map.on('load', function () {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#333",
"line-width": 8
}
});
});
var style2 = {
"version": 8,
"name": "Empty",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "template"
},
//"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {},
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "rgba(255,255,0,0.4)"
}
}
]
}
mapboxgl.accessToken = 'pk.eyJ1IjoibGlsZWlqb3JkYW4iLCJhIjoiY2luc2Z1a2UxMTEybnUya2pheDdwZjhxOSJ9._ENu7hjywKHQZMcj9S24vA';
var map2 = new mapboxgl.Map({
container: 'map2', // container id
style: style2,
center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat]
zoom: 14 // starting zoom
});
map2.on('load', function () {
map2.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48369693756104 + 0.0009, 37.83381888486939],
[-122.48348236083984 + 0.0009, 37.83317489144141],
[-122.48339653015138 + 0.0009, 37.83270036637107],
[-122.48356819152832 + 0.0009, 37.832056363179625],
[-122.48404026031496 + 0.0009, 37.83114119107971],
[-122.48404026031496 + 0.0009, 37.83049717427869],
[-122.48348236083984 + 0.0009, 37.829920943955045],
[-122.48356819152832 + 0.0009, 37.82954808664175],
[-122.48507022857666 + 0.0009, 37.82944639795659],
[-122.48610019683838 + 0.0009, 37.82880236636284],
[-122.48695850372314 + 0.0009, 37.82931081282506],
[-122.48700141906738 + 0.0009, 37.83080223556934],
[-122.48751640319824 + 0.0009, 37.83168351665737],
[-122.48803138732912 + 0.0009, 37.832158048267786],
[-122.48888969421387 + 0.0009, 37.83297152392784],
[-122.48987674713133 + 0.0009, 37.83263257682617],
[-122.49043464660643 + 0.0009, 37.832937629287755],
[-122.49125003814696 + 0.0009, 37.832429207817725],
[-122.49163627624512 + 0.0009, 37.832564787218985],
[-122.49223709106445 + 0.0009, 37.83337825839438],
[-122.49378204345702 + 0.0009, 37.83368330777276]
]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#111",
"line-width": 6
}
});
map2.on('move',function(){
map.jumpTo({
center: map2.getCenter(),
zoom: map2.getZoom(),
bearing: map2.getBearing(),
pitch: map2.getPitch()
});
})
});
</script>
</body>
</html>
