maplibre-gl-leaflet-with-canvas-dash-offset 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/FUNDING.yml +2 -0
- package/.github/workflows/publish.yml +27 -0
- package/.github/workflows/test.yml +27 -0
- package/.travis.yml +6 -0
- package/API.md +43 -0
- package/CHANGELOG.md +145 -0
- package/CONTRIBUTING.md +8 -0
- package/LICENSE +15 -0
- package/README.md +99 -0
- package/debug/README.md +5 -0
- package/debug/maps-concurrent-resizing.html +362 -0
- package/debug/max-latitude-bug-reproduction.html +49 -0
- package/examples/basic.html +52 -0
- package/examples/cluster.html +52 -0
- package/examples/events.html +86 -0
- package/examples/overlay.html +47 -0
- package/leaflet-maplibre-gl.d.ts +20 -0
- package/leaflet-maplibre-gl.js +346 -0
- package/package.json +37 -0
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8"/>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
+
<title>OS Vector Tile | Leaflet</title>
|
|
7
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
|
8
|
+
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.css"/>
|
|
9
|
+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
10
|
+
<script src="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.js"></script>
|
|
11
|
+
<script src="../leaflet-maplibre-gl.js"></script>
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
body {
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
#map {
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 0;
|
|
22
|
+
bottom: 0;
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.leaflet-control-resizer-corner-e,
|
|
27
|
+
.leaflet-control-resizer-corner-s,
|
|
28
|
+
.leaflet-control-resizer-corner-se {
|
|
29
|
+
z-index: 1000;
|
|
30
|
+
position: absolute;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.leaflet-control-resizer-corner-e {
|
|
34
|
+
right: 0;
|
|
35
|
+
height: 100%;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.leaflet-control-resizer-corner-s {
|
|
39
|
+
bottom: 0;
|
|
40
|
+
width: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.leaflet-control-resizer-corner-se {
|
|
44
|
+
right: 0;
|
|
45
|
+
bottom: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
.leaflet-control-resizer-transparent {
|
|
50
|
+
background-color: transparent;
|
|
51
|
+
user-select: none;
|
|
52
|
+
transition: 0.5s;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.leaflet-control-resizer-transparent::after {
|
|
56
|
+
border-color: transparent;
|
|
57
|
+
transition: 0.5s;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.leaflet-control-resizer-opaque,
|
|
61
|
+
.leaflet-control-resizer-transparent:hover,
|
|
62
|
+
.leaflet-control-resizer-transparent-fakedhover {
|
|
63
|
+
background-color: rgba(255, 250, 170, 0.8);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.leaflet-control-resizer-opaque::after,
|
|
67
|
+
.leaflet-control-resizer-transparent:hover::after,
|
|
68
|
+
.leaflet-control-resizer-transparent-fakedhover::after {
|
|
69
|
+
border-color: rgba(85, 85, 85, 0.9);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.leaflet-control-resizer-e {
|
|
73
|
+
width: 25px;
|
|
74
|
+
height: 50px;
|
|
75
|
+
border-top-left-radius: 25px;
|
|
76
|
+
border-bottom-left-radius: 25px;
|
|
77
|
+
cursor: e-resize;
|
|
78
|
+
right: 0;
|
|
79
|
+
top: 50%;
|
|
80
|
+
transform: translateY(-50%);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.leaflet-control-resizer-s {
|
|
84
|
+
width: 50px;
|
|
85
|
+
height: 25px;
|
|
86
|
+
border-top-left-radius: 25px;
|
|
87
|
+
border-top-right-radius: 25px;
|
|
88
|
+
cursor: s-resize;
|
|
89
|
+
left: 50%;
|
|
90
|
+
bottom: 0;
|
|
91
|
+
transform: translateX(-50%);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.leaflet-control-resizer-se {
|
|
95
|
+
width: 35px;
|
|
96
|
+
height: 35px;
|
|
97
|
+
border-top-left-radius: 35px;
|
|
98
|
+
cursor: se-resize;
|
|
99
|
+
right: 0;
|
|
100
|
+
bottom: 0;
|
|
101
|
+
position: absolute;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.leaflet-control-resizer-e::after,
|
|
105
|
+
.leaflet-control-resizer-s::after,
|
|
106
|
+
.leaflet-control-resizer-se::after {
|
|
107
|
+
content: '';
|
|
108
|
+
position: absolute;
|
|
109
|
+
z-index: 999;
|
|
110
|
+
border-width: 1px;
|
|
111
|
+
bottom: 20%;
|
|
112
|
+
right: 20%;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.leaflet-control-resizer-e::after,
|
|
116
|
+
.leaflet-control-resizer-s::after {
|
|
117
|
+
width: 60%;
|
|
118
|
+
height: 60%;
|
|
119
|
+
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.leaflet-control-resizer-se::after {
|
|
123
|
+
width: 40%;
|
|
124
|
+
height: 40%;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.leaflet-control-resizer-e::after,
|
|
128
|
+
.leaflet-control-resizer-se::after {
|
|
129
|
+
border-right-style: solid;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.leaflet-control-resizer-s:after,
|
|
133
|
+
.leaflet-control-resizer-se::after {
|
|
134
|
+
border-bottom-style: solid;
|
|
135
|
+
}
|
|
136
|
+
</style>
|
|
137
|
+
</head>
|
|
138
|
+
<body>
|
|
139
|
+
|
|
140
|
+
<div id="map" style="width:50%; height:50%"></div>
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
<script>
|
|
144
|
+
var L;
|
|
145
|
+
(function (L) {
|
|
146
|
+
if (typeof L === 'undefined') {
|
|
147
|
+
throw new Error('Leaflet must be included first');
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
L.Control.Resizer = L.Control.extend({
|
|
151
|
+
options: {
|
|
152
|
+
direction: 'e', // valid values e, s, se
|
|
153
|
+
onlyOnHover: false,
|
|
154
|
+
updateAlways: true,
|
|
155
|
+
pan: false,
|
|
156
|
+
},
|
|
157
|
+
|
|
158
|
+
_END: {
|
|
159
|
+
mousedown: 'mouseup',
|
|
160
|
+
touchstart: 'touchend',
|
|
161
|
+
pointerdown: 'touchend',
|
|
162
|
+
MSPointerDown: 'touchend'
|
|
163
|
+
},
|
|
164
|
+
|
|
165
|
+
_MOVE: {
|
|
166
|
+
mousedown: 'mousemove',
|
|
167
|
+
touchstart: 'touchmove',
|
|
168
|
+
pointerdown: 'touchmove',
|
|
169
|
+
MSPointerDown: 'touchmove'
|
|
170
|
+
},
|
|
171
|
+
|
|
172
|
+
initialize: function (options) {
|
|
173
|
+
L.Util.setOptions(this, options);
|
|
174
|
+
this._initialOffsetX = 0;
|
|
175
|
+
this._initialOffsetY = 0;
|
|
176
|
+
this.options.position = 'leaflet-control-resizer-corner-' + this.options.direction;
|
|
177
|
+
this.enable();
|
|
178
|
+
},
|
|
179
|
+
|
|
180
|
+
enable: function () {
|
|
181
|
+
this._enabled = true;
|
|
182
|
+
return this;
|
|
183
|
+
},
|
|
184
|
+
|
|
185
|
+
disable: function () {
|
|
186
|
+
this._enabled = false;
|
|
187
|
+
return this;
|
|
188
|
+
},
|
|
189
|
+
|
|
190
|
+
onAdd: function (map) {
|
|
191
|
+
this._prepareLocation(map);
|
|
192
|
+
|
|
193
|
+
var className = 'leaflet-control-resizer';
|
|
194
|
+
var classNameTransp = className + (this.options.onlyOnHover ? '-transparent' : '-opaque');
|
|
195
|
+
var classNameLoc = className + '-' + this.options.direction;
|
|
196
|
+
this._container = L.DomUtil.create('div',
|
|
197
|
+
className + ' ' + classNameTransp + ' ' + classNameLoc,
|
|
198
|
+
map.getContainer());
|
|
199
|
+
var container = this._container;
|
|
200
|
+
|
|
201
|
+
L.DomEvent.on(container, 'mousedown mouseup click touchstart drag', L.DomEvent.stopPropagation);
|
|
202
|
+
|
|
203
|
+
/* IE11 seems to process events in the wrong order, so the only way to prevent map movement while dragging the
|
|
204
|
+
* slider is to disable map dragging when the cursor enters the slider (by the time the mousedown event fires
|
|
205
|
+
* it's too late becuase the event seems to go to the map first, which results in any subsequent motion
|
|
206
|
+
* resulting in map movement even after map.dragging.disable() is called.
|
|
207
|
+
*/
|
|
208
|
+
/*
|
|
209
|
+
L.DomEvent.on(container, 'mouseenter', function (e) { map.dragging.disable(); });
|
|
210
|
+
L.DomEvent.on(container, 'mouseleave', function (e) { map.dragging.enable(); });
|
|
211
|
+
*/
|
|
212
|
+
|
|
213
|
+
L.DomEvent.on(container, 'mousedown touchstart', this._initResize, this);
|
|
214
|
+
|
|
215
|
+
return this._container;
|
|
216
|
+
},
|
|
217
|
+
|
|
218
|
+
onRemove: function (map) {
|
|
219
|
+
L.DomEvent.off(this._container, 'mousedown touchstart', this._initResize, this);
|
|
220
|
+
L.DomEvent.off(this._container, 'mousedown mouseup click touchstart drag', L.DomEvent.stopPropagation);
|
|
221
|
+
},
|
|
222
|
+
|
|
223
|
+
fakeHover: function (ms) {
|
|
224
|
+
var className = 'leaflet-control-resizer-transparent-fakedhover';
|
|
225
|
+
var cont = this._container;
|
|
226
|
+
L.DomUtil.addClass(cont, className);
|
|
227
|
+
setTimeout(function () {
|
|
228
|
+
L.DomUtil.removeClass(cont, className);
|
|
229
|
+
}, ms | 1000);
|
|
230
|
+
},
|
|
231
|
+
|
|
232
|
+
_prepareLocation: function (map) {
|
|
233
|
+
var corners = map._controlCorners;
|
|
234
|
+
var l = 'leaflet-control-resizer-corner-' + this.options.direction;
|
|
235
|
+
var container = map._controlContainer;
|
|
236
|
+
|
|
237
|
+
corners[l] = L.DomUtil.create('div', l, container);
|
|
238
|
+
},
|
|
239
|
+
|
|
240
|
+
_initResize: function (e) {
|
|
241
|
+
if (e._simulated || !this._enabled) {
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
if (this._started) return;
|
|
246
|
+
this._started = true;
|
|
247
|
+
this._moved = false;
|
|
248
|
+
|
|
249
|
+
var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e)
|
|
250
|
+
|
|
251
|
+
L.DomUtil.disableImageDrag();
|
|
252
|
+
L.DomUtil.disableTextSelection();
|
|
253
|
+
|
|
254
|
+
this.fire('down', e);
|
|
255
|
+
|
|
256
|
+
var mapCont = this._map.getContainer();
|
|
257
|
+
this._initialOffsetX = mapCont.offsetWidth + mapCont.offsetLeft - first.clientX;
|
|
258
|
+
this._initialOffsetY = mapCont.offsetHeight + mapCont.offsetTop - first.clientY;
|
|
259
|
+
|
|
260
|
+
L.DomEvent.on(document, this._END[e.type], this._stopResizing, this);
|
|
261
|
+
L.DomEvent.on(this._container, this._END[e.type], this._stopResizing, this);
|
|
262
|
+
|
|
263
|
+
L.DomEvent.on(document, this._MOVE[e.type], this._duringResizing, this);
|
|
264
|
+
},
|
|
265
|
+
|
|
266
|
+
_duringResizing: function (e) {
|
|
267
|
+
if (e._simulated) {
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e)
|
|
272
|
+
|
|
273
|
+
L.DomEvent.preventDefault(e);
|
|
274
|
+
|
|
275
|
+
if (!this._moved) {
|
|
276
|
+
this.fire('dragstart', e);
|
|
277
|
+
}
|
|
278
|
+
this.fire('predrag', e);
|
|
279
|
+
|
|
280
|
+
var mapCont = this._map.getContainer();
|
|
281
|
+
if (this.options.direction.indexOf('e') >= 0) {
|
|
282
|
+
mapCont.style.width = (first.clientX - mapCont.offsetLeft + this._initialOffsetX) + 'px';
|
|
283
|
+
this._moved = true;
|
|
284
|
+
}
|
|
285
|
+
if (this.options.direction.indexOf('s') >= 0) {
|
|
286
|
+
mapCont.style.height = (first.clientY - mapCont.offsetTop + this._initialOffsetY) + 'px';
|
|
287
|
+
this._moved = true;
|
|
288
|
+
}
|
|
289
|
+
this._moved = true;
|
|
290
|
+
|
|
291
|
+
if (this.options.updateAlways) {
|
|
292
|
+
this._map.invalidateSize({pan: this.options.pan});
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
this.fire('drag', e);
|
|
296
|
+
},
|
|
297
|
+
|
|
298
|
+
_stopResizing: function (e) {
|
|
299
|
+
if (e._simulated) {
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
for (var i in this._MOVE) {
|
|
304
|
+
L.DomEvent.off(document, this._MOVE[i], this._duringResizing, this);
|
|
305
|
+
|
|
306
|
+
L.DomEvent.off(document, this._END[i], this._stopResizing, this);
|
|
307
|
+
L.DomEvent.off(this._container, this._END[i], this._stopResizing, this);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
this._map.invalidateSize({pan: this.options.pan});
|
|
311
|
+
|
|
312
|
+
L.DomUtil.enableImageDrag();
|
|
313
|
+
L.DomUtil.enableTextSelection();
|
|
314
|
+
this._started = false;
|
|
315
|
+
this.fire('dragend', e);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
});
|
|
319
|
+
|
|
320
|
+
L.Control.Resizer.include(L.Evented.prototype);
|
|
321
|
+
|
|
322
|
+
L.control.resizer = function (options) {
|
|
323
|
+
return new L.Control.Resizer(options);
|
|
324
|
+
};
|
|
325
|
+
})(L);
|
|
326
|
+
// Initialize the map.
|
|
327
|
+
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
328
|
+
attribution: "Map data © <a href=\"https://openstreetmap.org\" target=\"_blank\">OpenStreetMap</a>"
|
|
329
|
+
});
|
|
330
|
+
|
|
331
|
+
// Load and display vector tile layer on the map.
|
|
332
|
+
|
|
333
|
+
var vector = L.maplibreGL({
|
|
334
|
+
style: 'https://demotiles.maplibre.org/style.json'
|
|
335
|
+
});
|
|
336
|
+
const mapOptions = {
|
|
337
|
+
minZoom: 7,
|
|
338
|
+
maxZoom: 19,
|
|
339
|
+
center: [54.425, -2.968],
|
|
340
|
+
zoom: 14,
|
|
341
|
+
maxBounds: [
|
|
342
|
+
[49.528423, -10.76418],
|
|
343
|
+
[61.331151, 1.9134116]
|
|
344
|
+
],
|
|
345
|
+
attributionControl: false,
|
|
346
|
+
layers: [osm]
|
|
347
|
+
};
|
|
348
|
+
|
|
349
|
+
const map = L.map('map', mapOptions);
|
|
350
|
+
var baseMaps = {
|
|
351
|
+
"OpenStreetMap": osm,
|
|
352
|
+
"OpenStreetMap.Vector": vector
|
|
353
|
+
};
|
|
354
|
+
L.control.layers(baseMaps).addTo(map);
|
|
355
|
+
|
|
356
|
+
L.control.resizer({direction: 'se'}).addTo(map);
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
</script>
|
|
360
|
+
|
|
361
|
+
</body>
|
|
362
|
+
</html>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>WebGL</title>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<style>
|
|
9
|
+
html,
|
|
10
|
+
body,
|
|
11
|
+
#map {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
margin: 0;
|
|
15
|
+
}
|
|
16
|
+
</style>
|
|
17
|
+
|
|
18
|
+
<!-- Leaflet -->
|
|
19
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
|
|
20
|
+
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|
|
21
|
+
|
|
22
|
+
<!-- Maplibre GL -->
|
|
23
|
+
<link href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" rel='stylesheet' />
|
|
24
|
+
<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
|
|
25
|
+
|
|
26
|
+
</head>
|
|
27
|
+
|
|
28
|
+
<body>
|
|
29
|
+
<div id="map"></div>
|
|
30
|
+
|
|
31
|
+
<script src="../leaflet-maplibre-gl.js"></script>
|
|
32
|
+
<script>
|
|
33
|
+
var map = L.map('map').setView([0, 0], 2);
|
|
34
|
+
|
|
35
|
+
L.marker([179, 0])
|
|
36
|
+
.bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
|
|
37
|
+
.addTo(map)
|
|
38
|
+
|
|
39
|
+
L.marker([0, 0])
|
|
40
|
+
.bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
|
|
41
|
+
.addTo(map)
|
|
42
|
+
|
|
43
|
+
var gl = L.maplibreGL({
|
|
44
|
+
style: 'https://demotiles.maplibre.org/style.json'
|
|
45
|
+
}).addTo(map);
|
|
46
|
+
</script>
|
|
47
|
+
</body>
|
|
48
|
+
|
|
49
|
+
</html>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>WebGL</title>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<style>
|
|
9
|
+
html,
|
|
10
|
+
body,
|
|
11
|
+
#map {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
margin: 0;
|
|
15
|
+
}
|
|
16
|
+
</style>
|
|
17
|
+
|
|
18
|
+
<!-- Leaflet -->
|
|
19
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
|
|
20
|
+
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|
|
21
|
+
|
|
22
|
+
<!-- Maplibre GL -->
|
|
23
|
+
<link href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" rel='stylesheet' />
|
|
24
|
+
<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
|
|
25
|
+
|
|
26
|
+
</head>
|
|
27
|
+
|
|
28
|
+
<body>
|
|
29
|
+
<div id="map"></div>
|
|
30
|
+
|
|
31
|
+
<script src="../leaflet-maplibre-gl.js"></script>
|
|
32
|
+
<script>
|
|
33
|
+
var map = L.map('map', {
|
|
34
|
+
maxBounds: [[180, -Infinity], [-180, Infinity]], // restrict bounds to avoid max latitude issues with MapLibre GL
|
|
35
|
+
maxBoundsViscosity: 1, // make the max bounds "solid" so users cannot pan past them
|
|
36
|
+
minZoom: 1 // prevent sync issues at zoom 0
|
|
37
|
+
}).setView([38.912753, -77.032194], 2);
|
|
38
|
+
|
|
39
|
+
L.marker([38.912753, -77.032194])
|
|
40
|
+
.bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
|
|
41
|
+
.addTo(map)
|
|
42
|
+
.openPopup();
|
|
43
|
+
|
|
44
|
+
var gl = L.maplibreGL({
|
|
45
|
+
// get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style
|
|
46
|
+
style: 'https://demotiles.maplibre.org/style.json'
|
|
47
|
+
}).addTo(map);
|
|
48
|
+
|
|
49
|
+
</script>
|
|
50
|
+
</body>
|
|
51
|
+
|
|
52
|
+
</html>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>WebGL</title>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>#map { width: 800px; height: 600px; }</style>
|
|
7
|
+
|
|
8
|
+
<!-- Leaflet -->
|
|
9
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
|
|
10
|
+
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|
|
11
|
+
|
|
12
|
+
<!-- Maplibre GL -->
|
|
13
|
+
<link href="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css" rel='stylesheet' />
|
|
14
|
+
<script src="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"></script>
|
|
15
|
+
|
|
16
|
+
<!-- Leaflet.MarkerCluster -->
|
|
17
|
+
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js'></script>
|
|
18
|
+
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css' rel='stylesheet' />
|
|
19
|
+
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css' rel='stylesheet' />
|
|
20
|
+
|
|
21
|
+
<!-- test data -->
|
|
22
|
+
<script src="https://www.mapbox.com/mapbox.js/assets/data/realworld.388.js"></script>
|
|
23
|
+
</head>
|
|
24
|
+
|
|
25
|
+
<body>
|
|
26
|
+
<div id="map"></div>
|
|
27
|
+
|
|
28
|
+
<script src="../leaflet-maplibre-gl.js"></script>
|
|
29
|
+
<script>
|
|
30
|
+
|
|
31
|
+
var map = L.map('map', {maxZoom: 17}).setView([-37.821, 175.219], 16);
|
|
32
|
+
|
|
33
|
+
var gl = L.maplibreGL({
|
|
34
|
+
// get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style
|
|
35
|
+
style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
|
|
36
|
+
}).addTo(map);
|
|
37
|
+
|
|
38
|
+
var markers = L.markerClusterGroup();
|
|
39
|
+
|
|
40
|
+
for (var i = 0; i < addressPoints.length; i++) {
|
|
41
|
+
var a = addressPoints[i];
|
|
42
|
+
var title = a[2];
|
|
43
|
+
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
|
|
44
|
+
marker.bindPopup(title);
|
|
45
|
+
markers.addLayer(marker);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
map.addLayer(markers);
|
|
49
|
+
|
|
50
|
+
</script>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>WebGL</title>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<style>
|
|
8
|
+
html, body, #map {
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
|
|
15
|
+
<!-- Leaflet -->
|
|
16
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
|
|
17
|
+
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|
|
18
|
+
|
|
19
|
+
<!-- Maplibre GL -->
|
|
20
|
+
<link href="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css" rel='stylesheet' />
|
|
21
|
+
<script src="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"></script>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<div id="map"></div>
|
|
25
|
+
<script src="../leaflet-maplibre-gl.js"></script>
|
|
26
|
+
<script>
|
|
27
|
+
var leafletMap = L.map('map').setView([38.912753, -77.032194], 2);
|
|
28
|
+
|
|
29
|
+
L.marker([38.912753, -77.032194])
|
|
30
|
+
.bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
|
|
31
|
+
.addTo(leafletMap)
|
|
32
|
+
.openPopup();
|
|
33
|
+
|
|
34
|
+
var gl = L.maplibreGL({
|
|
35
|
+
padding: 0.1,
|
|
36
|
+
// get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style
|
|
37
|
+
style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
|
|
38
|
+
interactive: true
|
|
39
|
+
}).addTo(leafletMap);
|
|
40
|
+
|
|
41
|
+
var maplibreMap = gl.getMaplibreMap();
|
|
42
|
+
|
|
43
|
+
maplibreMap.on('load', () => {
|
|
44
|
+
console.log('MAPLIBRE map loaded');
|
|
45
|
+
|
|
46
|
+
// let's see events on maplibre map
|
|
47
|
+
maplibreMap.on('mousemove', () => { console.log('MAPLIBRE mousemove') });
|
|
48
|
+
maplibreMap.on('mouseenter', () => { console.log('MAPLIBRE mouseenter') });
|
|
49
|
+
maplibreMap.on('mouseout', () => { console.log('MAPLIBRE mouseout') });
|
|
50
|
+
maplibreMap.on('mouseleave', () => { console.log('MAPLIBRE mouseleave') });
|
|
51
|
+
maplibreMap.on('mouseover', () => { console.log('MAPLIBRE mouseover') });
|
|
52
|
+
|
|
53
|
+
// let's add some layer and fire events on it
|
|
54
|
+
|
|
55
|
+
maplibreMap.addSource('states', {
|
|
56
|
+
'type': 'geojson',
|
|
57
|
+
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
|
|
58
|
+
});
|
|
59
|
+
maplibreMap.addLayer({
|
|
60
|
+
'id': 'state-fills',
|
|
61
|
+
'type': 'fill',
|
|
62
|
+
'source': 'states',
|
|
63
|
+
'layout': {},
|
|
64
|
+
'paint': {
|
|
65
|
+
'fill-color': '#627BC1',
|
|
66
|
+
'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5 ]
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
maplibreMap.on('mouseenter', 'state-fills', (e) => {console.log('state-fills mouseenter', e) });
|
|
71
|
+
maplibreMap.on('mousemove', 'state-fills', (e) => {console.log('state-fills mousemove', e) });
|
|
72
|
+
maplibreMap.on('mouseout', 'state-fills', (e) => {console.log('state-fills mouseout', e) });
|
|
73
|
+
maplibreMap.on('mouseleave', 'state-fills', (e) => {console.log('state-fills mouseleave', e) });
|
|
74
|
+
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
// now let's see on leaflet map events
|
|
78
|
+
// SPOILER: they are works
|
|
79
|
+
leafletMap.on('mousemove', () => { console.log('LEAFLET mousemove') });
|
|
80
|
+
leafletMap.on('mouseenter', () => { console.log('LEAFLET mouseenter') });
|
|
81
|
+
leafletMap.on('mouseout', () => { console.log('LEAFLET mouseout') });
|
|
82
|
+
leafletMap.on('mouseleave', () => { console.log('LEAFLET mouseleave') });
|
|
83
|
+
leafletMap.on('mouseover', () => { console.log('LEAFLET mouseover') });
|
|
84
|
+
</script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Leaflet debug page</title>
|
|
4
|
+
|
|
5
|
+
<!-- Leaflet -->
|
|
6
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
|
|
7
|
+
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|
|
8
|
+
|
|
9
|
+
<!-- Maplibre GL -->
|
|
10
|
+
<link href="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css" rel='stylesheet' />
|
|
11
|
+
<script src="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"></script>
|
|
12
|
+
<script src="../leaflet-maplibre-gl.js"></script>
|
|
13
|
+
<style>
|
|
14
|
+
html, body, #map {
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
margin: 0;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
|
|
23
|
+
<div id="map"></div>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
var map = new L.Map('map');
|
|
27
|
+
var gl = L.maplibreGL({
|
|
28
|
+
// get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style
|
|
29
|
+
style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
|
|
30
|
+
}).addTo(map);
|
|
31
|
+
|
|
32
|
+
var bounds = new L.LatLngBounds(
|
|
33
|
+
new L.LatLng(40.71222,-74.22655),
|
|
34
|
+
new L.LatLng(40.77394,-74.12544));
|
|
35
|
+
map.fitBounds(bounds);
|
|
36
|
+
var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", bounds, {
|
|
37
|
+
opacity: 0.5,
|
|
38
|
+
interactive: true,
|
|
39
|
+
attribution: '© A.B.B Corp.'
|
|
40
|
+
});
|
|
41
|
+
map.addLayer(overlay);
|
|
42
|
+
overlay.on('dblclick',function (e) {
|
|
43
|
+
console.log('Double click on image.');
|
|
44
|
+
});
|
|
45
|
+
</script>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as L from 'leaflet-with-canvas-dash-offset';
|
|
2
|
+
import { Map as LibreGLMap, MapOptions as LibreGLMapOptions } from 'maplibre-gl';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
declare module 'leaflet-with-canvas-dash-offset' {
|
|
6
|
+
type LeafletMaplibreGLOptions = Omit<LibreGLMapOptions, "container">;
|
|
7
|
+
|
|
8
|
+
class MaplibreGL extends L.Layer {
|
|
9
|
+
constructor(options: LeafletMaplibreGLOptions);
|
|
10
|
+
getMaplibreMap(): LibreGLMap
|
|
11
|
+
getCanvas(): HTMLCanvasElement
|
|
12
|
+
getSize(): L.Point
|
|
13
|
+
getBounds(): L.LatLngBounds
|
|
14
|
+
getContainer(): HTMLDivElement
|
|
15
|
+
getPaneName(): string
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function maplibreGL(options: LeafletMaplibreGLOptions): MaplibreGL;
|
|
19
|
+
|
|
20
|
+
}
|