brsbl-zz · May 25, 2020 17:06
diff --git a/bundle.js b/bundle.js
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 const syncMove = require('@mapbox/mapbox-gl-sync-move');


 mapboxgl.accessToken = 'pk.eyJ1IjoiYnJzYmwiLCJhIjoiY2phYmxrZ2VnMDB6aDJ6cGxpeDhhZHNrYyJ9.M73MEVN66tbuq0ATBxqIDQ';

 const lr = new mapboxgl.Map({
    container: 'lr', // container id
    style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9,
    hash: true,
    logoPosition: 'bottom-right'
 });

 const ul = new mapboxgl.Map({
    container: 'ul', // container id
    style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9,
    hash: true,
    attributionControl: false,
    logoPosition: 'top-left'
 });

 const ur = new mapboxgl.Map({
    container: 'ur', // container id
    style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9,
    hash: true,
    attributionControl: false
 });

 const ll = new mapboxgl.Map({
    container: 'll', // container id
    style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9,
    hash: true,
    attributionControl: false // starting zoom
 });

 syncMove(ul, ur, ll, lr);

 },{"@mapbox/mapbox-gl-sync-move":2}],2:[function(require,module,exports){
 function moveToMapPosition (master, clones) {
  var center = master.getCenter();
  var zoom = master.getZoom();
  var bearing = master.getBearing();
  var pitch = master.getPitch();

  clones.forEach(function (clone) {
    clone.jumpTo({
      center: center,
      zoom: zoom,
      bearing: bearing,
      pitch: pitch
    });
  });
 }

 // Sync movements of two maps.
 //
 // All interactions that result in movement end up firing
 // a "move" event. The trick here, though, is to
 // ensure that movements don't cycle from one map
 // to the other and back again, because such a cycle
 // - could cause an infinite loop
 // - prematurely halts prolonged movements like
 //   double-click zooming, box-zooming, and flying
 function syncMaps () {
  var maps;
  var argLen = arguments.length;
  if (argLen === 1) {
    maps = arguments[0];
  } else {
    maps = [];
    for (var i = 0; i < argLen; i++) {
      maps.push(arguments[i]);
    }
  }

  // Create all the movement functions, because if they're created every time
  // they wouldn't be the same and couldn't be removed.
  var fns = [];
  maps.forEach(function (map, index) {
    fns[index] = sync.bind(null, map, maps.filter(function (o, i) { return i !== index; }));
  });

  function on () {
    maps.forEach(function (map, index) {
      map.on('move', fns[index]);
    });
  }

  function off () {
    maps.forEach(function (map, index) {
      map.off('move', fns[index]);
    });
  }

  // When one map moves, we turn off the movement listeners
  // on all the maps, move it, then turn the listeners on again
  function sync (master, clones) {
    off();
    moveToMapPosition(master, clones);
    on();
  }

  on();
 }

 module.exports = syncMaps;

 },{}]},{},[1]);
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset='utf-8' />
    <title>Frorschach</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.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #ul { position:absolute; top:0; left: 0; width:50%; height: 50%}
        #ur { position:absolute; top:0; right: 0; width:50%; height: 50%}
        #ll { position:absolute; bottom:0; left: 0; width:50%; height: 50%}
        #lr { position:absolute; bottom:0; right: 0; width:50%; height: 50%}
        .right {
          -moz-transform: scaleX(-1);
          -o-transform: scaleX(-1);
          -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
          filter: FlipH;
          -ms-filter: "FlipH";
        }
        .bottom-left {
          -moz-transform: scaleY(-1);
          -o-transform: scaleY(-1);
          -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
          filter: FlipW;
          -ms-filter: "FlipW";
        }
        .bottom-right {
          -moz-transform: scale(-1, -1);
          -o-transform: scale(-1, -1);
          -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
          filter: FlipW;
          -ms-filter: "FlipW";
          -ms-filter: "FlipH";
        }


    </style>
 </head>
 <body>
 <div id='lr' ></div>
 <div id='ur' class='bottom-left'></div>
 <div id='ll' class='right' ></div>
 <div id='ul' class='bottom-right'></div>

 <script src=bundle.js>
 </script>

 </body>
 </html>
	(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n\|\|r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
	const syncMove = require('@mapbox/mapbox-gl-sync-move');


	mapboxgl.accessToken = 'pk.eyJ1IjoiYnJzYmwiLCJhIjoiY2phYmxrZ2VnMDB6aDJ6cGxpeDhhZHNrYyJ9.M73MEVN66tbuq0ATBxqIDQ';

	const lr = new mapboxgl.Map({
	container: 'lr', // container id
	style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
	center: [-74.50, 40], // starting position [lng, lat]
	zoom: 9,
	hash: true,
	logoPosition: 'bottom-right'
	});

	const ul = new mapboxgl.Map({
	container: 'ul', // container id
	style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
	center: [-74.50, 40], // starting position [lng, lat]
	zoom: 9,
	hash: true,
	attributionControl: false,
	logoPosition: 'top-left'
	});

	const ur = new mapboxgl.Map({
	container: 'ur', // container id
	style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
	center: [-74.50, 40], // starting position [lng, lat]
	zoom: 9,
	hash: true,
	attributionControl: false
	});

	const ll = new mapboxgl.Map({
	container: 'll', // container id
	style: 'mapbox://styles/brsbl/cjo2p4xjq55b12rp6yihgdcs5', // stylesheet location
	center: [-74.50, 40], // starting position [lng, lat]
	zoom: 9,
	hash: true,
	attributionControl: false // starting zoom
	});

	syncMove(ul, ur, ll, lr);

	},{"@mapbox/mapbox-gl-sync-move":2}],2:[function(require,module,exports){
	function moveToMapPosition (master, clones) {
	var center = master.getCenter();
	var zoom = master.getZoom();
	var bearing = master.getBearing();
	var pitch = master.getPitch();

	clones.forEach(function (clone) {
	clone.jumpTo({
	center: center,
	zoom: zoom,
	bearing: bearing,
	pitch: pitch
	});
	});
	}

	// Sync movements of two maps.
	//
	// All interactions that result in movement end up firing
	// a "move" event. The trick here, though, is to
	// ensure that movements don't cycle from one map
	// to the other and back again, because such a cycle
	// - could cause an infinite loop
	// - prematurely halts prolonged movements like
	// double-click zooming, box-zooming, and flying
	function syncMaps () {
	var maps;
	var argLen = arguments.length;
	if (argLen === 1) {
	maps = arguments[0];
	} else {
	maps = [];
	for (var i = 0; i < argLen; i++) {
	maps.push(arguments[i]);
	}
	}

	// Create all the movement functions, because if they're created every time
	// they wouldn't be the same and couldn't be removed.
	var fns = [];
	maps.forEach(function (map, index) {
	fns[index] = sync.bind(null, map, maps.filter(function (o, i) { return i !== index; }));
	});

	function on () {
	maps.forEach(function (map, index) {
	map.on('move', fns[index]);
	});
	}

	function off () {
	maps.forEach(function (map, index) {
	map.off('move', fns[index]);
	});
	}

	// When one map moves, we turn off the movement listeners
	// on all the maps, move it, then turn the listeners on again
	function sync (master, clones) {
	off();
	moveToMapPosition(master, clones);
	on();
	}

	on();
	}

	module.exports = syncMaps;

	},{}]},{},[1]);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Frorschach</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.46.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#ul { position:absolute; top:0; left: 0; width:50%; height: 50%}
	#ur { position:absolute; top:0; right: 0; width:50%; height: 50%}
	#ll { position:absolute; bottom:0; left: 0; width:50%; height: 50%}
	#lr { position:absolute; bottom:0; right: 0; width:50%; height: 50%}
	.right {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	}
	.bottom-left {
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipW;
	-ms-filter: "FlipW";
	}
	.bottom-right {
	-moz-transform: scale(-1, -1);
	-o-transform: scale(-1, -1);
	-webkit-transform: scale(-1, -1);
	transform: scale(-1, -1);
	filter: FlipW;
	-ms-filter: "FlipW";
	-ms-filter: "FlipH";
	}


	</style>
	</head>
	<body>
	<div id='lr' ></div>
	<div id='ur' class='bottom-left'></div>
	<div id='ll' class='right' ></div>
	<div id='ul' class='bottom-right'></div>

	<script src=bundle.js>
	</script>

	</body>
	</html>