Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-03-12 01:32:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: polish map module ui/ux

Browse Source
This commit is contained in:
Rainer Killinger
2022-09-08 14:44:20 +00:00
parent 37dd29a60f
commit 855531fefb
20 changed files with 119 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/modules/map/map.provider.ts
View File

@@ -22,7 +22,7 @@ import {
SCUuid,
} from '@openstapps/core';
import {Point, Polygon} from 'geojson';
import {divIcon, geoJSON, icon, LatLng, Map, marker, Marker} from 'leaflet';
import {divIcon, geoJSON, LatLng, Map, marker, Marker} from 'leaflet';
import {DataProvider} from '../data/data.provider';
import {MapPosition, PositionService} from './position.service';
import {hasValidLocation} from '../data/types/place/place-types';
@@ -45,14 +45,20 @@ export class MapProvider {
* Provide a point marker for a leaflet map
*
* @param point Point to get marker for
* @param className CSS class name
* @param iconSize Size of the position icon
*/
static getPointMarker(point: Point) {
static getPointMarker(point: Point, className: string, iconSize: number) {
return marker(geoJSON(point).getBounds().getCenter(), {
icon: icon({
iconAnchor: [13, 41],
iconSize: [25, 41],
iconUrl: '../assets/marker-icon.png',
shadowUrl: '../assets/marker-shadow.png',
icon: divIcon({
className: className,
html: `<span
name="${SCIcon`location_on`}"
class="material-symbols-rounded map-location-pin"
style="font-size: ${iconSize}px;"
>${SCIcon`location_on`}</span>`,
iconSize: [iconSize, iconSize],
iconAnchor: [iconSize / 2, iconSize],
}),
});
}
@@ -80,12 +86,13 @@ export class MapProvider {
transform-origin: center;
transform: rotate(${position.heading}deg);
font-size: ${iconSize}px;
color: var(--ion-color-primary);
"
>${SCIcon`navigation`}</span>`
: `<span
name="${SCIcon`person_pin_circle`}"
class="material-symbols-rounded map-location-pin"
style="font-size: ${iconSize}px;"
style="font-size: ${iconSize}px; color: var(--ion-color-primary);"
>${SCIcon`person_pin_circle`}</span>`,
iconSize: [iconSize, iconSize],
}),