diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 51138f7a2d..fff56f595d 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2499,7 +2499,7 @@ "type": "boolean", "label": "Enable Location", "key": "locationEnabled", - "defaultValue": false + "defaultValue": true }, { "type": "boolean", @@ -2535,6 +2535,18 @@ "label": "Tile URL", "key": "tileURL", "defaultValue": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" + }, + { + "type": "text", + "label": "Default Location (lat,lng)", + "key": "defaultLocation", + "defaultValue": "51.5072,-0.1276" + }, + { + "type": "text", + "label": "Map Attribution", + "key": "mapAttribution", + "defaultValue": "OpenStreetMap contributors" } ] }, diff --git a/packages/client/src/components/app/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte similarity index 83% rename from packages/client/src/components/app/EmbeddedMap.svelte rename to packages/client/src/components/app/embedded-map/EmbeddedMap.svelte index 63b98ba651..642d22c009 100644 --- a/packages/client/src/components/app/EmbeddedMap.svelte +++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte @@ -20,13 +20,16 @@ export let titleKey = null export let fullScreenEnabled = true export let locationEnabled = true + export let defaultLocation export let tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" + export let mapAttribution const { styleable, notificationStore } = getContext("sdk") const component = getContext("component") const embeddedMapId = `${Helpers.uuid()}-wrapper` let cachedDeviceCoordinates + const fallbackCoordinates = [51.5072, -0.1276] //London let mapInstance let mapMarkerGroup = new L.FeatureGroup() @@ -38,6 +41,14 @@ ? 72 : Math.round(zoomLevel * (maxZoomLevel / 100)) + $: zoomControlUpdated(mapInstance, zoomEnabled) + $: locationControlUpdated(mapInstance, locationEnabled) + $: fullScreenControlUpdated(mapInstance, fullScreenEnabled) + $: updateMapDimensions( + mapInstance, + $component.styles.normal.width, + $component.styles.normal.height + ) $: addMapMarkers( mapInstance, dataProvider?.rows, @@ -47,16 +58,10 @@ ) $: if (typeof mapInstance === "object" && mapMarkers.length > 0) { mapInstance.setZoom(0) - mapInstance.fitBounds(mapMarkerGroup.getBounds()) + mapInstance.fitBounds(mapMarkerGroup.getBounds(), { + paddingTopLeft: [0, 24], + }) } - $: zoomControlUpdated(mapInstance, zoomEnabled) - $: locationControlUpdated(mapInstance, locationEnabled) - $: fullScreenControlUpdated(mapInstance, fullScreenEnabled) - $: updateMapDimensions( - mapInstance, - $component.styles.normal.width, - $component.styles.normal.height - ) const updateMapDimensions = mapInstance => { if (typeof mapInstance !== "object") { @@ -65,6 +70,37 @@ mapInstance.invalidateSize() } + let isValidLatitude = value => { + return !isNaN(value) && value > -90 && value < 90 + } + + let isValidLongitude = value => { + return !isNaN(value) && value > -180 && value < 180 + } + + const parseDefaultLocation = defaultLocation => { + if (typeof defaultLocation !== "string") { + return fallbackCoordinates + } + let defaultLocationParts = defaultLocation.split(",") + if (defaultLocationParts.length !== 2) { + return fallbackCoordinates + } + + let parsedDefaultLatitude = parseFloat(defaultLocationParts[0].trim()) + let parsedDefaultLongitude = parseFloat(defaultLocationParts[1].trim()) + + return isValidLatitude(parsedDefaultLatitude) === true && + isValidLongitude(parsedDefaultLongitude) === true + ? [parsedDefaultLatitude, parsedDefaultLongitude] + : fallbackCoordinates + } + + $: defaultCoordinates = + mapMarkers.length > 0 + ? parseDefaultLocation(defaultLocation) + : fallbackCoordinates + // Map Button Controls let locationControl = new LocationControl({ position: "bottomright", @@ -165,14 +201,6 @@ mapMarkerGroup.clearLayers() - let isValidLatitude = value => { - return !isNaN(value) && value > -90 && value < 90 - } - - let isValidLongitude = value => { - return !isNaN(value) && value > -180 && value < 180 - } - const validRows = rows.filter(row => { return isValidLatitude(row[latKey]) && isValidLongitude(row[lngKey]) }) @@ -203,14 +231,13 @@ } const initMap = () => { - const initCoords = [51.5072, -0.1276] + const initCoords = defaultCoordinates mapInstance = L.map(embeddedMapId, mapOptions) mapMarkerGroup.addTo(mapInstance) L.tileLayer(tileURL, { - attribution: - '© OpenStreetMap contributors', + attribution: "© " + mapAttribution, //No attribution, warning? zoom: adjustedZoomLevel, }).addTo(mapInstance) @@ -259,8 +286,4 @@ height: 100%; width: 100%; } - :global(.leaflet-tile) { - width: 258px !important; - height: 258px !important; - } diff --git a/packages/client/src/components/app/EmbeddedMapControls.js b/packages/client/src/components/app/embedded-map/EmbeddedMapControls.js similarity index 100% rename from packages/client/src/components/app/EmbeddedMapControls.js rename to packages/client/src/components/app/embedded-map/EmbeddedMapControls.js diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js index e23659620b..db8cc43ef6 100644 --- a/packages/client/src/components/app/index.js +++ b/packages/client/src/components/app/index.js @@ -31,7 +31,7 @@ export { default as cardstat } from "./CardStat.svelte" export { default as spectrumcard } from "./SpectrumCard.svelte" export { default as tag } from "./Tag.svelte" export { default as markdownviewer } from "./MarkdownViewer.svelte" -export { default as embeddedmap } from "./EmbeddedMap.svelte" +export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte" export * from "./charts" export * from "./forms" export * from "./table"