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: ['mapsneu'], 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 | 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 | 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 the 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);