From d5cd5f835b313dde9c45cb73a46a7260e0a2a52e Mon Sep 17 00:00:00 2001 From: sdirollo Date: Tue, 18 Jul 2023 16:53:03 +0200 Subject: [PATCH 01/11] wip : add terrain 3d --- package-lock.json | 14 +++++++------- package.json | 2 +- src/mapbox/extended_nav_control.js | 15 ++++++++++++++- src/mapbox/extended_terrain_control.js | 20 ++++++++++++++++++++ 4 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 src/mapbox/extended_terrain_control.js diff --git a/package-lock.json b/package-lock.json index 5284cbed..1a2ab28d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "dependencies": { "@mapbox/mapbox-gl-rtl-text": "^0.2.3", "@qwant/map-style-builder": "github:Qwant/map-style-builder#81eebb0", - "@qwant/qwant-basic-gl-style": "^1.5.2", + "@qwant/qwant-basic-gl-style": "^1.6.3", "@qwant/qwant-ponents": "^0.2.8", "@turf/along": "^6.0.1", "@turf/bbox": "^6.0.1", @@ -4425,9 +4425,9 @@ "link": true }, "node_modules/@qwant/qwant-basic-gl-style": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.1.tgz", - "integrity": "sha512-TyEFuHbsoedFr3qrX1P1+CNnR4GSJLmYxBwOt0Xm+zTR0M30R5s+UCMFvUOmbjaE4fFFcPy5sMziOcUNPBxeNQ==" + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.3.tgz", + "integrity": "sha512-mdLSAqyPYRLdgMfIxat94CaKKZ30z+db+OvqGxkNVszy/Y1xLhiooG5WzenwJNchVcyzGLepimL657TdowZbzQ==" }, "node_modules/@qwant/qwant-maps-common": { "resolved": "local_modules/qwant-maps-common", @@ -36083,9 +36083,9 @@ "version": "file:local_modules/po-js-loader" }, "@qwant/qwant-basic-gl-style": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.1.tgz", - "integrity": "sha512-TyEFuHbsoedFr3qrX1P1+CNnR4GSJLmYxBwOt0Xm+zTR0M30R5s+UCMFvUOmbjaE4fFFcPy5sMziOcUNPBxeNQ==" + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.3.tgz", + "integrity": "sha512-mdLSAqyPYRLdgMfIxat94CaKKZ30z+db+OvqGxkNVszy/Y1xLhiooG5WzenwJNchVcyzGLepimL657TdowZbzQ==" }, "@qwant/qwant-maps-common": { "version": "file:local_modules/qwant-maps-common", diff --git a/package.json b/package.json index f7a0e297..33523309 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "dependencies": { "@mapbox/mapbox-gl-rtl-text": "^0.2.3", "@qwant/map-style-builder": "github:Qwant/map-style-builder#81eebb0", - "@qwant/qwant-basic-gl-style": "^1.5.2", + "@qwant/qwant-basic-gl-style": "^1.6.3", "@qwant/qwant-ponents": "^0.2.8", "@turf/along": "^6.0.1", "@turf/bbox": "^6.0.1", diff --git a/src/mapbox/extended_nav_control.js b/src/mapbox/extended_nav_control.js index 718c7718..805c3e6f 100644 --- a/src/mapbox/extended_nav_control.js +++ b/src/mapbox/extended_nav_control.js @@ -2,6 +2,7 @@ import React from 'react'; import ExtendedScaleControl from './extended_scale_control'; import ExtendedAttributionControl from './extended_attribution_control'; import GeolocControl from './extended_geolocate_control'; +import ExtendedTerrainControl from './extended_terrain_control'; import Telemetry from 'src/libs/telemetry'; import { listen, unListen } from '../libs/customEvents'; import renderStaticReact from 'src/libs/renderStaticReact'; @@ -89,6 +90,17 @@ export default class ExtendedControl { this._map.on('rotate', _pitchAndRotateCompassArrow); this._map.on('pitch', _pitchAndRotateCompassArrow); + this.terrainContainer = document.createElement('div'); + this.terrainContainer.className = 'map_control__terrain_container'; + const terrainControl = new ExtendedTerrainControl( + { + source: 'terrain', + exaggeration: 1, + }, + this.terrainContainer + ); + this._container.appendChild(this.terrainContainer); + this.scaleAttributionContainer = document.createElement('div'); this.scaleAttributionContainer.className = 'map_control__scale_attribute_container'; this._container.appendChild(this.scaleAttributionContainer); @@ -106,8 +118,9 @@ export default class ExtendedControl { ); this._container.appendChild(this.topButtonGroup); this._container.appendChild(this.bottomButtonGroup); - this._container.appendChild(this.scaleAttributionContainer); + + this._map.addControl(terrainControl, 'bottom-right'); this._map.addControl(extendedScaleControl, 'bottom-right'); this._map.addControl(extendedAttributionControl, 'bottom-right'); return this._container; diff --git a/src/mapbox/extended_terrain_control.js b/src/mapbox/extended_terrain_control.js new file mode 100644 index 00000000..931f177a --- /dev/null +++ b/src/mapbox/extended_terrain_control.js @@ -0,0 +1,20 @@ +import { TerrainControl } from 'maplibre-gl'; + +/** + * Override default TerrainControl + */ + +export default class ExtendedTerrainControl extends TerrainControl { + constructor(options, container) { + super(options); + this.parentContainer = container; + } + + onAdd(map) { + const container = super.onAdd(map); + if (container) { + this.parentContainer.appendChild(container); + } + return this.parentContainer; + } +} From 8af9c2f643dfa797b0344ec4b2403febdc867627 Mon Sep 17 00:00:00 2001 From: sdirollo Date: Wed, 19 Jul 2023 17:33:00 +0200 Subject: [PATCH 02/11] wip --- src/mapbox/extended_nav_control.js | 3 ++- src/mapbox/extended_terrain_control.js | 15 ++++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/mapbox/extended_nav_control.js b/src/mapbox/extended_nav_control.js index 805c3e6f..83dd3145 100644 --- a/src/mapbox/extended_nav_control.js +++ b/src/mapbox/extended_nav_control.js @@ -97,7 +97,8 @@ export default class ExtendedControl { source: 'terrain', exaggeration: 1, }, - this.terrainContainer + this.terrainContainer, + this._map ); this._container.appendChild(this.terrainContainer); diff --git a/src/mapbox/extended_terrain_control.js b/src/mapbox/extended_terrain_control.js index 931f177a..5c274504 100644 --- a/src/mapbox/extended_terrain_control.js +++ b/src/mapbox/extended_terrain_control.js @@ -5,9 +5,11 @@ import { TerrainControl } from 'maplibre-gl'; */ export default class ExtendedTerrainControl extends TerrainControl { - constructor(options, container) { + constructor(options, container, map) { super(options); this.parentContainer = container; + this.visible = false; + this.map = map; } onAdd(map) { @@ -17,4 +19,15 @@ export default class ExtendedTerrainControl extends TerrainControl { } return this.parentContainer; } + + _toggleTerrain() { + if (this.visible) { + this.visible = false; + this.map.setLayoutProperty('terrain', 'visibility', 'none'); + } else { + this.visible = true; + this.map.setLayoutProperty('terrain', 'visibility', 'visible'); + } + super._toggleTerrain(); + } } From 50cd791acef9c4ba42ced31ffe56f88c5b53d9d1 Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 11:17:43 +0200 Subject: [PATCH 03/11] try to position the terrain button correctly --- src/mapbox/extended_nav_control.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/mapbox/extended_nav_control.js b/src/mapbox/extended_nav_control.js index 83dd3145..1282eb07 100644 --- a/src/mapbox/extended_nav_control.js +++ b/src/mapbox/extended_nav_control.js @@ -81,26 +81,23 @@ export default class ExtendedControl { this.bottomButtonGroup.appendChild(this._zoomOutButton); }); - this._map.addControl(geolocControl); - - const _pitchAndRotateCompassArrow = this._pitchAndRotateCompassArrow.bind(this); - - _pitchAndRotateCompassArrow(); - - this._map.on('rotate', _pitchAndRotateCompassArrow); - this._map.on('pitch', _pitchAndRotateCompassArrow); - - this.terrainContainer = document.createElement('div'); - this.terrainContainer.className = 'map_control__terrain_container'; const terrainControl = new ExtendedTerrainControl( { source: 'terrain', exaggeration: 1, }, - this.terrainContainer, + this.bottomButtonGroup, this._map ); - this._container.appendChild(this.terrainContainer); + + this._map.addControl(geolocControl); + this._map.addControl(terrainControl); + const _pitchAndRotateCompassArrow = this._pitchAndRotateCompassArrow.bind(this); + + _pitchAndRotateCompassArrow(); + + this._map.on('rotate', _pitchAndRotateCompassArrow); + this._map.on('pitch', _pitchAndRotateCompassArrow); this.scaleAttributionContainer = document.createElement('div'); this.scaleAttributionContainer.className = 'map_control__scale_attribute_container'; @@ -121,7 +118,6 @@ export default class ExtendedControl { this._container.appendChild(this.bottomButtonGroup); this._container.appendChild(this.scaleAttributionContainer); - this._map.addControl(terrainControl, 'bottom-right'); this._map.addControl(extendedScaleControl, 'bottom-right'); this._map.addControl(extendedAttributionControl, 'bottom-right'); return this._container; From 051d9c7bda4631e6e003522eba8d2bbc096452cf Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 15:17:12 +0200 Subject: [PATCH 04/11] improve terrain_3d --- package-lock.json | 14 +++++++------- package.json | 2 +- src/adapters/scene.js | 1 + src/mapbox/extended_nav_control.js | 2 +- src/mapbox/extended_terrain_control.js | 4 ++-- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1a2ab28d..059d8a2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "dependencies": { "@mapbox/mapbox-gl-rtl-text": "^0.2.3", "@qwant/map-style-builder": "github:Qwant/map-style-builder#81eebb0", - "@qwant/qwant-basic-gl-style": "^1.6.3", + "@qwant/qwant-basic-gl-style": "1.6.5", "@qwant/qwant-ponents": "^0.2.8", "@turf/along": "^6.0.1", "@turf/bbox": "^6.0.1", @@ -4425,9 +4425,9 @@ "link": true }, "node_modules/@qwant/qwant-basic-gl-style": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.3.tgz", - "integrity": "sha512-mdLSAqyPYRLdgMfIxat94CaKKZ30z+db+OvqGxkNVszy/Y1xLhiooG5WzenwJNchVcyzGLepimL657TdowZbzQ==" + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.5.tgz", + "integrity": "sha512-PEnkySZFHqhMjxmvq7Tokh/BpFbhzgFNON2GRShYCKSmFc2lbfJen0IkRqqbTMV3Jem6kwmGoceGtjwzJo1dGg==" }, "node_modules/@qwant/qwant-maps-common": { "resolved": "local_modules/qwant-maps-common", @@ -36083,9 +36083,9 @@ "version": "file:local_modules/po-js-loader" }, "@qwant/qwant-basic-gl-style": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.3.tgz", - "integrity": "sha512-mdLSAqyPYRLdgMfIxat94CaKKZ30z+db+OvqGxkNVszy/Y1xLhiooG5WzenwJNchVcyzGLepimL657TdowZbzQ==" + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@qwant/qwant-basic-gl-style/-/qwant-basic-gl-style-1.6.5.tgz", + "integrity": "sha512-PEnkySZFHqhMjxmvq7Tokh/BpFbhzgFNON2GRShYCKSmFc2lbfJen0IkRqqbTMV3Jem6kwmGoceGtjwzJo1dGg==" }, "@qwant/qwant-maps-common": { "version": "file:local_modules/qwant-maps-common", diff --git a/package.json b/package.json index 33523309..37c39bc3 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "dependencies": { "@mapbox/mapbox-gl-rtl-text": "^0.2.3", "@qwant/map-style-builder": "github:Qwant/map-style-builder#81eebb0", - "@qwant/qwant-basic-gl-style": "^1.6.3", + "@qwant/qwant-basic-gl-style": "^1.6.5", "@qwant/qwant-ponents": "^0.2.8", "@turf/along": "^6.0.1", "@turf/bbox": "^6.0.1", diff --git a/src/adapters/scene.js b/src/adapters/scene.js index 16c17c42..051043e8 100644 --- a/src/adapters/scene.js +++ b/src/adapters/scene.js @@ -126,6 +126,7 @@ Scene.prototype.initMapBox = function ({ locationHash, bbox }) { 'poi-level-1', 'poi-level-2', 'poi-level-3', + 'terrain', 'mapillary-images', 'poi-level-public-transports-1', 'poi-level-public-transports-2', diff --git a/src/mapbox/extended_nav_control.js b/src/mapbox/extended_nav_control.js index 1282eb07..af87c25b 100644 --- a/src/mapbox/extended_nav_control.js +++ b/src/mapbox/extended_nav_control.js @@ -83,7 +83,7 @@ export default class ExtendedControl { const terrainControl = new ExtendedTerrainControl( { - source: 'terrain', + source: 'terrainSource', exaggeration: 1, }, this.bottomButtonGroup, diff --git a/src/mapbox/extended_terrain_control.js b/src/mapbox/extended_terrain_control.js index 5c274504..4d100526 100644 --- a/src/mapbox/extended_terrain_control.js +++ b/src/mapbox/extended_terrain_control.js @@ -23,10 +23,10 @@ export default class ExtendedTerrainControl extends TerrainControl { _toggleTerrain() { if (this.visible) { this.visible = false; - this.map.setLayoutProperty('terrain', 'visibility', 'none'); + this.map.setLayoutProperty('hills', 'visibility', 'none'); } else { this.visible = true; - this.map.setLayoutProperty('terrain', 'visibility', 'visible'); + this.map.setLayoutProperty('hills', 'visibility', 'visible'); } super._toggleTerrain(); } From 8165ec73a572d4772e516ea03fe8974ddadf851c Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 15:17:56 +0200 Subject: [PATCH 05/11] build docker for my pr --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e2ecdd5a..fd9a7ad4 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,6 +1,6 @@ name: Qwant Maps - CI -on: [push] +on: [push, pull_request] jobs: Build: From deebf8ef7cfabc018647226af65c945c6f9005db Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 15:20:39 +0200 Subject: [PATCH 06/11] wip : add terrain 3d --- .github/workflows/ci.yml | 2 +- .github/workflows/docker.yml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index fd9a7ad4..e2ecdd5a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,6 +1,6 @@ name: Qwant Maps - CI -on: [push, pull_request] +on: [push] jobs: Build: diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index c90b00a6..78eee41a 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -4,6 +4,7 @@ on: push: branches: - 'master' + - 'terrain_3d' tags: - 'v*' From e6c4ead2316746eec1686cd5383b5887be935ade Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 15:32:25 +0200 Subject: [PATCH 07/11] wip : add terrain 3d --- .github/workflows/docker.yml | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 78eee41a..f052a29f 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -1,12 +1,6 @@ name: Qwant Maps - Docker image -on: - push: - branches: - - 'master' - - 'terrain_3d' - tags: - - 'v*' +on: [push, pull_request] env: DOCKER_IMAGE_BASENAME: qwantresearch/erdapfel From b5beaca213ab8dccdcf3ba288eed0c928d37030f Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 15:33:53 +0200 Subject: [PATCH 08/11] wip : add terrain 3d --- .github/workflows/docker.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index f052a29f..78eee41a 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -1,6 +1,12 @@ name: Qwant Maps - Docker image -on: [push, pull_request] +on: + push: + branches: + - 'master' + - 'terrain_3d' + tags: + - 'v*' env: DOCKER_IMAGE_BASENAME: qwantresearch/erdapfel From 207db7d1711d71467ae8d7bf09a56e0e81af12c3 Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 16:04:59 +0200 Subject: [PATCH 09/11] remove wrong terrain layer --- src/adapters/scene.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/adapters/scene.js b/src/adapters/scene.js index 051043e8..16c17c42 100644 --- a/src/adapters/scene.js +++ b/src/adapters/scene.js @@ -126,7 +126,6 @@ Scene.prototype.initMapBox = function ({ locationHash, bbox }) { 'poi-level-1', 'poi-level-2', 'poi-level-3', - 'terrain', 'mapillary-images', 'poi-level-public-transports-1', 'poi-level-public-transports-2', From 37bf4558da95e84cacfcfdb4ea84193b6eaf57fc Mon Sep 17 00:00:00 2001 From: sdirollo Date: Thu, 20 Jul 2023 16:51:11 +0200 Subject: [PATCH 10/11] remove viewver open on first click --- src/components/TopBar/TopBar.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx index 6fc7936f..38f1a606 100644 --- a/src/components/TopBar/TopBar.jsx +++ b/src/components/TopBar/TopBar.jsx @@ -31,8 +31,6 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto setMenuDrawerOpen, isMapillaryLayerVisible, setMapillaryLayerVisible, - isMapillaryViewerOpen, - setMapillaryViewerOpen, isProductsDrawerOpen, setProductsDrawerOpen, setSearchInputTyping, @@ -208,7 +206,6 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto })} onClick={() => { setMapillaryLayerVisible(!isMapillaryLayerVisible); - setMapillaryViewerOpen(!isMapillaryViewerOpen); }} title={_('Mapillary')} > From 5f2a7a33c242b743503d2f932a81d96cb7157246 Mon Sep 17 00:00:00 2001 From: sdirollo Date: Fri, 21 Jul 2023 11:57:34 +0200 Subject: [PATCH 11/11] fix mapillary viewer --- src/adapters/scene.js | 8 +++---- src/components/TopBar/TopBar.jsx | 5 ++++ src/panel/Mapillary.tsx | 39 ++------------------------------ src/panel/MapillaryViewer.jsx | 31 +++++++++++++++++++++---- 4 files changed, 38 insertions(+), 45 deletions(-) diff --git a/src/adapters/scene.js b/src/adapters/scene.js index 16c17c42..4201ee48 100644 --- a/src/adapters/scene.js +++ b/src/adapters/scene.js @@ -319,8 +319,8 @@ Scene.prototype.initMapBox = function ({ locationHash, bbox }) { this.addMarkerMapillary(coord); }); - listen('change_camera_orientation', pov => { - this.updateCameraOrientation(pov); + listen('change_camera_orientation', bearing => { + this.updateCameraOrientation(bearing); }); listen('clean_marker', () => { @@ -598,9 +598,9 @@ function makeCamera(bearing, fov) { return container; } -Scene.prototype.updateCameraOrientation = function (pov) { +Scene.prototype.updateCameraOrientation = function (bearing) { const svg = this.camera.querySelector('svg'); - svg.style.transform = rotateArc(pov.bearing); + svg.style.transform = rotateArc(bearing); }; Scene.prototype.cleanMarker = async function () { diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx index 38f1a606..f5ee1f15 100644 --- a/src/components/TopBar/TopBar.jsx +++ b/src/components/TopBar/TopBar.jsx @@ -30,7 +30,9 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto isMenuDrawerOpen, setMenuDrawerOpen, isMapillaryLayerVisible, + isMapillaryViewerOpen, setMapillaryLayerVisible, + setMapillaryViewerOpen, isProductsDrawerOpen, setProductsDrawerOpen, setSearchInputTyping, @@ -206,6 +208,9 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto })} onClick={() => { setMapillaryLayerVisible(!isMapillaryLayerVisible); + if (isMapillaryViewerOpen) { + setMapillaryViewerOpen(false); + } }} title={_('Mapillary')} > diff --git a/src/panel/Mapillary.tsx b/src/panel/Mapillary.tsx index 20285015..9f9df871 100644 --- a/src/panel/Mapillary.tsx +++ b/src/panel/Mapillary.tsx @@ -3,8 +3,7 @@ import ViewerComponent from 'src/panel/MapillaryViewer'; import { CloseButton } from 'src/components/ui'; import { Flex } from '@qwant/qwant-ponents'; import { useStore } from 'src/store'; -import { fire, listen, unListen } from 'src/libs/customEvents'; -import { Viewer } from 'mapillary-js'; +import { listen, unListen } from 'src/libs/customEvents'; let viewer; const Mapillary = () => { @@ -27,36 +26,6 @@ const Mapillary = () => { const mapillaryListener = listen('set_mapillary_viewer', setMapillaryViewer); - function init(opts) { - const { accessToken, container } = opts; - const viewerOptions = { - accessToken, - component: { - cover: false, - }, - container, - }; - viewer = new Viewer(viewerOptions); - viewer.moveTo(mapillaryImageId).catch(error => console.warn(error)); - const onPov = async () => { - const pov = await viewer.getPointOfView(); - fire('change_camera_orientation', pov); - }; - const onPosition = async () => { - const position = await viewer.getPosition(); - const pos = [position.lng, position.lat]; - fire('create_mapillary_marker', pos); - }; - viewer.on('position', onPosition); - viewer.on('pov', onPov); - } - - function dispose() { - if (viewer) { - viewer.remove(); - } - } - return (
{isMapillaryViewerOpen && ( @@ -68,11 +37,7 @@ const Mapillary = () => { className="menu-top-close-button" /> - +
)} diff --git a/src/panel/MapillaryViewer.jsx b/src/panel/MapillaryViewer.jsx index 3721ed4c..d4de383e 100644 --- a/src/panel/MapillaryViewer.jsx +++ b/src/panel/MapillaryViewer.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { Viewer } from 'mapillary-js'; +import { fire } from 'src/libs/customEvents'; class ViewerComponent extends React.Component { constructor(props) { @@ -7,16 +9,37 @@ class ViewerComponent extends React.Component { } componentDidMount() { - const { init } = this.props; - init({ + this.viewer = new Viewer({ accessToken: 'MLY|4100327730013843|5bb78b81720791946a9a7b956c57b7cf', container: this.containerRef.current, + component: { cover: false }, + imageId: this.props.imageId, }); } + componentDidUpdate(prevProps) { + if (prevProps.imageId !== this.props.imageId) { + if (this.viewer) { + this.viewer.moveTo(this.props.imageId); + } + } + const onBearing = async () => { + const bearing = await this.viewer.getBearing(); + fire('change_camera_orientation', bearing); + }; + const onPosition = async () => { + const position = await this.viewer.getPosition(); + const pos = [position.lng, position.lat]; + fire('create_mapillary_marker', pos); + }; + this.viewer.on('position', onPosition); + this.viewer.on('bearing', onBearing); + } + componentWillUnmount() { - const { dispose } = this.props; - dispose(); + if (this.viewer) { + this.viewer.remove(); + } } render() {