# BaseMap

A component to display a Leaflet-map with multiple locations

# Props

Prop name Description Type Values Default
attribution define map attribution string - 'Source: <a href="https://openstreetmap.org/">OpenStreetMap contributors</a>'
attributionPosition define position of map attribution string topright, bottomleft, bottomright 'bottomright'
centerMarker set array index of marker to center map from outside number - null
clusterSizes define number of items for cluster sizes
structure: { medium: 5, large: 20, xlarge: 100 }
Note: properties medium, large, xlarge are mandatory
object - {
medium: 5,
large: 20,
xlarge: 100
}
copyright define map copyright string - '<a href=http://creativecommons.org/licenses/by-sa/3.0/>CC BY-SA 3.0</a>'
highlightMarker set array index of marker to highlight it from outside number - null
icon define html code for a custom icon string - '<svg viewBox="0 0 70.866 70.866" xmlns="http://www.w3.org/2000/svg"><path d="m35.433 0a22.731 22.731 0 0 0-22.731 22.82 24.125 24.125 0 0 0 1.872 9.1814l19.611 38.063a1.3718 1.3718 0 0 0 2.496 0l19.611-38.063a22.249 22.249 0 0 0 1.872-9.1814 22.731 22.731 0 0 0-22.731-22.82zm0 32.858a10.216 10.216 0 1 1 10.216-10.216 10.241 10.241 0 0 1-10.216 10.216z" fill="#010101"/></svg>'
iconSize define icon size number - 32
options define custom options for map data
e.g. {
style: 'normal',
subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
tileMatrixSet: 'google3857',
type: 'geolandbasemap'
}

usage custom keys in url property:
https://{s}.wien.gv.at/basemap/{type}/{style}/{tileMatrixSet}/{z}/{y}/{x}.png

for more information refer to the Leaflet TileLayer documentation (opens new window)
object - {}
marker define marker
structure: [{
coordinates: [16.382782, 48.208309],
latLng: [48.208309, 16.382782],
data: [ 'University of Applied Arts', 'Oskar Kokoschka-Platz 2',
'1010 Vienna', 'Austria']
}]
Note: either GeoJSON coordinates or latLng is mandatory
array - []
markerPopups show popups for marker boolean - true
maxZoom define max zoom factor number - 18
url define url to tileLayer service string - ''
tileLayerService specify service for the tileLayer (opens new window) string WMTS, TMS, WMS' 'WMTS'
zoom define initial zoom factor number - 16

# Events

Event name Properties Description
highlighted undefined number - array index or null Event emitted on mouseenter, mouseleave of a map marker
mouseenter: index of marker object in component property 'marker' array
mouseleave: null

Cluster colors might be set via following css variables:

--map-cluster-bg: rgba(103, 58, 183, .4);

--map-cluster-bg-inner: rgba(103, 58, 183, .85);

--map-cluster-bg-hover: rgba(176, 133, 245, .4);

--map-cluster-bg-inner-hover: rgba(176, 133, 245, .85);

# Demo

Last Updated: 3/27/2023, 4:42:24 PM