Skip to content

Commit 01ea2c1

Browse files
w8rw8r
authored
Implemented padding, bumped libs (#97)
1 parent 720d0c4 commit 01ea2c1

File tree

3 files changed

+39
-54
lines changed

3 files changed

+39
-54
lines changed

‎examples/basic.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@
1313
</style>
1414

1515
<!-- Leaflet -->
16-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
17-
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
16+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
17+
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
1818

1919
<!-- Mapbox GL -->
20-
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css" rel='stylesheet' />
21-
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js"></script>
20+
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css" rel='stylesheet' />
21+
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js"></script>
2222

2323
</head>
2424

‎examples/cluster.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
<style>#map { width: 800px; height: 600px; }</style>
77

88
<!-- Leaflet -->
9-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
10-
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
10+
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
1111

1212
<!-- Mapbox GL -->
13-
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css" rel='stylesheet' />
14-
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js"></script>
13+
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css" rel='stylesheet' />
14+
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js"></script>
1515

1616
<!-- Leaflet.MarkerCluster -->
1717
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.4/leaflet.markercluster.js'></script>

‎leaflet-mapbox-gl.js

+31-46
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
}(this, function (L, mapboxgl) {
1313
L.MapboxGL = L.Layer.extend({
1414
options: {
15-
updateInterval: 32
15+
updateInterval: 32,
16+
// How much to extend the overlay view (relative to map size)
17+
// e.g. 0.15 would be 15% of map view in each direction
18+
padding: 0.15
1619
},
1720

1821
initialize: function (options) {
@@ -24,45 +27,8 @@
2427
throw new Error('You should provide a Mapbox GL access token as a token option.');
2528
}
2629

27-
/**
28-
* Create a version of `fn` that only fires once every `time` millseconds.
29-
*
30-
* @param {Function} fn the function to be throttled
31-
* @param {number} time millseconds required between function calls
32-
* @param {*} context the value of `this` with which the function is called
33-
* @returns {Function} debounced function
34-
* @private
35-
*/
36-
var throttle = function (fn, time, context) {
37-
var lock, args, wrapperFn, later;
38-
39-
later = function () {
40-
// reset lock and call if queued
41-
lock = false;
42-
if (args) {
43-
wrapperFn.apply(context, args);
44-
args = false;
45-
}
46-
};
47-
48-
wrapperFn = function () {
49-
if (lock) {
50-
// called too soon, queue to call later
51-
args = arguments;
52-
53-
} else {
54-
// call and lock until later
55-
fn.apply(context, arguments);
56-
setTimeout(later, time);
57-
lock = true;
58-
}
59-
};
60-
61-
return wrapperFn;
62-
};
63-
6430
// setup throttling the update event when panning
65-
this._throttledUpdate = throttle(L.Util.bind(this._update, this), this.options.updateInterval);
31+
this._throttledUpdate = L.Util.throttle(this._update, this.options.updateInterval, this);
6632
},
6733

6834
onAdd: function (map) {
@@ -102,12 +68,21 @@
10268
};
10369
},
10470

71+
_getSize: function () {
72+
return this._map.getSize().multiplyBy(1 + this.options.padding * 2);
73+
},
74+
10575
_initContainer: function () {
10676
var container = this._glContainer = L.DomUtil.create('div', 'leaflet-gl-layer');
10777

108-
var size = this._map.getSize();
78+
var size = this._getSize();
79+
var offset = this._map.getSize().multiplyBy(this.options.padding);
10980
container.style.width = size.x + 'px';
11081
container.style.height = size.y + 'px';
82+
83+
var topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
84+
85+
L.DomUtil.setPosition(container, topLeft);
11186
},
11287

11388
_initGL: function () {
@@ -147,10 +122,11 @@
147122
return;
148123
}
149124

150-
var size = this._map.getSize(),
125+
var size = this._getSize(),
151126
container = this._glContainer,
152127
gl = this._glMap,
153-
topLeft = this._map.containerPointToLayerPoint([0, 0]);
128+
offset = this._map.getSize().multiplyBy(this.options.padding),
129+
topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
154130

155131
L.DomUtil.setPosition(container, topLeft);
156132

@@ -191,10 +167,19 @@
191167

192168
// borrowed from L.ImageOverlay https://github.com/Leaflet/Leaflet/blob/master/src/layer/ImageOverlay.js#L139-L144
193169
_animateZoom: function (e) {
194-
var scale = this._map.getZoomScale(e.zoom),
195-
offset = this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), e.zoom, e.center);
196-
197-
L.DomUtil.setTransform(this._glMap._actualCanvas, offset.subtract(this._offset), scale);
170+
var scale = this._map.getZoomScale(e.zoom);
171+
var padding = this._map.getSize().multiplyBy(this.options.padding * scale);
172+
var viewHalf = this._getSize()._divideBy(2);
173+
// corrections for padding (scaled), adapted from
174+
// https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L1490-L1508
175+
var topLeft = this._map.project(e.center, e.zoom)
176+
._subtract(viewHalf)
177+
._add(this._map._getMapPanePos()
178+
.add(padding))._round();
179+
var offset = this._map.project(this._map.getBounds().getNorthWest(), e.zoom)
180+
._subtract(topLeft);
181+
182+
L.DomUtil.setTransform(this._glMap._actualCanvas, offset.subtract(this._offset), scale);
198183
},
199184

200185
_zoomStart: function (e) {

0 commit comments

Comments
 (0)