diff --git a/src/layer.js b/src/layer.js index cfb9629dc..a38824276 100644 --- a/src/layer.js +++ b/src/layer.js @@ -126,7 +126,7 @@ export class MapLayer extends HTMLElement { } new Promise((resolve, reject) => { this.addEventListener( - 'changestyle', + 'map-changestyle', function (e) { e.stopPropagation(); this.src = e.detail.src; @@ -200,9 +200,6 @@ export class MapLayer extends HTMLElement { this.src = e.detail.href; } else { console.log(e); - this.dispatchEvent( - new CustomEvent('error', { detail: { target: this } }) - ); } }); } diff --git a/src/map-extent.js b/src/map-extent.js index 0aa6bdbf1..2ea1f3d2a 100644 --- a/src/map-extent.js +++ b/src/map-extent.js @@ -68,6 +68,7 @@ export class MapExtent extends HTMLElement { this._handleChange(); this._calculateBounds(); this._layerControlCheckbox.checked = newValue !== null; + this.dispatchEvent(new CustomEvent('map-change')); break; case 'opacity': if (oldValue !== newValue) { diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 6eb7a2d63..28818e2ba 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -612,19 +612,6 @@ export class MapViewer extends HTMLElement { _setUpEvents() { this.addEventListener('drop', this._dropHandler, false); this.addEventListener('dragover', this._dragoverHandler, false); - this.addEventListener( - 'change', - function (e) { - if (e.target.tagName === 'LAYER-') { - this.dispatchEvent( - new CustomEvent('layerchange', { - details: { target: this, originalEvent: e } - }) - ); - } - }, - false - ); this.parentElement.addEventListener('keyup', function (e) { if ( @@ -663,7 +650,7 @@ export class MapViewer extends HTMLElement { 'locationfound', function (e) { this.dispatchEvent( - new CustomEvent('maplocationfound', { + new CustomEvent('map-locationfound', { detail: { latlng: e.latlng, accuracy: e.accuracy } }) ); @@ -674,7 +661,7 @@ export class MapViewer extends HTMLElement { 'locationerror', function (e) { this.dispatchEvent( - new CustomEvent('locationerror', { detail: { error: e.message } }) + new CustomEvent('map-locationerror', { detail: { error: e.message } }) ); }, this @@ -688,22 +675,6 @@ export class MapViewer extends HTMLElement { }, this ); - this._map.on( - 'preclick', - function (e) { - this.dispatchEvent( - new CustomEvent('preclick', { - detail: { - lat: e.latlng.lat, - lon: e.latlng.lng, - x: e.containerPoint.x, - y: e.containerPoint.y - } - }) - ); - }, - this - ); this._map.on( 'click', function (e) { @@ -837,7 +808,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('movestart', { detail: { target: this } }) + new CustomEvent('map-movestart', { detail: { target: this } }) ); }, this @@ -847,7 +818,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('move', { detail: { target: this } }) + new CustomEvent('map-move', { detail: { target: this } }) ); }, this @@ -868,7 +839,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomstart', { detail: { target: this } }) + new CustomEvent('map-zoomstart', { detail: { target: this } }) ); }, this @@ -878,7 +849,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoom', { detail: { target: this } }) + new CustomEvent('map-zoom', { detail: { target: this } }) ); }, this @@ -888,7 +859,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomend', { detail: { target: this } }) + new CustomEvent('map-zoomend', { detail: { target: this } }) ); }, this diff --git a/src/mapml/layers/Crosshair.js b/src/mapml/layers/Crosshair.js index 67848530b..2205f967d 100644 --- a/src/mapml/layers/Crosshair.js +++ b/src/mapml/layers/Crosshair.js @@ -13,11 +13,7 @@ export var Crosshair = L.Layer.extend({ map.isFocused = false; this._isQueryable = false; - map.on( - 'layerchange layeradd layerremove overlayremove', - this._toggleEvents, - this - ); + map.on('layeradd layerremove overlayremove', this._toggleEvents, this); map.on('popupopen', this._isMapFocused, this); L.DomEvent.on( map._container, @@ -30,10 +26,7 @@ export var Crosshair = L.Layer.extend({ }, onRemove: function (map) { - map.off( - 'layerchange layeradd layerremove overlayremove', - this._toggleEvents - ); + map.off('layeradd layerremove overlayremove', this._toggleEvents); map.off('popupopen', this._isMapFocused); L.DomEvent.off( map._container, diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js index 670f5ca54..887e55111 100644 --- a/src/mapml/layers/MapMLLayer.js +++ b/src/mapml/layers/MapMLLayer.js @@ -481,7 +481,7 @@ export var MapMLLayer = L.Layer.extend({ var changeStyle = function (e) { L.DomEvent.stop(e); layer._layerEl.dispatchEvent( - new CustomEvent('changestyle', { + new CustomEvent('map-changestyle', { detail: { src: e.target.getAttribute('data-href') } diff --git a/src/mapml/layers/TemplatedTileLayer.js b/src/mapml/layers/TemplatedTileLayer.js index c34b77698..006dbc16f 100644 --- a/src/mapml/layers/TemplatedTileLayer.js +++ b/src/mapml/layers/TemplatedTileLayer.js @@ -85,7 +85,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({ L.DomUtil.addClass(tileGroup, 'leaflet-tile'); this._template.linkEl.dispatchEvent( - new CustomEvent('tileloadstart', { + new CustomEvent('map-tileloadstart', { detail: { x: coords.x, y: coords.y, diff --git a/src/web-map.js b/src/web-map.js index 3c2bb4553..417fbf189 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -657,19 +657,6 @@ export class WebMap extends HTMLMapElement { _setUpEvents() { this.addEventListener('drop', this._dropHandler, false); this.addEventListener('dragover', this._dragoverHandler, false); - this.addEventListener( - 'change', - function (e) { - if (e.target.tagName === 'LAYER-') { - this.dispatchEvent( - new CustomEvent('layerchange', { - details: { target: this, originalEvent: e } - }) - ); - } - }, - false - ); let mapEl = this; this.parentElement.addEventListener('keyup', function (e) { @@ -710,7 +697,7 @@ export class WebMap extends HTMLMapElement { 'locationfound', function (e) { this.dispatchEvent( - new CustomEvent('maplocationfound', { + new CustomEvent('map-locationfound', { detail: { latlng: e.latlng, accuracy: e.accuracy } }) ); @@ -721,7 +708,7 @@ export class WebMap extends HTMLMapElement { 'locationerror', function (e) { this.dispatchEvent( - new CustomEvent('locationerror', { detail: { error: e.message } }) + new CustomEvent('map-locationerror', { detail: { error: e.message } }) ); }, this @@ -735,22 +722,6 @@ export class WebMap extends HTMLMapElement { }, this ); - this._map.on( - 'preclick', - function (e) { - this.dispatchEvent( - new CustomEvent('preclick', { - detail: { - lat: e.latlng.lat, - lon: e.latlng.lng, - x: e.containerPoint.x, - y: e.containerPoint.y - } - }) - ); - }, - this - ); this._map.on( 'click', function (e) { @@ -884,7 +855,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('movestart', { detail: { target: this } }) + new CustomEvent('map-movestart', { detail: { target: this } }) ); }, this @@ -894,7 +865,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('move', { detail: { target: this } }) + new CustomEvent('map-move', { detail: { target: this } }) ); }, this @@ -915,7 +886,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomstart', { detail: { target: this } }) + new CustomEvent('map-zoomstart', { detail: { target: this } }) ); }, this @@ -925,7 +896,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoom', { detail: { target: this } }) + new CustomEvent('map-zoom', { detail: { target: this } }) ); }, this @@ -935,7 +906,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomend', { detail: { target: this } }) + new CustomEvent('map-zoomend', { detail: { target: this } }) ); }, this diff --git a/test/e2e/api/locateApi.test.js b/test/e2e/api/locateApi.test.js index a2af63e66..e46f24195 100644 --- a/test/e2e/api/locateApi.test.js +++ b/test/e2e/api/locateApi.test.js @@ -39,12 +39,12 @@ test.describe('Locate API Test', () => { expect(locateAPI_lng).toEqual('-73.568'); }); - test('Testing maplocationfound event', async () => { + test('Testing map-locationfound event', async () => { const latlng = await page.evaluate(() => { const viewer = document.querySelector('body > mapml-viewer'); return new Promise((resolve) => { viewer.addEventListener( - 'maplocationfound', + 'map-locationfound', (e) => { resolve(e.detail.latlng); }, @@ -57,18 +57,18 @@ test.describe('Locate API Test', () => { expect(latlng.lng).toEqual(-73.56766530667056); }); - test('Testing locationerror event', async () => { + test('Testing map-locationerror event', async () => { const error = await page.evaluate(() => { const viewer = document.querySelector('body > mapml-viewer'); return new Promise((resolve) => { viewer.addEventListener( - 'locationerror', + 'map-locationerror', (e) => { resolve(e.detail.error); }, { once: true } ); - const errorEvent = new CustomEvent('locationerror', { + const errorEvent = new CustomEvent('map-locationerror', { detail: { error: 'Your location could not be determined.' } }); viewer.dispatchEvent(errorEvent); diff --git a/test/e2e/layers/clientTemplatedTileLayer.html b/test/e2e/layers/clientTemplatedTileLayer.html index 80de6982a..2b04b7cb5 100644 --- a/test/e2e/layers/clientTemplatedTileLayer.html +++ b/test/e2e/layers/clientTemplatedTileLayer.html @@ -38,7 +38,7 @@