From 8902cab1bfec3bae9a498a586a0e1549bcb387a0 Mon Sep 17 00:00:00 2001 From: Matthew Kalinin Date: Mon, 1 Apr 2024 18:33:18 +0300 Subject: [PATCH] default marker --- example/vanilla.html | 12 +++++------ src/MMapDefaultMarker/index.css | 13 ++++++++++++ src/MMapDefaultMarker/index.ts | 36 +++++++++++++++++++++++++++++++++ src/MMapDefaultMarker/pin.svg | 1 + src/index.ts | 1 + src/internal/internal.d.ts | 4 ++++ 6 files changed, 60 insertions(+), 7 deletions(-) create mode 100644 src/MMapDefaultMarker/index.css create mode 100644 src/MMapDefaultMarker/index.ts create mode 100644 src/MMapDefaultMarker/pin.svg create mode 100644 src/internal/internal.d.ts diff --git a/example/vanilla.html b/example/vanilla.html index f5fb989..8218e1d 100644 --- a/example/vanilla.html +++ b/example/vanilla.html @@ -1,4 +1,4 @@ - + Vanilla example @mappable-world/mappable-default-ui-theme @@ -15,18 +15,16 @@ const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable; const {MMapZoomControl} = await mappable.import('@mappable-world/mappable-controls@0.0.1'); - const {MMapButtonExample} = await mappable.import('@mappable-world/mappable-default-ui-theme'); + const {MMapDefaultMarker} = await mappable.import('@mappable-world/mappable-default-ui-theme'); map = new MMap(document.getElementById('app'), {location: LOCATION}); map.addChild(new MMapDefaultSchemeLayer()); map.addChild((defaultFeatures = new MMapDefaultFeaturesLayer())); + map.addChild(new MMapControls({position: 'right'}).addChild(new MMapZoomControl({}))); - map.addChild( - new MMapControls({position: 'right'}) - .addChild(new MMapZoomControl({})) - .addChild(new MMapButtonExample({text: 'My button', onClick: () => alert('Click!')})) - ); + const coordinates = [55.289051, 25.229907]; + map.addChild(new MMapDefaultMarker({coordinates, color: '#F09A75', name: 'auto'})); } diff --git a/src/MMapDefaultMarker/index.css b/src/MMapDefaultMarker/index.css new file mode 100644 index 0000000..6e64195 --- /dev/null +++ b/src/MMapDefaultMarker/index.css @@ -0,0 +1,13 @@ +.mappable--point { + box-sizing: border-box; + height: 8px; + width: 8px; + border: 2px solid #f8f8f8; + position: absolute; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.mappable--point svg { + transform: translate(calc(-50% + 2px), calc(-100% + 2px)); +} diff --git a/src/MMapDefaultMarker/index.ts b/src/MMapDefaultMarker/index.ts new file mode 100644 index 0000000..e76a1ea --- /dev/null +++ b/src/MMapDefaultMarker/index.ts @@ -0,0 +1,36 @@ +import {MMapMarker, MMapMarkerProps} from '@mappable-world/mappable-types'; +import {IconName} from '../icons/types/icons'; +import pin from './pin.svg'; +import './index.css'; + +export type MMapDefaultMarkerProps = MMapMarkerProps & { + name: IconName; + color: string; +}; + +export class MMapDefaultMarker extends mappable.MMapComplexEntity { + private _marker: MMapMarker; + private _markerElement: HTMLElement; + + constructor(props: MMapDefaultMarkerProps) { + super(props); + } + + protected _onAttach(): void { + this._markerElement = document.createElement('mappable'); + this._markerElement.classList.add('mappable--point'); + this._markerElement.innerHTML = pin; + this._markerElement.style.color = this._props.color; + this._markerElement.style.backgroundColor = this._props.color; + + this._marker = new mappable.MMapMarker(this._props, this._markerElement); + this.addChild(this._marker); + } + + protected _onUpdate(propsDiff: Partial): void { + if (propsDiff.color !== undefined) { + this._markerElement.style.color = this._props.color; + } + this._marker.update(this._props); + } +} diff --git a/src/MMapDefaultMarker/pin.svg b/src/MMapDefaultMarker/pin.svg new file mode 100644 index 0000000..db159ac --- /dev/null +++ b/src/MMapDefaultMarker/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 50bf320..6aa10d1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1,2 @@ export * from './MMapButtonExample/MMapButtonExample'; +export * from './MMapDefaultMarker'; diff --git a/src/internal/internal.d.ts b/src/internal/internal.d.ts new file mode 100644 index 0000000..44350b3 --- /dev/null +++ b/src/internal/internal.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: string; + export default content; +}