Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

make map move when setters used for lat/lon/zoom #796

Closed
wants to merge 5 commits into from
Closed

make map move when setters used for lat/lon/zoom #796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
84c5ba8
make map move when setters used for lat/lon/zoom
AliyanH Mar 13, 2023
46e5f44
move code to attributeChangedCallback
AliyanH Mar 13, 2023
b2ac860
modify lon/lat/zoom getters and setters
AliyanH Mar 14, 2023
87fbca6
add tests for lat/lon/zoom getters and setters
AliyanH Mar 14, 2023
42c7a1e
remove lat/lon/zoom from observedAttributes array
AliyanH Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 11 additions & 26 deletions src/mapml-viewer.js
View file
Open in desktop
AliyanH marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { MapCaption } from './map-caption.js';

export class MapViewer extends HTMLElement {
static get observedAttributes() {
return ['lat', 'lon', 'zoom', 'projection', 'width', 'height', 'controls', 'static', 'controlslist'];
return ['projection', 'width', 'height', 'controls', 'static', 'controlslist'];
}
// see comments below regarding attributeChangedCallback vs. getter/setter
// usage. Effectively, the user of the element must use the property, not
Expand Down Expand Up @@ -46,19 +46,19 @@ export class MapViewer extends HTMLElement {
this.setAttribute("height", val);
}
get lat() {
return this.hasAttribute("lat") ? this.getAttribute("lat") : "0";
return this._map.getCenter().lat;
}
set lat(val) {
if (val) {
this.setAttribute("lat", val);
this.zoomTo(val, this.lon, this.zoom);
}
}
get lon() {
return this.hasAttribute("lon") ? this.getAttribute("lon") : "0";
return this._map.getCenter().lng;
}
set lon(val) {
if (val) {
this.setAttribute("lon", val);
this.zoomTo(this.lat, val, this.zoom);
}
}
get projection() {
Expand All @@ -80,12 +80,12 @@ export class MapViewer extends HTMLElement {
} else throw new Error("Undefined Projection");
}
get zoom() {
return this.hasAttribute("zoom") ? this.getAttribute("zoom") : 0;
return this._map.getZoom();
}
set zoom(val) {
var parsedVal = parseInt(val,10);
if (!isNaN(parsedVal) && (parsedVal >= 0 && parsedVal <= 25)) {
this.setAttribute('zoom', parsedVal);
this.zoomTo(this.lat, this.lon, parsedVal);
}
}
get layers() {
Expand Down Expand Up @@ -247,16 +247,18 @@ export class MapViewer extends HTMLElement {
}
_createMap() {
if (!this._map) {
let lat = this.hasAttribute("lat") ? this.getAttribute("lat") : "0";
let lon = this.hasAttribute("lon") ? this.getAttribute("lon") : "0";
this._map = L.map(this._container, {
center: new L.LatLng(this.lat, this.lon),
center: new L.LatLng(lat, lon),
projection: this.projection,
query: true,
contextMenu: true,
announceMovement: M.options.announceMovement,
featureIndex: true,
mapEl: this,
crs: M[this.projection],
zoom: this.zoom,
zoom: this.hasAttribute("zoom") ? this.getAttribute("zoom") : 0,
zoomControl: false,
// because the M.MapMLLayer invokes _tileLayer._onMoveEnd when
// the mapml response is received the screen tends to flash. I'm sure
Expand Down Expand Up @@ -594,38 +596,32 @@ export class MapViewer extends HTMLElement {
}, this);
this._map.on('movestart',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('movestart', {detail:
{target: this}}));
}, this);
this._map.on('move',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('move', {detail:
{target: this}}));
}, this);
this._map.on('moveend',
function () {
this._updateMapCenter();
this._addToHistory();
this.dispatchEvent(new CustomEvent('moveend', {detail:
{target: this}}));
}, this);
this._map.on('zoomstart',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('zoomstart', {detail:
{target: this}}));
}, this);
this._map.on('zoom',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('zoom', {detail:
{target: this}}));
}, this);
this._map.on('zoomend',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('zoomend', {detail:
{target: this}}));
}, this);
Expand Down Expand Up @@ -687,18 +683,7 @@ export class MapViewer extends HTMLElement {
zoom = Number.isInteger(+zoom) ? +zoom : this.zoom;
let location = new L.LatLng(+lat, +lon);
this._map.setView(location, zoom);
this.zoom = zoom;
this.lat = location.lat;
this.lon = location.lng;
}
_updateMapCenter() {
// remember to tell Leaflet event handler that 'this' in here refers to
// something other than the map in this case the custom polymer element
this.lat = this._map.getCenter().lat;
this.lon = this._map.getCenter().lng;
this.zoom = this._map.getZoom();
}

