joshuahouston/L.Map.Sync.js

## README.md

      
    Raw
  

              README.md
            
          
    When I found a tilelayer containing old OpenStreetMap coastline data hosted by CloudMade, I wanted to make a visual comparing the coastlines from the time before I joined OpenStreetMap (Sep. 2013) to now. The coastline layer of OpenStreetMap is the most infrequently updated layer, so you don't get the pleasure of the immediate results as you would editing other layers. Mapbox updates this layer even more infrequently than OpenStreetMap (January 2015 was the most recent, the time before that was April 2014).
This was done with the help of @turban's blog post and his Leaflet.Sync plugin.

  
## 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('http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/997/256/{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.03, -135.33],
    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;
    }
});

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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('http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/997/256/{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.03, -135.33],
	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;
	}
	});