' }];
392 | });
393 |
394 | layer.onRemove(fakeMap);
395 | document.getElementsByClassName.restore();
396 |
397 | expect(utilSpy.calledWith(fakeMap)).to.be.equal(true);
398 | expect(attributionControlSpy.removeAttribution.callCount).to.be.equal(2);
399 | });
400 | });
401 | });
402 |
--------------------------------------------------------------------------------
/spec/VectorTileLayerSpec.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | describe('VectorTileLayer', function () {
4 | // These must be vars (instead of const) due to how the unit tests are run:
5 | const itemId = '1c365daf37a744fbad748b67aa69dac8';
6 | const apikey = 'dcba4321';
7 | const serviceUrl =
8 | 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Microsoft_Building_Footprints/VectorTileServer';
9 | const token = '1234abcd';
10 | let server;
11 |
12 | // for layers hosted in ArcGIS Enterprise instead of ArcGIS Online
13 | const onPremisePortalUrl = 'https://PATH/TO/ARCGIS/ENTERPRISE'; // defaults to https://www.arcgis.com
14 | const onPremiseItemId = '1c365daf37a744fbad748b67aa69dac8';
15 | const onPremiseServiceUrl =
16 | 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Microsoft_Building_Footprints/VectorTileServer';
17 |
18 | beforeEach(function () {
19 | server = sinon.fakeServer.create();
20 | });
21 |
22 | afterEach(function () {
23 | server.restore();
24 | sinon.restore();
25 | });
26 |
27 | it('should have a L.esri.vectorTileLayer alias', function () {
28 | console.log('L.esri.Vector.vectorTileLayer', L.esri.Vector.vectorTileLayer);
29 |
30 | expect(L.esri.Vector.vectorTileLayer(itemId)).to.be.instanceof(
31 | L.esri.Vector.VectorTileLayer
32 | );
33 | });
34 |
35 | it('should save the key from the constructor - itemId', function () {
36 | const layer = L.esri.Vector.vectorTileLayer(itemId);
37 |
38 | expect(layer.options.key).to.equal(itemId);
39 | });
40 |
41 | it('should save the key from the constructor - serviceUrl', function () {
42 | const layer = L.esri.Vector.vectorTileLayer(serviceUrl);
43 |
44 | expect(layer.options.key).to.equal(serviceUrl);
45 | });
46 |
47 | it('should error if no key itemId or serviceUrl', function () {
48 | expect(function () {
49 | L.esri.Vector.vectorTileLayer();
50 | }).to.throw('An ITEM ID or SERVICE URL is required for vectorTileLayer.');
51 |
52 | expect(function () {
53 | L.esri.Vector.vectorTileLayer(false, {});
54 | }).to.throw('An ITEM ID or SERVICE URL is required for vectorTileLayer.');
55 | });
56 |
57 | it('should save the token from the constructor', function () {
58 | const layer = new L.esri.Vector.VectorTileLayer(itemId, {
59 | token: token
60 | });
61 |
62 | expect(layer.options.token).to.equal(token);
63 | });
64 |
65 | it('should save the api key as token from the constructor', function () {
66 | const layer = L.esri.Vector.vectorTileLayer(itemId, {
67 | apikey: apikey
68 | });
69 |
70 | expect(layer.options.token).to.equal(apikey);
71 | });
72 |
73 | it('should default to the "overlayPane"', function () {
74 | const layer = L.esri.Vector.vectorTileLayer(itemId);
75 |
76 | expect(layer.options.pane).to.equal('overlayPane');
77 | });
78 |
79 | it('should let the default pane be changed in the constructor', function () {
80 | const otherPane = 'shadowPane';
81 | const layer = L.esri.Vector.vectorTileLayer(itemId, {
82 | pane: otherPane
83 | });
84 |
85 | expect(layer.options.pane).to.equal(otherPane);
86 | });
87 |
88 | it('should default to ArcGIS Online as the base "portalUrl" for loading the style - itemId', function () {
89 | const layer = L.esri.Vector.vectorTileLayer(itemId);
90 |
91 | expect(layer.options.portalUrl).to.equal('https://www.arcgis.com');
92 | });
93 |
94 | it('should default to ArcGIS Online as the base "portalUrl" for loading the style - serviceUrl', function () {
95 | const layer = L.esri.Vector.vectorTileLayer(serviceUrl);
96 |
97 | expect(layer.options.portalUrl).to.equal('https://www.arcgis.com');
98 | });
99 |
100 | it('should let the base "portalUrl" be changed in the constructor for loading an on-premise style - itemId', function () {
101 | const layer = L.esri.Vector.vectorTileLayer(onPremiseItemId, {
102 | portalUrl: onPremisePortalUrl
103 | });
104 |
105 | expect(layer.options.portalUrl).to.equal(onPremisePortalUrl);
106 | });
107 |
108 | it('should let the base "portalUrl" be changed in the constructor for loading an on-premise style - serviceUrl', function () {
109 | const layer = L.esri.Vector.vectorTileLayer(onPremiseServiceUrl, {
110 | portalUrl: onPremisePortalUrl
111 | });
112 |
113 | expect(layer.options.portalUrl).to.equal(onPremisePortalUrl);
114 | });
115 |
116 | it('should emit load-error for invalid itemID', function (done) {
117 | server.respondWith(
118 | 'GET',
119 | 'https://esri.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db_WRONG/resources/styles/root.json?f=json',
120 | JSON.stringify({
121 | error: {
122 | code: 400,
123 | messageCode: 'CONT_0001',
124 | message: 'Item does not exist or is inaccessible.',
125 | details: []
126 | }
127 | })
128 | );
129 |
130 | server.respondWith(
131 | 'GET',
132 | 'https://esri.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db_WRONG?f=json',
133 | JSON.stringify({
134 | error: {
135 | code: 400,
136 | messageCode: 'CONT_0001',
137 | message: 'Item does not exist or is inaccessible.',
138 | details: []
139 | }
140 | })
141 | );
142 |
143 | const layer = new L.esri.Vector.VectorTileLayer(
144 | '75f4dfdff19e445395653121a95a85db_WRONG',
145 | {
146 | portalUrl: 'https://esri.maps.arcgis.com'
147 | }
148 | );
149 | layer.on('load-error', function (e) {
150 | expect(e.type).to.equal('load-error');
151 | done();
152 | });
153 | server.respond();
154 | server.respond();
155 | });
156 |
157 | it('should emit load-error for bad service url', function (done) {
158 | server.respondWith(
159 | 'GET',
160 | 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Microsoft_Building_Footprints_WRONG/VectorTileServer?f=json',
161 | JSON.stringify({
162 | error: {
163 | code: 404,
164 | message: 'Requested Service not available.',
165 | details: null
166 | }
167 | })
168 | );
169 |
170 | const layer = new L.esri.Vector.VectorTileLayer(
171 | 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Microsoft_Building_Footprints_WRONG/VectorTileServer'
172 | );
173 | layer.on('load-error', function (e) {
174 | expect(e.type).to.equal('load-error');
175 | done();
176 | });
177 | server.respond();
178 | });
179 | });
180 |
--------------------------------------------------------------------------------
/src/EsriLeafletVector.js:
--------------------------------------------------------------------------------
1 | // export version
2 | import packageInfo from '../package.json';
3 | const version = packageInfo.version;
4 | export { version as VERSION };
5 |
6 | export { VectorBasemapLayer, vectorBasemapLayer } from './VectorBasemapLayer';
7 | export { VectorTileLayer, vectorTileLayer } from './VectorTileLayer';
8 | export { EsriUtil as Util } from './Util';
9 | export { MaplibreGLJSLayer, maplibreGLJSLayer, setRTLTextPlugin } from './MaplibreGLLayer';
10 |
--------------------------------------------------------------------------------
/src/MaplibreGLLayer.js:
--------------------------------------------------------------------------------
1 | import {
2 | DomEvent,
3 | DomUtil,
4 | extend,
5 | latLngBounds,
6 | Layer,
7 | setOptions,
8 | Util
9 | } from 'leaflet';
10 | import maplibregl from 'maplibre-gl';
11 |
12 | export const setRTLTextPlugin = (url, callback, deferred) => {
13 | maplibregl.setRTLTextPlugin(url, callback, deferred);
14 | };
15 |
16 | export const MaplibreGLJSLayer = Layer.extend({
17 | options: {
18 | updateInterval: 32,
19 | // How much to extend the overlay view (relative to map size)
20 | // e.g. 0.1 would be 10% of map view in each direction
21 | padding: 0.1,
22 | // whether or not to register the mouse and keyboard
23 | // events on the mapbox overlay
24 | interactive: false,
25 | // set the tilepane as the default pane to draw gl tiles
26 | pane: 'tilePane'
27 | },
28 |
29 | initialize: function (options) {
30 | setOptions(this, options);
31 |
32 | // setup throttling the update event when panning
33 | this._throttledUpdate = Util.throttle(
34 | this._update,
35 | this.options.updateInterval,
36 | this
37 | );
38 | },
39 |
40 | onAdd: function (map) {
41 | if (!this._container) {
42 | this._initContainer();
43 | }
44 |
45 | const paneName = this.getPaneName();
46 | map.getPane(paneName).appendChild(this._container);
47 |
48 | this._initGL();
49 |
50 | this._offset = this._map.containerPointToLayerPoint([0, 0]);
51 |
52 | // work around https://github.com/mapbox/mapbox-gl-leaflet/issues/47
53 | if (map.options.zoomAnimation) {
54 | DomEvent.on(
55 | map._proxy,
56 | DomUtil.TRANSITION_END,
57 | this._transitionEnd,
58 | this
59 | );
60 | }
61 | },
62 |
63 | onRemove: function (map) {
64 | if (this._map._proxy && this._map.options.zoomAnimation) {
65 | DomEvent.off(
66 | this._map._proxy,
67 | DomUtil.TRANSITION_END,
68 | this._transitionEnd,
69 | this
70 | );
71 | }
72 |
73 | const paneName = this.getPaneName();
74 |
75 | map.getPane(paneName).removeChild(this._container);
76 | this._container = null;
77 |
78 | this._glMap.remove();
79 | this._glMap = null;
80 | },
81 |
82 | getEvents: function () {
83 | return {
84 | move: this._throttledUpdate, // sensibly throttle updating while panning
85 | zoomanim: this._animateZoom, // applies the zoom animation to the