forked from tsai/budibase
deanhannigan
5 years ago
committed by
GitHub
GitHub
9 changed files with 670 additions and 3 deletions
@ -0,0 +1,297 @@ |
|||
<script> |
|||
import L from "leaflet" |
|||
import sanitizeHtml from "sanitize-html" |
|||
import "leaflet/dist/leaflet.css" |
|||
import { Helpers } from "@budibase/bbui" |
|||
import { getContext } from "svelte" |
|||
import { |
|||
FullScreenControl, |
|||
LocationControl, |
|||
initMapControls, |
|||
} from "./EmbeddedMapControls" |
|||
|
|||
initMapControls() |
|||
|
|||
export let dataProvider |
|||
export let error |
|||
export let zoomLevel |
|||
export let zoomEnabled = true |
|||
export let latitudeKey = null |
|||
export let longitudeKey = null |
|||
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() |
|||
let mapMarkers = [] |
|||
|
|||
let minZoomLevel = 0 |
|||
let maxZoomLevel = 18 |
|||
let adjustedZoomLevel = !Number.isInteger(zoomLevel) |
|||
? 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, |
|||
latitudeKey, |
|||
longitudeKey, |
|||
titleKey |
|||
) |
|||
$: if (typeof mapInstance === "object" && mapMarkers.length > 0) { |
|||
mapInstance.setZoom(0) |
|||
mapInstance.fitBounds(mapMarkerGroup.getBounds(), { |
|||
paddingTopLeft: [0, 24], |
|||
}) |
|||
} |
|||
|
|||
const updateMapDimensions = mapInstance => { |
|||
if (typeof mapInstance !== "object") { |
|||
return |
|||
} |
|||
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", |
|||
onLocationFail: err => { |
|||
if (err.code === GeolocationPositionError.PERMISSION_DENIED) { |
|||
notificationStore.actions.error( |
|||
"Location requests not permitted. Ensure location is enabled" |
|||
) |
|||
} else if (err.code === GeolocationPositionError.POSITION_UNAVAILABLE) { |
|||
notificationStore.actions.warning( |
|||
"Location could not be retrieved. Try again" |
|||
) |
|||
} else if (err.code === GeolocationPositionError.TIMEOUT) { |
|||
notificationStore.actions.warning( |
|||
"Location request timed out. Try again" |
|||
) |
|||
} else { |
|||
notificationStore.actions.error("Unknown location error") |
|||
} |
|||
}, |
|||
onLocationSuccess: pos => { |
|||
cachedDeviceCoordinates = pos |
|||
if (typeof mapInstance === "object") { |
|||
mapInstance.setView(cachedDeviceCoordinates, 15) |
|||
} |
|||
}, |
|||
}) |
|||
let fullScreenControl = new FullScreenControl({ |
|||
position: "topright", |
|||
}) |
|||
let zoomControl = L.control.zoom({ |
|||
position: "bottomright", |
|||
}) |
|||
|
|||
const locationControlUpdated = (mapInstance, locationEnabled) => { |
|||
if (typeof mapInstance !== "object") { |
|||
return |
|||
} |
|||
if (locationEnabled) { |
|||
locationControl.addTo(mapInstance) |
|||
} else { |
|||
mapInstance.removeControl(locationControl) |
|||
} |
|||
} |
|||
|
|||
const fullScreenControlUpdated = (mapInstance, fullScreenEnabled) => { |
|||
if (typeof mapInstance !== "object") { |
|||
return |
|||
} |
|||
if (fullScreenEnabled) { |
|||
fullScreenControl.addTo(mapInstance) |
|||
} else { |
|||
mapInstance.removeControl(fullScreenControl) |
|||
} |
|||
} |
|||
|
|||
const zoomControlUpdated = (mapInstance, zoomEnabled) => { |
|||
if (typeof mapInstance !== "object") { |
|||
return |
|||
} |
|||
if (zoomEnabled) { |
|||
zoomControl.addTo(mapInstance) |
|||
mapInstance.scrollWheelZoom.enable() |
|||
} else { |
|||
mapInstance.removeControl(zoomControl) |
|||
mapInstance.scrollWheelZoom.disable() |
|||
} |
|||
} |
|||
|
|||
//Map icon and marker configuration |
|||
const mapIconMarkup = |
|||
'<div><svg width="26px" height="26px" class="spectrum-Icon" focusable="false" stroke="#b12b27" stroke-width="1%">' + |
|||
'<use xlink:href="#spectrum-icon-18-Location" /></svg></div>' |
|||
const mapIcon = L.divIcon({ |
|||
html: mapIconMarkup, |
|||
className: "embedded-map-marker", |
|||
iconSize: [26, 26], |
|||
iconAnchor: [13, 26], |
|||
popupAnchor: [0, -13], |
|||
}) |
|||
const mapMarkerOptions = { |
|||
icon: mapIcon, |
|||
draggable: false, |
|||
alt: "Location Marker", |
|||
} |
|||
let mapOptions = { |
|||
fullScreen: false, |
|||
zoomControl: false, |
|||
scrollWheelZoom: zoomEnabled, |
|||
minZoomLevel, |
|||
maxZoomLevel, |
|||
} |
|||
|
|||
const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey) => { |
|||
if (typeof mapInstance !== "object" || !rows || !latKey || !lngKey) { |
|||
return |
|||
} |
|||
|
|||
mapMarkerGroup.clearLayers() |
|||
|
|||
const validRows = rows.filter(row => { |
|||
return isValidLatitude(row[latKey]) && isValidLongitude(row[lngKey]) |
|||
}) |
|||
|
|||
validRows.forEach(row => { |
|||
let markerCoords = [row[latKey], row[lngKey]] |
|||
|
|||
let marker = L.marker(markerCoords, mapMarkerOptions).addTo(mapInstance) |
|||
let markerContent = generateMarkerPopupContent( |
|||
row[latKey], |
|||
row[lngKey], |
|||
row[titleKey] |
|||
) |
|||
|
|||
marker.bindPopup(markerContent).addTo(mapMarkerGroup) |
|||
|
|||
//https://github.com/Leaflet/Leaflet/issues/7331 |
|||
marker.on("click", function () { |
|||
this.openPopup() |
|||
}) |
|||
|
|||
mapMarkers = [...mapMarkers, marker] |
|||
}) |
|||
} |
|||
|
|||
const generateMarkerPopupContent = (latitude, longitude, text) => { |
|||
return text || latitude + "," + longitude |
|||
} |
|||
|
|||
const initMap = () => { |
|||
const initCoords = defaultCoordinates |
|||
|
|||
mapInstance = L.map(embeddedMapId, mapOptions) |
|||
mapMarkerGroup.addTo(mapInstance) |
|||
|
|||
const cleanAttribution = sanitizeHtml(mapAttribution, { |
|||
allowedTags: ["a"], |
|||
allowedAttributes: { |
|||
a: ["href", "target"], |
|||
}, |
|||
}) |
|||
|
|||
L.tileLayer(tileURL, { |
|||
attribution: "© " + cleanAttribution, |
|||
zoom: adjustedZoomLevel, |
|||
}).addTo(mapInstance) |
|||
|
|||
//Initialise the map |
|||
mapInstance.setView(initCoords, adjustedZoomLevel) |
|||
} |
|||
|
|||
const mapAction = () => { |
|||
initMap() |
|||
return { |
|||
destroy() { |
|||
mapInstance.remove() |
|||
mapInstance = undefined |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div class="embedded-map-wrapper map-default" use:styleable={$component.styles}> |
|||
{#if error} |
|||
<div>{error}</div> |
|||
{/if} |
|||
|
|||
<div id={embeddedMapId} class="embedded embedded-map" use:mapAction /> |
|||
</div> |
|||
|
|||
<style> |
|||
.embedded-map-wrapper { |
|||
background-color: #f1f1f1; |
|||
} |
|||
.map-default { |
|||
min-height: 180px; |
|||
min-width: 200px; |
|||
} |
|||
.embedded-map :global(.leaflet-top), |
|||
.embedded-map :global(.leaflet-bottom) { |
|||
z-index: 998; |
|||
} |
|||
.embedded-map :global(.embedded-map-marker) { |
|||
color: #ee3b35; |
|||
} |
|||
.embedded-map :global(.embedded-map-control) { |
|||
font-size: 22px; |
|||
} |
|||
.embedded-map { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,192 @@ |
|||
import L from "leaflet" |
|||
import screenfull from "screenfull" |
|||
|
|||
const createButton = function (html, title, className, container, fn) { |
|||
let link = L.DomUtil.create("a", className, container) |
|||
link.innerHTML = html |
|||
link.href = "#" |
|||
link.title = title |
|||
|
|||
link.setAttribute("role", "button") |
|||
link.setAttribute("aria-label", title) |
|||
|
|||
L.DomEvent.disableClickPropagation(link) |
|||
L.DomEvent.on(link, "click", L.DomEvent.stop) |
|||
L.DomEvent.on(link, "click", fn, this) |
|||
L.DomEvent.on(link, "click", this._refocusOnMap, this) |
|||
|
|||
return link |
|||
} |
|||
|
|||
// Full Screen Control
|
|||
|
|||
const FullScreenControl = L.Control.extend({ |
|||
options: { |
|||
position: "topright", |
|||
fullScreenContent: |
|||
'<span class="embedded-map-control embedded-map-location-icon">' + |
|||
'<svg width="16px" height="16px" class="spectrum-Icon" focusable="false">' + |
|||
'<use xlink:href="#spectrum-icon-18-FullScreen" /></svg><span>', |
|||
fullScreenTitle: "Enter Fullscreen", |
|||
}, |
|||
onAdd: function () { |
|||
var fullScreenClassName = "leaflet-control-fullscreen", |
|||
container = L.DomUtil.create("div", fullScreenClassName + " leaflet-bar"), |
|||
options = this.options |
|||
|
|||
this._fullScreenButton = this._createButton( |
|||
options.fullScreenContent, |
|||
options.fullScreenTitle, |
|||
"map-fullscreen", |
|||
container, |
|||
this._fullScreen |
|||
) |
|||
|
|||
return container |
|||
}, |
|||
_fullScreen: function () { |
|||
var map = this._map |
|||
if (screenfull.isEnabled) { |
|||
screenfull.toggle(map.getContainer()) |
|||
} |
|||
}, |
|||
_createButton: createButton, |
|||
}) |
|||
|
|||
const initFullScreenControl = () => { |
|||
L.Map.mergeOptions({ |
|||
fullScreen: false, |
|||
}) |
|||
|
|||
L.Map.addInitHook(function () { |
|||
if (this.options.fullScreen) { |
|||
this.fullScreenControl = new FullScreenControl() |
|||
this.addControl(this.fullScreenControl) |
|||
} else { |
|||
this.fullScreenControl = null |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// Location Control
|
|||
|
|||
const LocationControl = L.Control.extend({ |
|||
options: { |
|||
position: "topright", |
|||
locationContent: |
|||
'<span class="embedded-map-control embedded-map-location-icon">' + |
|||
'<svg width="16px" height="16px" class="spectrum-Icon" focusable="false">' + |
|||
'<use xlink:href="#spectrum-icon-18-Campaign" /></svg><span>', |
|||
locationTitle: "Show Your Location", |
|||
}, |
|||
onAdd: function () { |
|||
var locationClassName = "leaflet-control-location", |
|||
container = L.DomUtil.create("div", locationClassName + " leaflet-bar"), |
|||
options = this.options |
|||
|
|||
this._locationButton = this._createButton( |
|||
options.locationContent, |
|||
options.locationTitle, |
|||
"map-location", |
|||
container, |
|||
this._location |
|||
) |
|||
|
|||
this._updateDisabled() |
|||
|
|||
return container |
|||
}, |
|||
disable: function () { |
|||
this._disabled = true |
|||
this._updateDisabled() |
|||
return this |
|||
}, |
|||
enable: function () { |
|||
this._disabled = false |
|||
this._updateDisabled() |
|||
return this |
|||
}, |
|||
_location: function () { |
|||
if (this._disabled == true) { |
|||
return |
|||
} |
|||
this.disable() |
|||
|
|||
const success = pos => { |
|||
this._map.closePopup() |
|||
if (typeof this.options.onLocationSuccess === "function") { |
|||
this.options.onLocationSuccess({ |
|||
lat: pos.coords.latitude, |
|||
lng: pos.coords.longitude, |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const error = err => { |
|||
if (typeof this.options.onLocationFail === "function") { |
|||
this.options.onLocationFail(err) |
|||
} |
|||
} |
|||
|
|||
this._getPosition() |
|||
.then(success) |
|||
.catch(error) |
|||
.finally(() => { |
|||
this.enable() |
|||
}) |
|||
}, |
|||
_getPosition: function () { |
|||
var options = { |
|||
enableHighAccuracy: false, |
|||
timeout: 5000, |
|||
maximumAge: 30000, |
|||
} |
|||
|
|||
return new Promise((resolve, reject) => { |
|||
navigator.geolocation.getCurrentPosition(resolve, reject, options) |
|||
}) |
|||
}, |
|||
|
|||
_createButton: createButton, |
|||
|
|||
_updateDisabled: function () { |
|||
let disabledClassName = "leaflet-disabled" |
|||
L.DomUtil.removeClass(this._locationButton, disabledClassName) |
|||
this._locationButton.setAttribute("aria-disabled", "false") |
|||
|
|||
if (this._disabled) { |
|||
L.DomUtil.addClass(this._locationButton, disabledClassName) |
|||
this._locationButton.setAttribute("aria-disabled", "true") |
|||
} |
|||
}, |
|||
}) |
|||
|
|||
const initLocationControl = () => { |
|||
L.Map.mergeOptions({ |
|||
location: false, |
|||
onLocationFail: null, |
|||
onLocationSuccess: null, |
|||
}) |
|||
|
|||
L.Map.addInitHook(function () { |
|||
if (this.options.location) { |
|||
this.localControl = new LocationControl() |
|||
this.addControl(this.LocationControl) |
|||
} else { |
|||
this.localControl = null |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const initMapControls = () => { |
|||
initFullScreenControl() |
|||
initLocationControl() |
|||
} |
|||
|
|||
export { |
|||
initFullScreenControl, |
|||
initLocationControl, |
|||
initMapControls, |
|||
FullScreenControl, |
|||
LocationControl, |
|||
} |
|||
Loading…
Reference in new issue