show pin with icon

example/common.js

@@ -20,3 +20,51 @@ const BOUNDS = [
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const LOCATION = {bounds: BOUNDS};
+
+// Function for generating a pseudorandom number
+const seed = (s) => () => {
+    s = Math.sin(s) * 10000;
+    return s - Math.floor(s);
+};
+const rnd = seed(1000); // () => Math.random()
+
+// Generating random coordinates of a point [lng, lat] in a given boundary
+const getRandomPointCoordinates = () => [
+    BOUNDS[0][0] + (BOUNDS[1][0] - BOUNDS[0][0]) * rnd(),
+    BOUNDS[1][1] + (BOUNDS[0][1] - BOUNDS[1][1]) * rnd()
+];
+
+const icons = [
+    'airport',
+    'attraction',
+    'auto',
+    'aviary',
+    'baby_shop',
+    'banks',
+    'barbeque',
+    'bars',
+    'beach',
+    'bench',
+    'bike',
+    'bike_rent',
+    'boat_station',
+    'bookstore',
+    'buddhism',
+    'building',
+    'bus',
+    'cafe',
+    'car_park',
+    'catholic_church',
+    'cemetery',
+    'childrens_playground',
+    'cinemas'
+];
+
+const colors = ['#F09A75', '#5EBD8C', '#E096D0'];
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const markers = icons.map((iconName) => ({
+    coordinates: getRandomPointCoordinates(),
+    name: iconName,
+    color: colors[Math.floor(rnd() * colors.length)]
+}));

example/vanilla.html

@@ -23,8 +23,9 @@
                 map.addChild((defaultFeatures = new MMapDefaultFeaturesLayer()));
                 map.addChild(new MMapControls({position: 'right'}).addChild(new MMapZoomControl({})));
 
-                const coordinates = [55.289051, 25.229907];
-                map.addChild(new MMapDefaultMarker({coordinates, color: '#F09A75', name: 'auto'}));
+                markers.forEach(({coordinates, name, color}) => {
+                    map.addChild(new MMapDefaultMarker({coordinates, color, name}));
+                });
             }
         </script>
 

src/MMapDefaultMarker/index.css

@@ -8,6 +8,13 @@
     border-radius: 50%;
 }
 
-.mappable--point svg {
-    transform: translate(calc(-50% + 2px), calc(-100% + 2px));
+.mappable--pin {
+    position: absolute;
+    transform: translate(calc(-50% + 2px), calc(-100%));
+}
+
+.mappable--icon {
+    color: #fffffffc;
+    position: absolute;
+    transform: translate(calc(-24px - 10px),10px);
 }

src/MMapDefaultMarker/index.ts

@@ -1,5 +1,6 @@
 import {MMapMarker, MMapMarkerProps} from '@mappable-world/mappable-types';
-import {IconName} from '../icons/types/icons';
+import {IconName} from '../icons/icon-name';
+import {icons} from '../icons';
 import pin from './pin.svg';
 import './index.css';
 
@@ -11,25 +12,42 @@ export type MMapDefaultMarkerProps = MMapMarkerProps & {
 export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMarkerProps> {
     private _marker: MMapMarker;
     private _markerElement: HTMLElement;
+    private _pin: HTMLElement;
+    private _icon: HTMLElement;
 
     constructor(props: MMapDefaultMarkerProps) {
         super(props);
     }
 
     protected _onAttach(): void {
         this._markerElement = document.createElement('mappable');
+        this._pin = document.createElement('mappable');
+        this._icon = 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._pin.classList.add('mappable--pin');
+        this._pin.innerHTML = pin;
+
+        this._icon.classList.add('mappable--icon');
+        this._icon.innerHTML = icons[this._props.name].normal;
+
+        this._pin.appendChild(this._icon);
+        this._markerElement.appendChild(this._pin);
+
         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._markerElement.style.backgroundColor = this._props.color;
+        }
+        if (propsDiff.name !== undefined) {
+            this._icon.innerHTML = icons[propsDiff.name].normal;
         }
         this._marker.update(this._props);
     }

src/icons/icon-name.ts

@@ -1,5 +1,5 @@
 /** Don't edit manually. Generated by script: ./tools/icons/generate-types.ts */
-type IconName =
+export type IconName =
   | 'airport'
   | 'attraction'
   | 'auto'
@@ -120,5 +120,3 @@ type IconName =
   | 'waterfall'
   | 'wc'
   | 'zoo';
-
-export {IconName};

src/icons/icon-size.ts

@@ -0,0 +1 @@
+export type IconSize = 'normal' | 'small';