Live location sharing - smart location marker (#8232)

* extract location markers into generic Marker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* wrap marker in smartmarker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test smartmarker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove skinned-sdk

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* better types for LocationBodyContent

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-04-11 10:29:24 +02:00 committed by GitHub
parent df20821fd6
commit 94385169f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 294 additions and 40 deletions

View file

@ -24,6 +24,46 @@ import { findMapStyleUrl } from "./findMapStyleUrl";
import { LocationShareError } from "./LocationShareErrors";
export const createMap = (
interactive: boolean,
bodyId: string,
onError: (error: Error) => void,
): maplibregl.Map => {
try {
const styleUrl = findMapStyleUrl();
const map = new maplibregl.Map({
container: bodyId,
style: styleUrl,
zoom: 15,
interactive,
});
map.on('error', (e) => {
logger.error(
"Failed to load map: check map_style_url in config.json has a "
+ "valid URL and API key",
e.error,
);
onError(new Error(LocationShareError.MapStyleUrlNotReachable));
});
return map;
} catch (e) {
logger.error("Failed to render map", e);
throw e;
}
};
export const createMarker = (coords: GeolocationCoordinates, element: HTMLElement): maplibregl.Marker => {
const marker = new maplibregl.Marker({
element,
anchor: 'bottom',
offset: [0, -1],
}).setLngLat({ lon: coords.longitude, lat: coords.latitude });
return marker;
};
export const createMapWithCoords = (
coords: GeolocationCoordinates,
interactive: boolean,
bodyId: string,
@ -31,24 +71,14 @@ export const createMap = (
onError: (error: Error) => void,
): maplibregl.Map => {
try {
const styleUrl = findMapStyleUrl();
const map = createMap(interactive, bodyId, onError);
const coordinates = new maplibregl.LngLat(coords.longitude, coords.latitude);
// center on coordinates
map.setCenter(coordinates);
const map = new maplibregl.Map({
container: bodyId,
style: styleUrl,
center: coordinates,
zoom: 15,
interactive,
});
new maplibregl.Marker({
element: document.getElementById(markerId),
anchor: 'bottom',
offset: [0, -1],
})
.setLngLat(coordinates)
.addTo(map);
const marker = createMarker(coords, document.getElementById(markerId));
marker.addTo(map);
map.on('error', (e) => {
logger.error(