# BaseMapLocations

A component to display Basemap, locations-list and interact with each other

# Props

Prop name Description Type Values Default
additionalMapStyles set additional styles for map e.g. height object - {
height: '368px'
}
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'
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>'
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
label define label for the locations-list string - 'Addresses'
locations define locations
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 coordinates or latLng is mandatory
array - []
markerPopups deactivate popups for marker boolean - true
maxZoom define max zoom factor number - 18
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 - {}
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

# Demo

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