/**
* Adds to the maps history on moveends
* @private
Expand Down
37 changes: 11 additions & 26 deletions src/web-map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { MapCaption } from './map-caption.js';

export class WebMap extends HTMLMapElement {
static get observedAttributes() {
return ['lat', 'lon', 'zoom', 'projection', 'width', 'height', 'controls', 'static', 'controlslist'];
return ['projection', 'width', 'height', 'controls', 'static', 'controlslist'];
}
// see comments below regarding attributeChangedCallback vs. getter/setter
// usage. Effectively, the user of the element must use the property, not
Expand Down Expand Up @@ -47,19 +47,19 @@ export class WebMap extends HTMLMapElement {
this.setAttribute("height", val);
}
get lat() {
return this.hasAttribute("lat") ? this.getAttribute("lat") : "0";
return this._map.getCenter().lat;
}
set lat(val) {
if (val) {
this.setAttribute("lat", val);
this.zoomTo(val, this.lon, this.zoom);
}
}
get lon() {
return this.hasAttribute("lon") ? this.getAttribute("lon") : "0";
return this._map.getCenter().lng;
}
set lon(val) {
if (val) {
this.setAttribute("lon", val);
this.zoomTo(this.lat, val, this.zoom);
}
}
get projection() {
Expand All @@ -81,12 +81,12 @@ export class WebMap extends HTMLMapElement {
} else throw new Error("Undefined Projection");
}
get zoom() {
return this.hasAttribute("zoom") ? this.getAttribute("zoom") : 0;
return this._map.getZoom();
}
set zoom(val) {
var parsedVal = parseInt(val,10);
if (!isNaN(parsedVal) && (parsedVal >= 0 && parsedVal <= 25)) {
this.setAttribute('zoom', parsedVal);
this.zoomTo(this.lat, this.lon, parsedVal);
}
}
get layers() {
Expand Down Expand Up @@ -258,16 +258,18 @@ export class WebMap extends HTMLMapElement {
}
_createMap() {
if (!this._map) {
let lat = this.hasAttribute("lat") ? this.getAttribute("lat") : "0";
let lon = this.hasAttribute("lon") ? this.getAttribute("lon") : "0";
this._map = L.map(this._container, {
center: new L.LatLng(this.lat, this.lon),
center: new L.LatLng(lat, lon),
projection: this.projection,
query: true,
contextMenu: true,
announceMovement: M.options.announceMovement,
featureIndex: true,
mapEl: this,
crs: M[this.projection],
zoom: this.zoom,
zoom: this.hasAttribute("zoom") ? this.getAttribute("zoom") : 0,
zoomControl: false,
// because the M.MapMLLayer invokes _tileLayer._onMoveEnd when
// the mapml response is received the screen tends to flash. I'm sure
Expand Down Expand Up @@ -637,38 +639,32 @@ export class WebMap extends HTMLMapElement {
}, this);
this._map.on('movestart',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('movestart', {detail:
{target: this}}));
}, this);
this._map.on('move',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('move', {detail:
{target: this}}));
}, this);
this._map.on('moveend',
function () {
this._updateMapCenter();
this._addToHistory();
this.dispatchEvent(new CustomEvent('moveend', {detail:
{target: this}}));
}, this);
this._map.on('zoomstart',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('zoomstart', {detail:
{target: this}}));
}, this);
this._map.on('zoom',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('zoom', {detail:
{target: this}}));
}, this);
this._map.on('zoomend',
function () {
this._updateMapCenter();
this.dispatchEvent(new CustomEvent('zoomend', {detail:
{target: this}}));
}, this);
Expand Down Expand Up @@ -730,18 +726,7 @@ export class WebMap extends HTMLMapElement {
zoom = Number.isInteger(+zoom) ? +zoom : this.zoom;
let location = new L.LatLng(+lat, +lon);
this._map.setView(location, zoom);
this.zoom = zoom;
this.lat = location.lat;
this.lon = location.lng;
}
_updateMapCenter() {
// remember to tell Leaflet event handler that 'this' in here refers to
// something other than the map in this case the custom polymer element
this.lat = this._map.getCenter().lat;
this.lon = this._map.getCenter().lng;
this.zoom = this._map.getZoom();
}

/**
* Adds to the maps history on moveends
* @private
Expand Down
62 changes: 61 additions & 1 deletion test/e2e/api/domApi-mapml-viewer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,4 +423,64 @@ test.describe("mapml-viewer DOM API Tests", () => {

});

});
});

test.describe("Properties Getter and Setter", () => {
let page;
let context;
test.beforeAll(async function() {
context = await chromium.launchPersistentContext('');
page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();
await page.goto("propertiesApi-mapml-viewer.html");
});

test.afterAll(async function () {
await context.close();
});

test("zoom getter and setter test", async () => {
const viewerHandle = await page.evaluateHandle(() => document.querySelector('mapml-viewer'));
let leafletZoom = await page.evaluate( viewer => viewer._map.getZoom(), viewerHandle);
let mapZoom = await page.evaluate( viewer => viewer.zoom, viewerHandle);
expect(mapZoom).toEqual(leafletZoom);
expect(leafletZoom).toEqual(0);

await page.evaluate( viewer => viewer.zoom = 5, viewerHandle);

leafletZoom = await page.evaluate( viewer => viewer._map.getZoom(), viewerHandle);
mapZoom = await page.evaluate( viewer => viewer.zoom, viewerHandle);
expect(mapZoom).toEqual(leafletZoom);
expect(leafletZoom).toEqual(5);
});

test("lon getter and setter test", async () => {
const viewerHandle = await page.evaluateHandle(() => document.querySelector('mapml-viewer'));
let leafletLon = await page.evaluate( viewer => viewer._map.getCenter().lng, viewerHandle);
let mapLon = await page.evaluate( viewer => viewer.lon, viewerHandle);
expect(mapLon).toEqual(leafletLon);
expect(leafletLon).toEqual(-92);

await page.evaluate( viewer => viewer.lon = -70, viewerHandle);

leafletLon = await page.evaluate( viewer => viewer._map.getCenter().lng, viewerHandle);
mapLon = await page.evaluate( viewer => viewer.lon, viewerHandle);
expect(mapLon).toEqual(leafletLon);
expect(leafletLon).toEqual(-70);
});

test("lat getter and setter test", async () => {
const viewerHandle = await page.evaluateHandle(() => document.querySelector('mapml-viewer'));
let leafletLat = await page.evaluate( viewer => viewer._map.getCenter().lat, viewerHandle);
let mapLat = await page.evaluate( viewer => viewer.lat, viewerHandle);
expect(mapLat).toEqual(leafletLat);
expect(leafletLat).toEqual(47);

await page.evaluate( viewer => viewer.lat = 30, viewerHandle);

leafletLat = await page.evaluate( viewer => viewer._map.getCenter().lat, viewerHandle);
mapLat = await page.evaluate( viewer => viewer.lat, viewerHandle);
expect(mapLat).toEqual(leafletLat);
expect(leafletLat).toEqual(30);
});

})
62 changes: 61 additions & 1 deletion test/e2e/api/domApi-web-map.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,4 +428,64 @@ test.describe("web-map DOM API Tests", () => {

});

});
});

test.describe("Properties Getter and Setter", () => {
let page;
let context;
test.beforeAll(async function() {
context = await chromium.launchPersistentContext('');
page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();
await page.goto("propertiesApi-map.html");
});

test.afterAll(async function () {
await context.close();
});

test("zoom getter and setter test", async () => {
const mapHandle = await page.evaluateHandle(() => document.querySelector('map'));
let leafletZoom = await page.evaluate( viewer => viewer._map.getZoom(), mapHandle);
let mapZoom = await page.evaluate( viewer => viewer.zoom, mapHandle);
expect(mapZoom).toEqual(leafletZoom);
expect(leafletZoom).toEqual(0);

await page.evaluate( viewer => viewer.zoom = 5, mapHandle);

leafletZoom = await page.evaluate( viewer => viewer._map.getZoom(), mapHandle);
mapZoom = await page.evaluate( viewer => viewer.zoom, mapHandle);
expect(mapZoom).toEqual(leafletZoom);
expect(leafletZoom).toEqual(5);
});

test("lon getter and setter test", async () => {
const mapHandle = await page.evaluateHandle(() => document.querySelector('map'));
let leafletLon = await page.evaluate( viewer => viewer._map.getCenter().lng, mapHandle);
let mapLon = await page.evaluate( viewer => viewer.lon, mapHandle);
expect(mapLon).toEqual(leafletLon);
expect(leafletLon).toEqual(-92);

await page.evaluate( viewer => viewer.lon = -70, mapHandle);

leafletLon = await page.evaluate( viewer => viewer._map.getCenter().lng, mapHandle);
mapLon = await page.evaluate( viewer => viewer.lon, mapHandle);
expect(mapLon).toEqual(leafletLon);
expect(leafletLon).toEqual(-70);
});

test("lat getter and setter test", async () => {
const mapHandle = await page.evaluateHandle(() => document.querySelector('map'));
let leafletLat = await page.evaluate( viewer => viewer._map.getCenter().lat, mapHandle);
let mapLat = await page.evaluate( viewer => viewer.lat, mapHandle);
expect(mapLat).toEqual(leafletLat);
expect(leafletLat).toEqual(47);

await page.evaluate( viewer => viewer.lat = 30, mapHandle);

leafletLat = await page.evaluate( viewer => viewer._map.getCenter().lat, mapHandle);
mapLat = await page.evaluate( viewer => viewer.lat, mapHandle);
expect(mapLat).toEqual(leafletLat);
expect(leafletLat).toEqual(30);
});

})
Loading