BNWrje

BNWrje.markdown

BNWrje

A Pen by ay13 on CodePen.

License.

index.html

<div id='map1'></div>
<div id='map2'></div>
<br />
<button onclick='fit();' id='fit'>fitBounds()</button>
<button onclick='bearing();' id='bearing'>rotateTo()</button>
<button onclick='fly();' id='fly'>flyTo()</button>
<div id="info"></div>

script.js

mapboxgl.accessToken = 'pk.eyJ1IjoiYXkxMyIsImEiOiI2ZmJiZDVkZTM1ZWMxMmZiZmJiMmU3MTMxZTMxZTk4ZiJ9.ch2fDnbgUGaca0058wfUKg';

var map1 = new mapboxgl.Map({
    container: 'map1',
    style: 'https://www.mapbox.com/mapbox-gl-styles/styles/satellite-v7.json',
    center: [36.572529, -121.948594],
    zoom: 15
});

var map2 = new mapboxgl.Map({
    container: 'map2',
    style: 'https://www.mapbox.com/mapbox-gl-styles/styles/satellite-v7.json',
    center: [36.572529, -121.948594],
    zoom: 15
});

var info = document.getElementById('info');

/*map1.on('move', function(e) {
    info.innerHTML = '<p>getBounds: ' + JSON.stringify(map.getBounds()) + '</p><p>getBearing: ' + JSON.stringify(map.getBearing()) + '</p><p>getCenter: ' + JSON.stringify(map.getCenter()) + '</p><p>getZoom: ' + JSON.stringify(map.getZoom()) + '</p><p>top-left: ' + JSON.stringify(map.unproject([0, 0])) + '</p><p>bottom-right: ' + JSON.stringify(map.unproject([320, 568])) + '</p>';
});*/

function fly(){
    map1.flyTo([36.56639555303667, -121.94451521556768],17.179312727141824,-156.49999999999997);
    map2.flyTo([36.56639555303667, -121.94451521556768],17.179312727141824,-156.49999999999997);
};

function bearing() {
    map1.rotateTo(-156.49999999999997);
    map2.rotateTo(-156.49999999999997);
};

function fit() {
    /*map.setBearing(-156.49999999999997);*/
    map1.fitBounds([
        [
            36.56531533944553, -121.9447569665632
        ],
        [
            36.5674757515217, -121.94427346457215
        ]
    ]);
    
    map2.fitBounds([
        [
            36.56531533944553, -121.9447569665632
        ],
        [
            36.5674757515217, -121.94427346457215
        ]
    ]);
    
    /*map.rotateTo(-156.49999999999997);*/
    //map.setBearing(90);
    /*html2canvas(document.getElementByTagName('canvas')[0]).then(function(canvas) {
    document.body.appendChild(canvas);
});*/
    /*var c = document.getElementsByClassName('mapboxgl-canvas')[0];
    var imgContainer = document.getElementById('img-holder');
    
    imgContainer.appendChild(Canvas2Image.convertToPNG(c, 320, 480));*/
}

map1.addControl(new mapboxgl.Navigation());
map2.addControl(new mapboxgl.Navigation());

scripts

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.7.0/mapbox-gl.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67595/html2canvas.js"></script>
<script src="https://rawgit.com/hongru/canvas2image/master/canvas2image.js"></script>

style.css

body {
    margin:0; 
    padding:0; 
}
#map1 {
    display: inline-block;
    position:relative;
    top:0;
    bottom:0;
    width:320px;
    height: 568px;
    margin: 20px;
}

#map2 {
    display: inline-block;
    position:relative;
    top:0;
    bottom:0;
    width:320px;
    height: 320px;
    margin: 20px;
}

button {
    width: 10vh;
    height: 40px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #ee8a65;
}

#info {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 60vw;
    padding: 20px;
    background: white;
    max-height: 50vh;
    display: none;
}

styles

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.7.0/mapbox-gl.css" rel="stylesheet" />