-
Notifications
You must be signed in to change notification settings - Fork 5
/
leaflet-map.js
62 lines (50 loc) · 2.62 KB
/
leaflet-map.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
(function (root, factory) {
if (typeof module === 'object' && module.exports) {
factory(require('server-components'),
require('server-components-static'),
require('./leaflet-for-server'));
} else {
factory(root.components,
root.componentsStatic,
root.L);
}
}(this, function (components, componentsStatic, leafletOrConstructor) {
var LeafletMapElement = components.newElement();
LeafletMapElement.createdCallback = function (document) {
var L = components.onServer ? leafletOrConstructor(new components.dom.Window(), document) :
leafletOrConstructor;
var leafletContent = componentsStatic.forComponent("leaflet");
var mapContent = componentsStatic.forComponent("leaflet-map");
L.Icon.Default.imagePath = leafletContent.getUrl("images");
componentsStatic.includeCSS(document, mapContent.getUrl("leaflet-map.css"));
componentsStatic.includeCSS(document, leafletContent.getUrl("leaflet.css"));
// Add client-side scripts too, for later potential interactivity
componentsStatic.includeScript(document, "/server-components-for-web.js");
componentsStatic.includeScript(document, leafletContent.getUrl("leaflet.js"));
componentsStatic.includeScript(document, mapContent.getUrl("leaflet-map.js"));
if (components.onServer) {
// Server-side we need to explicitly specify a size to render, since we don't have a window.
this.clientWidth = 500;
this.clientHeight = 500;
}
[].slice.call(this.querySelectorAll(".leaflet-map-pane, .leaflet-control-container"))
.forEach(function (node) { node.remove() });
var lat = this.getAttribute("lat");
var long = this.getAttribute("long");
var zoom = this.getAttribute("zoom");
var options = components.onServer ? { zoomControl: false } : {};
var map = L.map(this, options).setView([lat, long], zoom);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Show tiles immediately (either we're server-side, and we need to get to ready state, or
// we know we've already got the tiles ready from our pre-load, and we don't want a FOUC)
var tiles = [].slice.call(document.querySelectorAll(".leaflet-tile"));
tiles.forEach((tile) => tile.onload());
// Export these properties on the element, so subelements can easily interact with it.
this.L = L;
this.map = map;
};
components.registerElement("leaflet-map", { prototype: LeafletMapElement });
}));