joshuahouston/L.Map.Sync.js

## README.md

      
    Raw
  

              README.md
            
          
    Comparing the coastlines of OpenStreetMap and Mapbox.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<title>Coastlines</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="L.Map.Sync.js"></script>
<style>
 html, body { width: 100%; height: 100%; margin: 0; }
        #map1, #map2 { width: 49.5%; height: 100%; }
        #map1 { float: left; }
        #map2 { float: right; }
</style>
</head>
<body>
<div id="map1"></div>
<div id="map2"></div>
<script>

var layer1 = L.tileLayer('https://{s}.tiles.mapbox.com/v3/{'examples.map-i875mjb7'}/{z}/{x}/{y}.png');
var layer2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');

var map1 = L.map('map1', {
    layers: [layer1],
    center: [57.086, -134.794],
    zoom: 15
});

var map2 = L.map('map2', {
    layers: [layer2],
    center: [57.03, -135.33],
    zoom: 15,
    zoomControl: false
});

map1.sync(map2);
map2.sync(map1);


</script>
</body>
</html>

## L.Map.Sync.js
/*
 * Extends L.Map to synchronize two maps
 */

L.Map = L.Map.extend({
    sync: function (map) {

        this._syncMap = L.extend(map, {
            setView: function (center, zoom, forceReset, sync) {
                if (!sync) {
                    this._syncMap.setView(center, zoom, forceReset, true);
                }
                return L.Map.prototype.setView.call(this, center, zoom, forceReset);
            },

            panBy: function (offset, duration, easeLinearity, sync) {
                if (!sync) {
                    this._syncMap.panBy(offset, duration, easeLinearity, true);
                }
                return L.Map.prototype.panBy.call(this, offset, duration, easeLinearity);
            },

            _onResize: function (evt, sync) {
                if (!sync) {
                    this._syncMap._onResize(evt, true);
                }
                return L.Map.prototype._onResize.call(this, evt);
            }
        });

        this.on('zoomend', function() {
            this._syncMap.setView(this.getCenter(), this.getZoom(), false, true);
        }, this);


        this.dragging._draggable._updatePosition = function () {
            L.Draggable.prototype._updatePosition.call(this);
            L.DomUtil.setPosition(map.dragging._draggable._element, this._newPos);
            this.invalidateSize();
            map.invalidateSize();
        };

        this.touchZoom._updateOnMove = function () {
            L.Map.TouchZoom.prototype._updateOnMove.call(this);
            map._tileBg.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(this._delta) + ' ' + L.DomUtil.getScaleString(this._scale, this._startCenter);
        };

        return this;
    }
});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Coastlines</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
	<script src="L.Map.Sync.js"></script>
	<style>
	html, body { width: 100%; height: 100%; margin: 0; }
	#map1, #map2 { width: 49.5%; height: 100%; }
	#map1 { float: left; }
	#map2 { float: right; }
	</style>
	</head>
	<body>
	<div id="map1"></div>
	<div id="map2"></div>
	<script>

	var layer1 = L.tileLayer('https://{s}.tiles.mapbox.com/v3/{'examples.map-i875mjb7'}/{z}/{x}/{y}.png');
	var layer2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');

	var map1 = L.map('map1', {
	layers: [layer1],
	center: [57.086, -134.794],
	zoom: 15
	});

	var map2 = L.map('map2', {
	layers: [layer2],
	center: [57.03, -135.33],
	zoom: 15,
	zoomControl: false
	});

	map1.sync(map2);
	map2.sync(map1);


	</script>
	</body>
	</html>
	/*
	* Extends L.Map to synchronize two maps
	*/

	L.Map = L.Map.extend({
	sync: function (map) {

	this._syncMap = L.extend(map, {
	setView: function (center, zoom, forceReset, sync) {
	if (!sync) {
	this._syncMap.setView(center, zoom, forceReset, true);
	}
	return L.Map.prototype.setView.call(this, center, zoom, forceReset);
	},

	panBy: function (offset, duration, easeLinearity, sync) {
	if (!sync) {
	this._syncMap.panBy(offset, duration, easeLinearity, true);
	}
	return L.Map.prototype.panBy.call(this, offset, duration, easeLinearity);
	},

	_onResize: function (evt, sync) {
	if (!sync) {
	this._syncMap._onResize(evt, true);
	}
	return L.Map.prototype._onResize.call(this, evt);
	}
	});

	this.on('zoomend', function() {
	this._syncMap.setView(this.getCenter(), this.getZoom(), false, true);
	}, this);


	this.dragging._draggable._updatePosition = function () {
	L.Draggable.prototype._updatePosition.call(this);
	L.DomUtil.setPosition(map.dragging._draggable._element, this._newPos);
	this.invalidateSize();
	map.invalidateSize();
	};

	this.touchZoom._updateOnMove = function () {
	L.Map.TouchZoom.prototype._updateOnMove.call(this);
	map._tileBg.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(this._delta) + ' ' + L.DomUtil.getScaleString(this._scale, this._startCenter);
	};

	return this;
	}
	});