default marker

mappable-world · Apr 1, 2024 · 8902cab · 8902cab
1 parent 2af87cf
commit 8902cab
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 7 deletions.
diff --git a/example/vanilla.html b/example/vanilla.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <title>Vanilla example @mappable-world/mappable-default-ui-theme</title>
@@ -15,18 +15,16 @@
                 const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable;
 
                 const {MMapZoomControl} = await mappable.import('@mappable-world/[email protected]');
-                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'}));
             }
         </script>
 

diff --git a/src/MMapDefaultMarker/index.css 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
@@ -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<MMapDefaultMarkerProps> {
+    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<MMapDefaultMarkerProps>): 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
diff --git 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
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './MMapButtonExample/MMapButtonExample';
		export * from './MMapDefaultMarker';