Skip to content

Instantly share code, notes, and snippets.

@alamsal
Created March 3, 2016 20:22
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save alamsal/0c63af5fc06b43dc3b53 to your computer and use it in GitHub Desktop.
ESRI Leaflet Dynamic Map Layer With Map Tiles
<!DOCTYPE html>
<html>
<head>
<title>ESRI Leaflet Dynamic Map Layer With Map Tiles</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>
<div id="map-non-tiled" style="width: 600px; height: 400px"></div>
<div id="map-tiled" style="width: 600px; height: 400px"></div>
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0-rc.7/esri-leaflet.js"></script>
<script>
(function (factory) {
//define an AMD module that relies on 'leaflet'
if (typeof define === 'function' && define.amd) {
define(['leaflet', 'esri-leaflet'], function (L, EsriLeaflet) {
return factory(L, EsriLeaflet);
});
//define a common js module that relies on 'leaflet'
} else if (typeof module === 'object' && typeof module.exports === 'object') {
module.exports = factory(require('leaflet'), require('esri-leaflet'));
}
if(typeof window !== 'undefined' && window.L){
factory(window.L, L.esri);
}
}(function (L, EsriLeaflet) {
EsriLeaflet.Layers.TiledDynamicMapLayer = L.TileLayer.extend({
options: L.Util.extend({}, EsriLeaflet.Layers.DynamicMapLayer.prototype.options),
_requests: [],
/**
* @constructor
* @extends {L.TileLayer}
* @param {String} url
* @param {Object} options
*/
initialize: function(url, options) {
L.TileLayer.prototype.initialize.call(this, url, options);
EsriLeaflet.DynamicMapLayer.prototype.initialize.call(this, url, options);
},
/**
* @param {L.Map} map
*/
onAdd: function(map) {
if (map.options.crs && map.options.crs.code) {
var sr = map.options.crs.code.split(':')[1];
this.options.bboxSR = sr;
this.options.imageSR = sr;
}
map.on('zoomstart zoomend', this._onZoomChange, this);
return L.TileLayer.prototype.onAdd.call(this, map);
},
/**
* @param {L.Map} map
*/
onRemove: function(map) {
map.off('zoomstart zoomend', this._onZoomChange, this);
L.TileLayer.prototype.onRemove.call(this, map);
},
/**
* @param {Array.<Number>|Array.<String>} layers
* @return {L.esri.Layers.TiledDynamicMapLayer} self
*/
setLayers: function(layers) {
this._reset();
return EsriLeaflet.Layers.DynamicMapLayer.prototype.setLayers.call(this, layers);
},
/**
* @param {Array.<Object>} layerDefs
* @return {L.esri.Layers.TiledDynamicMapLayer} self
*/
setLayerDefs: function(layerDefs) {
this._reset();
return EsriLeaflet.Layers.DynamicMapLayer.prototype.setLayerDefs.call(this, layerDefs);
},
/**
* @param {Object} timeOptions
* @return {L.esri.Layers.TiledDynamicMapLayer} self
*/
setTimeOptions: function(timeOptions) {
this._reset();
return EsriLeaflet.Layers.DynamicMapLayer.prototype.setTimeOptions.call(this, timeOptions);
},
/**
* Set/unset zooming flag to avoid unneeded requests
* @param {Object} e
*/
_onZoomChange: function(e) {
this._zooming = (e.type === 'zoomstart');
},
/**
* @param {L.LatLngBounds} bounds
* @param {L.Point} size
* @return {Object}
*/
_buildExportParams: function(bounds, size) {
var ne = this._map.options.crs.project(bounds._northEast);
var sw = this._map.options.crs.project(bounds._southWest);
//ensure that we don't ask ArcGIS Server for a taller image than we have actual map displaying
var top = this._map.latLngToLayerPoint(bounds._northEast);
var bottom = this._map.latLngToLayerPoint(bounds._southWest);
if (top.y > 0 || bottom.y < size.y) {
size.y = bottom.y - top.y;
}
var params = {
bbox: [sw.x, sw.y, ne.x, ne.y].join(','),
size: size.x + ',' + size.y,
dpi: 96,
format: this.options.format,
transparent: this.options.transparent,
bboxSR: this.options.bboxSR,
imageSR: this.options.imageSR
};
if (this.options.layers) {
params.layers = 'show:' + this.options.layers.join(',');
}
if (this.options.layerDefs) {
params.layerDefs = JSON.stringify(this.options.layerDefs);
}
if (this.options.timeOptions) {
params.timeOptions = JSON.stringify(this.options.timeOptions);
}
if (this.options.from && this.options.to) {
params.time = this.options.from.valueOf() + ',' + this.options.to.valueOf();
}
if (this._service.options.token) {
params.token = this._service.options.token;
}
return params;
},
/**
* @param {Object} tile
* @param {L.Point} tilePoint
*/
_loadTile: function(tile, tilePoint) {
tile._layer = this;
tile.onload = this._tileOnLoad;
tile.onerror = this._tileOnError;
this._adjustTilePoint(tilePoint);
this.getTileUrl(tilePoint, function(err, url) {
tile.src = url;
});
this.fire('tileloadstart', {
tile: tile
});
},
/**
* Async request tile url
* @param {L.Point} tilePoint
* @param {Function} callback
*/
getTileUrl: function(tilePoint, callback) { // (Point, Number) -> String
var map = this._map,
tileSize = this.options.tileSize,
nwPoint = tilePoint.multiplyBy(tileSize),
sePoint = nwPoint.add([tileSize, tileSize]);
var bounds = new L.LatLngBounds(map.unproject(nwPoint, tilePoint.z),
map.unproject(sePoint, tilePoint.z));
var size = new L.Point(this.options.tileSize, this.options.tileSize);
var params = this._buildExportParams(bounds, size);
this._requestExport(params, bounds, callback);
},
/**
* Export call, json or image straight awy
* @param {Object} params
* @param {L.LatLngBounds} bounds
* @param {Function} callback
*/
_requestExport: function(params, bounds, callback) {
if (this.options.f === 'json') {
this._requests.push(this._service.get('export', params, function(error, response) {
callback(null, response.href, bounds);
}, this));
} else {
params.f = 'image';
callback(null, this.options.url + 'export' + L.Util.getParamString(params), bounds);
}
},
/**
* Bounds or params changed
*/
_update: function() {
if (this._map && this._map._animatingZoom) {
return;
}
L.TileLayer.prototype._update.call(this);
}
});
(function(methods) {
for (var i = 0, len = methods.length; i < len; i++) {
EsriLeaflet.Layers.TiledDynamicMapLayer.prototype[methods[i]] =
EsriLeaflet.Layers.DynamicMapLayer.prototype[methods[i]];
}
})([
/** @borrows L.esri.Layers.DynamicMapLayer.prototype.getLayers as getLayers */
'getLayers',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype.getLayerDefs as getLayerDefs */
'getLayerDefs',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype.getTimeOptions as getTimeOptions */
'getTimeOptions',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype.metadata as metadata */
'metadata',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype.query as query */
'query',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype.identify as identify */
'identify',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype.find as find */
'find',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype._getPopupData as _getPopupData */
'_getPopupData',
/** @borrows L.esri.Layers.DynamicMapLayer.prototype._propagateEvent as _propagateEvent */
'_propagateEvent'
]);
// factory
EsriLeaflet.tiledDynamicMapLayer = function(url, options) {
return new EsriLeaflet.Layers.TiledDynamicMapLayer(url, options);
};
return EsriLeaflet;
}));
//# sourceMappingURL=esri-leaflet-dynamic-tilelayer-src.js.map
</script>
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
// create map1
var map1 = new L.Map('map-non-tiled');
L.tileLayer(osmUrl, {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map1);
// set the map1's starting view
map1.setView( new L.LatLng(39.828328,-98.57941), 4 );
// create map2
var map2 = new L.Map('map-tiled');
L.tileLayer(osmUrl, {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);
// set the map2's starting view
map2.setView( new L.LatLng(39.828328,-98.57941), 4 );
var urlLayer = "http://maps1.arcgisonline.com/ArcGIS/rest/services/USA_Federal_Lands/MapServer";
var layer1 =L.esri.dynamicMapLayer(urlLayer,{
layers:0,
bboxSR:102100,
imageSR:102100,
format:'png24',
transparent:true,
f:'image',
tiled:true,
zoom:8
});
var layer2 = L.esri.tiledDynamicMapLayer(urlLayer,{
layers:0,
bboxSR:102100,
imageSR:102100,
format:'png24',
transparent:true,
f:'image',
tiled:true,
zoom:8
});
layer1.addTo(map1);
layer2.addTo(map2);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment