Squashed 'seatmap-webapi/' content from commit 02d4bf7
git-subtree-dir: seatmap-webapi git-subtree-split: 02d4bf7404b8fcb788502ca45c813946b6c4f5b9
This commit is contained in:
zino
85
examples/clients/leaflet/geojson-layer.js
Normal file
85
examples/clients/leaflet/geojson-layer.js
Normal file
@@ -0,0 +1,85 @@
|
||||
/* global L */
|
||||
(function() {
|
||||
|
||||
L.GeoJSONLayer = L.GeoJSON.extend({
|
||||
|
||||
includes: L.Evented.prototype,
|
||||
|
||||
url: null,
|
||||
map: null,
|
||||
|
||||
//
|
||||
// Leaflet layer methods
|
||||
//
|
||||
initialize(url, options) {
|
||||
this.url = url;
|
||||
L.GeoJSON.prototype.initialize.call(this, [], options);
|
||||
},
|
||||
|
||||
onAdd(map) {
|
||||
L.GeoJSON.prototype.onAdd.call(this, map);
|
||||
this.map = map;
|
||||
map.on('moveend zoomend refresh', this._reloadMap, this);
|
||||
this._reloadMap();
|
||||
},
|
||||
|
||||
onRemove(map) {
|
||||
map.off('moveend zoomend refresh', this._reloadMap, this);
|
||||
this.map = null;
|
||||
L.GeoJSON.prototype.onRemove.call(this, map);
|
||||
},
|
||||
|
||||
//
|
||||
// Custom methods
|
||||
//
|
||||
_reloadMap: function() {
|
||||
if (this.map) {
|
||||
var url = this._expandUrl(this.url);
|
||||
this._ajaxRequest('GET', url, false, this._updateLayers.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
_expandUrl: function(template) {
|
||||
var bbox = this.map.getBounds();
|
||||
var southWest = bbox.getSouthWest();
|
||||
var northEast = bbox.getNorthEast();
|
||||
var bboxStr = bbox.toBBoxString();
|
||||
var coords = {
|
||||
lat1: southWest.lat,
|
||||
lon1: southWest.lng,
|
||||
lat2: northEast.lat,
|
||||
lon2: northEast.lng,
|
||||
bbox: bboxStr
|
||||
};
|
||||
return L.Util.template(template, coords);
|
||||
},
|
||||
|
||||
_ajaxRequest: function(method, url, data, callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open(method, url, true);
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState === 4 && request.status === 200) {
|
||||
callback(JSON.parse(request.responseText));
|
||||
}
|
||||
};
|
||||
if (data) {
|
||||
request.setRequestHeader('Content-type', 'application/json');
|
||||
request.send(JSON.stringify(data));
|
||||
} else {
|
||||
request.send();
|
||||
}
|
||||
return request;
|
||||
},
|
||||
|
||||
_updateLayers: function(geoData) {
|
||||
this.clearLayers();
|
||||
this.addData(geoData);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
L.geoJSONLayer = function (url, options) {
|
||||
return new L.GeoJSONLayer(url, options);
|
||||
};
|
||||
|
||||
})();
|
||||
144
examples/clients/leaflet/geojson-tile-layer.js
Normal file
144
examples/clients/leaflet/geojson-tile-layer.js
Normal file
@@ -0,0 +1,144 @@
|
||||
/* global L */
|
||||
(function() {
|
||||
|
||||
L.GeoJSONTileLayer = L.GridLayer.extend({
|
||||
|
||||
includes: L.Evented.prototype,
|
||||
|
||||
url: null,
|
||||
map: null,
|
||||
layer: null,
|
||||
features: null,
|
||||
cache: null,
|
||||
|
||||
//
|
||||
// Leaflet layer methods
|
||||
//
|
||||
initialize(url, options) {
|
||||
this.url = url;
|
||||
this.layer = new L.GeoJSON(null, options);
|
||||
this.features = {};
|
||||
this.cache = {};
|
||||
L.GridLayer.prototype.initialize.call(this, options);
|
||||
},
|
||||
|
||||
createTile(coords, done) {
|
||||
var tile = L.DomUtil.create('div', 'leaflet-tile');
|
||||
tile.style['box-shadow'] = 'inset 0 0 2px #f00';
|
||||
var url = this._expandUrl(this.url, coords);
|
||||
if (this.cache[coords]) {
|
||||
done.call(this);
|
||||
} else {
|
||||
this._ajaxRequest('GET', url, false, this._updateCache.bind(this, done, coords));
|
||||
}
|
||||
return tile;
|
||||
},
|
||||
|
||||
onAdd(map) {
|
||||
L.GridLayer.prototype.onAdd.call(this, map);
|
||||
map.addLayer(this.layer);
|
||||
this.map = map;
|
||||
map.on('zoomanim', this._onZoomAnim.bind(this));
|
||||
this.on('loading', this._onLoading.bind(this));
|
||||
this.on('tileload', this._onTileLoad.bind(this));
|
||||
this.on('tileunload', this._onTileUnLoad.bind(this));
|
||||
},
|
||||
|
||||
onRemove(map) {
|
||||
this.off('tileunload', this._onTileUnLoad.bind(this));
|
||||
this.off('tileload', this._onTileLoad.bind(this));
|
||||
this.off('loading', this._onLoading.bind(this));
|
||||
map.off('zoomanim', this._onZoomAnim.bind(this));
|
||||
this.map = null;
|
||||
map.removeLayer(this.layer)
|
||||
L.GridLayer.prototype.onRemove.call(this, map);
|
||||
},
|
||||
|
||||
//
|
||||
// Custom methods
|
||||
//
|
||||
_expandUrl: function(template, coords) {
|
||||
return L.Util.template(template, coords);
|
||||
},
|
||||
|
||||
_updateTiles: function() {
|
||||
this.layer.clearLayers();
|
||||
this.features = {};
|
||||
for (var coords in this.cache) {
|
||||
if (this.cache.hasOwnProperty(coords)) {
|
||||
this._drawTile(coords);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_drawTile(coords) {
|
||||
var geoData = this.cache[coords];
|
||||
if (geoData.type == 'FeatureCollection'){
|
||||
geoData = geoData.features;
|
||||
}
|
||||
for (var i=0;i<geoData.length;i++) {
|
||||
var id = geoData[i].id;
|
||||
if (!this.features[id]) {
|
||||
this.layer.addData(geoData[i]);
|
||||
this.features[id] = true;
|
||||
}
|
||||
}
|
||||
if (!this.cache[coords]) {
|
||||
this.cache[coords] = geoData;
|
||||
}
|
||||
},
|
||||
|
||||
_updateCache: function(done, coords, geoData) {
|
||||
this.cache[coords] = geoData;
|
||||
done.call(this);
|
||||
},
|
||||
|
||||
_ajaxRequest: function(method, url, data, callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open(method, url, true);
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState === 4 && request.status === 200) {
|
||||
callback(JSON.parse(request.responseText));
|
||||
}
|
||||
};
|
||||
if (data) {
|
||||
request.setRequestHeader('Content-type', 'application/json');
|
||||
request.send(JSON.stringify(data));
|
||||
} else {
|
||||
request.send();
|
||||
}
|
||||
return request;
|
||||
},
|
||||
|
||||
_onZoomAnim: function (e) {
|
||||
var zoom = e.zoom;
|
||||
if ((this.options.maxZoom && zoom > this.options.maxZoom) ||
|
||||
(this.options.minZoom && zoom < this.options.minZoom)) {
|
||||
this.map.removeLayer(this.layer);
|
||||
this.cache = {};
|
||||
this.layer.clearLayers();
|
||||
} else {
|
||||
this._updateTiles();
|
||||
this.map.addLayer(this.layer);
|
||||
}
|
||||
},
|
||||
|
||||
_onLoading: function (e) {
|
||||
this._updateTiles();
|
||||
},
|
||||
|
||||
_onTileLoad: function (e) {
|
||||
this._drawTile(e.coords);
|
||||
},
|
||||
|
||||
_onTileUnLoad: function (e) {
|
||||
delete this.cache[e.coords]
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
L.geoJSONTileLayer = function (url, options) {
|
||||
return new L.GeoJSONTileLayer(url, options);
|
||||
};
|
||||
|
||||
})();
|
||||
37
examples/clients/leaflet/vanilla.html
Normal file
37
examples/clients/leaflet/vanilla.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Quick Start - Leaflet</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
|
||||
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
|
||||
<script src="geojson-layer.js"></script>
|
||||
<script src="geojson-tile-layer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mapid" style="width: 600px; height: 400px;"></div>
|
||||
<script>
|
||||
var mymap = L.map('mapid').setView([20, 30], 3);
|
||||
|
||||
L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
|
||||
maxZoom: 18,
|
||||
}).addTo(mymap);
|
||||
|
||||
L.geoJSONLayer('http://localhost:8000/api.php/geojson/users?bbox={bbox}', {
|
||||
maxZoom: 18,
|
||||
}).addTo(mymap);
|
||||
|
||||
L.geoJSONTileLayer('http://localhost:8000/src/geojson/countries?filter=id,lt,3&tile={z},{x},{y}', {
|
||||
minZoom: 3,
|
||||
maxZoom: 18,
|
||||
}).addTo(mymap);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user