steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 16:52:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

add mapillary frame close button

Browse Source
This commit is contained in:
vcoppe
2024-07-16 16:16:53 +02:00
parent d0d35468ea
commit fe100f9247
2 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
website/src/lib/components/street-view-control/Mapillary.ts
View File

@@ -1,7 +1,6 @@
import mapboxgl from "mapbox-gl"; import mapboxgl from "mapbox-gl";
import { Viewer } from 'mapillary-js/dist/mapillary.module'; import { Viewer } from 'mapillary-js/dist/mapillary.module';
import 'mapillary-js/dist/mapillary.css'; import 'mapillary-js/dist/mapillary.css';
import { t } from "svelte-i18n";
import { resetCursor, setPointerCursor } from "$lib/utils"; import { resetCursor, setPointerCursor } from "$lib/utils";
const mapillarySource = { const mapillarySource = {
@@ -47,18 +46,14 @@ export class MapillaryLayer {
onMouseEnterBinded = this.onMouseEnter.bind(this); onMouseEnterBinded = this.onMouseEnter.bind(this);
onMouseLeaveBinded = this.onMouseLeave.bind(this); onMouseLeaveBinded = this.onMouseLeave.bind(this);
constructor(map: mapboxgl.Map) { constructor(map: mapboxgl.Map, container: HTMLElement) {
this.map = map; this.map = map;
const container = document.createElement('div');
container.style.width = '400px';
container.style.height = '300px';
container.className = 'rounded-md border-background border-2'
this.viewer = new Viewer({ this.viewer = new Viewer({
accessToken: 'MLY|4381405525255083|3204871ec181638c3c31320490f03011', accessToken: 'MLY|4381405525255083|3204871ec181638c3c31320490f03011',
container, container,
}); });
container.classList.remove('hidden');
this.popup = new mapboxgl.Popup({ this.popup = new mapboxgl.Popup({
closeButton: false, closeButton: false,
@@ -109,6 +104,10 @@ export class MapillaryLayer {
this.popup.remove(); this.popup.remove();
} }
closePopup() {
this.popup.remove();
}
onMouseEnter(e: mapboxgl.MapLayerMouseEvent) { onMouseEnter(e: mapboxgl.MapLayerMouseEvent) {
this.popup.addTo(this.map).setLngLat(e.lngLat); this.popup.addTo(this.map).setLngLat(e.lngLat);
this.viewer.resize(); this.viewer.resize();

23
website/src/lib/components/street-view-control/StreetViewControl.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import CustomControl from '$lib/components/custom-control/CustomControl.svelte'; import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import { Toggle } from '$lib/components/ui/toggle'; import { Toggle } from '$lib/components/ui/toggle';
import { PersonStanding } from 'lucide-svelte'; import { PersonStanding, X } from 'lucide-svelte';
import { MapillaryLayer } from './Mapillary'; import { MapillaryLayer } from './Mapillary';
import { GoogleRedirect } from './Google'; import { GoogleRedirect } from './Google';
import { map, streetViewEnabled } from '$lib/stores'; import { map, streetViewEnabled } from '$lib/stores';
@@ -11,10 +11,11 @@
let googleRedirect: GoogleRedirect; let googleRedirect: GoogleRedirect;
let mapillaryLayer: MapillaryLayer; let mapillaryLayer: MapillaryLayer;
let container: HTMLElement;
$: if ($map) { $: if ($map) {
googleRedirect = new GoogleRedirect($map); googleRedirect = new GoogleRedirect($map);
mapillaryLayer = new MapillaryLayer($map); mapillaryLayer = new MapillaryLayer($map, container);
} }
$: if (mapillaryLayer) { $: if (mapillaryLayer) {
@@ -41,3 +42,21 @@
<PersonStanding size="22" /> <PersonStanding size="22" />
</Toggle> </Toggle>
</CustomControl> </CustomControl>
<div
bind:this={container}
class="hidden relative w-[50vw] h-[40vh] rounded-md border-background border-2"
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="absolute top-0 right-0 z-10 bg-background p-1 rounded-bl-md cursor-pointer"
on:click={() => {
if (mapillaryLayer) {
mapillaryLayer.closePopup();
}
}}
>
<X size="16" />
</div>
</div>