Adding default markers and icon presets for them

.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
-    extends: ['./node_modules/@mappable-world/mappable-cli/.eslintrc.js']
+    extends: ['./node_modules/@mappable-world/mappable-cli/.eslintrc.js'],
+    rules: {
+        'no-console': 'error'
+    }
 };

docs/icons.generated.md

@@ -0,0 +1,135 @@
+<!-- Don't edit manually. Generated by script: ./tools/icons/generate-docs.ts -->
+
+# List of supported icons
+
+| Name                  | Normal Size                                                            |
+| --------------------- | ---------------------------------------------------------------------- |
+| airfield              | ![airfield](../static/icons/airfield_24.svg)                           |
+| airport               | ![airport](../static/icons/airport_24.svg)                             |
+| animation             | ![animation](../static/icons/animation_24.svg)                         |
+| armenian_church       | ![armenian_church](../static/icons/armenian_church_24.svg)             |
+| attraction            | ![attraction](../static/icons/attraction_24.svg)                       |
+| auto                  | ![auto](../static/icons/auto_24.svg)                                   |
+| aviary                | ![aviary](../static/icons/aviary_24.svg)                               |
+| baby_shop             | ![baby_shop](../static/icons/baby_shop_24.svg)                         |
+| banks                 | ![banks](../static/icons/banks_24.svg)                                 |
+| barbeque              | ![barbeque](../static/icons/barbeque_24.svg)                           |
+| bars                  | ![bars](../static/icons/bars_24.svg)                                   |
+| beach                 | ![beach](../static/icons/beach_24.svg)                                 |
+| bench                 | ![bench](../static/icons/bench_24.svg)                                 |
+| bike                  | ![bike](../static/icons/bike_24.svg)                                   |
+| bike_rent             | ![bike_rent](../static/icons/bike_rent_24.svg)                         |
+| boat_station          | ![boat_station](../static/icons/boat_station_24.svg)                   |
+| bookstore             | ![bookstore](../static/icons/bookstore_24.svg)                         |
+| buddhism              | ![buddhism](../static/icons/buddhism_24.svg)                           |
+| building              | ![building](../static/icons/building_24.svg)                           |
+| bus                   | ![bus](../static/icons/bus_24.svg)                                     |
+| cafe                  | ![cafe](../static/icons/cafe_24.svg)                                   |
+| car_park              | ![car_park](../static/icons/car_park_24.svg)                           |
+| catholic_church       | ![catholic_church](../static/icons/catholic_church_24.svg)             |
+| cemetery              | ![cemetery](../static/icons/cemetery_24.svg)                           |
+| childrens_playground  | ![childrens_playground](../static/icons/childrens_playground_24.svg)   |
+| cinemas               | ![cinemas](../static/icons/cinemas_24.svg)                             |
+| clothes_shop          | ![clothes_shop](../static/icons/clothes_shop_24.svg)                   |
+| college               | ![college](../static/icons/college_24.svg)                             |
+| concert_hall          | ![concert_hall](../static/icons/concert_hall_24.svg)                   |
+| confectionary         | ![confectionary](../static/icons/confectionary_24.svg)                 |
+| currency_exchange     | ![currency_exchange](../static/icons/currency_exchange_24.svg)         |
+| dental                | ![dental](../static/icons/dental_24.svg)                               |
+| driving_school        | ![driving_school](../static/icons/driving_school_24.svg)               |
+| drugstores            | ![drugstores](../static/icons/drugstores_24.svg)                       |
+| dry_cleaning          | ![dry_cleaning](../static/icons/dry_cleaning_24.svg)                   |
+| equestrian            | ![equestrian](../static/icons/equestrian_24.svg)                       |
+| fallback              | ![fallback](../static/icons/fallback_24.svg)                           |
+| fast_food             | ![fast_food](../static/icons/fast_food_24.svg)                         |
+| festival              | ![festival](../static/icons/festival_24.svg)                           |
+| film_studio           | ![film_studio](../static/icons/film_studio_24.svg)                     |
+| fire_station          | ![fire_station](../static/icons/fire_station_24.svg)                   |
+| fitness               | ![fitness](../static/icons/fitness_24.svg)                             |
+| flower_shop           | ![flower_shop](../static/icons/flower_shop_24.svg)                     |
+| forest                | ![forest](../static/icons/forest_24.svg)                               |
+| fountain              | ![fountain](../static/icons/fountain_24.svg)                           |
+| furniture_store       | ![furniture_store](../static/icons/furniture_store_24.svg)             |
+| garden                | ![garden](../static/icons/garden_24.svg)                               |
+| gasstation            | ![gasstation](../static/icons/gasstation_24.svg)                       |
+| government            | ![government](../static/icons/government_24.svg)                       |
+| hairdressers          | ![hairdressers](../static/icons/hairdressers_24.svg)                   |
+| haulier               | ![haulier](../static/icons/haulier_24.svg)                             |
+| helicopter            | ![helicopter](../static/icons/helicopter_24.svg)                       |
+| hospital              | ![hospital](../static/icons/hospital_24.svg)                           |
+| hotels                | ![hotels](../static/icons/hotels_24.svg)                               |
+| hypermarket           | ![hypermarket](../static/icons/hypermarket_24.svg)                     |
+| industrial_enterprise | ![industrial_enterprise](../static/icons/industrial_enterprise_24.svg) |
+| information           | ![information](../static/icons/information_24.svg)                     |
+| kindergarten          | ![kindergarten](../static/icons/kindergarten_24.svg)                   |
+| landmark              | ![landmark](../static/icons/landmark_24.svg)                           |
+| laundry               | ![laundry](../static/icons/laundry_24.svg)                             |
+| library               | ![library](../static/icons/library_24.svg)                             |
+| malls                 | ![malls](../static/icons/malls_24.svg)                                 |
+| medicine              | ![medicine](../static/icons/medicine_24.svg)                           |
+| memorable_event       | ![memorable_event](../static/icons/memorable_event_24.svg)             |
+| metro                 | ![metro](../static/icons/metro_24.svg)                                 |
+| metro_bus             | ![metro_bus](../static/icons/metro_bus_24.svg)                         |
+| metro_cable           | ![metro_cable](../static/icons/metro_cable_24.svg)                     |
+| metro_entrance        | ![metro_entrance](../static/icons/metro_entrance_24.svg)               |
+| metro_funicular       | ![metro_funicular](../static/icons/metro_funicular_24.svg)             |
+| metro_light           | ![metro_light](../static/icons/metro_light_24.svg)                     |
+| metro_monorail        | ![metro_monorail](../static/icons/metro_monorail_24.svg)               |
+| metro_tram            | ![metro_tram](../static/icons/metro_tram_24.svg)                       |
+| mobile_phones         | ![mobile_phones](../static/icons/mobile_phones_24.svg)                 |
+| money_coin            | ![money_coin](../static/icons/money_coin_24.svg)                       |
+| monument              | ![monument](../static/icons/monument_24.svg)                           |
+| mosque                | ![mosque](../static/icons/mosque_24.svg)                               |
+| mountain              | ![mountain](../static/icons/mountain_24.svg)                           |
+| museum                | ![museum](../static/icons/museum_24.svg)                               |
+| nail_studio           | ![nail_studio](../static/icons/nail_studio_24.svg)                     |
+| office                | ![office](../static/icons/office_24.svg)                               |
+| office_service        | ![office_service](../static/icons/office_service_24.svg)               |
+| orthodox_church       | ![orthodox_church](../static/icons/orthodox_church_24.svg)             |
+| park                  | ![park](../static/icons/park_24.svg)                                   |
+| pavilion              | ![pavilion](../static/icons/pavilion_24.svg)                           |
+| pet_playground        | ![pet_playground](../static/icons/pet_playground_24.svg)               |
+| petshop               | ![petshop](../static/icons/petshop_24.svg)                             |
+| photo                 | ![photo](../static/icons/photo_24.svg)                                 |
+| picnic                | ![picnic](../static/icons/picnic_24.svg)                               |
+| pier                  | ![pier](../static/icons/pier_24.svg)                                   |
+| playground            | ![playground](../static/icons/playground_24.svg)                       |
+| police                | ![police](../static/icons/police_24.svg)                               |
+| police_post           | ![police_post](../static/icons/police_post_24.svg)                     |
+| port                  | ![port](../static/icons/port_24.svg)                                   |
+| post_office           | ![post_office](../static/icons/post_office_24.svg)                     |
+| printing_services     | ![printing_services](../static/icons/printing_services_24.svg)         |
+| protestant_church     | ![protestant_church](../static/icons/protestant_church_24.svg)         |
+| racing                | ![racing](../static/icons/racing_24.svg)                               |
+| railway               | ![railway](../static/icons/railway_24.svg)                             |
+| railway_station       | ![railway_station](../static/icons/railway_station_24.svg)             |
+| recycling             | ![recycling](../static/icons/recycling_24.svg)                         |
+| restaurants           | ![restaurants](../static/icons/restaurants_24.svg)                     |
+| rezervation           | ![rezervation](../static/icons/rezervation_24.svg)                     |
+| sanatorium            | ![sanatorium](../static/icons/sanatorium_24.svg)                       |
+| science               | ![science](../static/icons/science_24.svg)                             |
+| skating_rink          | ![skating_rink](../static/icons/skating_rink_24.svg)                   |
+| software              | ![software](../static/icons/software_24.svg)                           |
+| spa                   | ![spa](../static/icons/spa_24.svg)                                     |
+| sportcenter           | ![sportcenter](../static/icons/sportcenter_24.svg)                     |
+| spring                | ![spring](../static/icons/spring_24.svg)                               |
+| stadium               | ![stadium](../static/icons/stadium_24.svg)                             |
+| stage                 | ![stage](../static/icons/stage_24.svg)                                 |
+| stenograffia          | ![stenograffia](../static/icons/stenograffia_24.svg)                   |
+| supermarket           | ![supermarket](../static/icons/supermarket_24.svg)                     |
+| sushi                 | ![sushi](../static/icons/sushi_24.svg)                                 |
+| swimming_pool         | ![swimming_pool](../static/icons/swimming_pool_24.svg)                 |
+| synagogue             | ![synagogue](../static/icons/synagogue_24.svg)                         |
+| tailor                | ![tailor](../static/icons/tailor_24.svg)                               |
+| taxi                  | ![taxi](../static/icons/taxi_24.svg)                                   |
+| theatre               | ![theatre](../static/icons/theatre_24.svg)                             |
+| ticket_office         | ![ticket_office](../static/icons/ticket_office_24.svg)                 |
+| tire_fitting          | ![tire_fitting](../static/icons/tire_fitting_24.svg)                   |
+| tram                  | ![tram](../static/icons/tram_24.svg)                                   |
+| trash                 | ![trash](../static/icons/trash_24.svg)                                 |
+| travel_agency         | ![travel_agency](../static/icons/travel_agency_24.svg)                 |
+| viewpoint             | ![viewpoint](../static/icons/viewpoint_24.svg)                         |
+| waterfall             | ![waterfall](../static/icons/waterfall_24.svg)                         |
+| waterpark             | ![waterpark](../static/icons/waterpark_24.svg)                         |
+| wc                    | ![wc](../static/icons/wc_24.svg)                                       |
+| zoo                   | ![zoo](../static/icons/zoo_24.svg)                                     |

example/default-markers/common.ts

@@ -0,0 +1,45 @@
+import type {LngLat, LngLatBounds, MMapLocationRequest} from '@mappable-world/mappable-types';
+import {MMapDefaultMarkerProps} from '../../src';
+
+const BOUNDS: LngLatBounds = [
+    [54.58311, 25.9985],
+    [56.30248, 24.47889]
+];
+
+export const LOCATION: MMapLocationRequest = {bounds: BOUNDS};
+
+const CENTER: LngLat = [(BOUNDS[0][0] + BOUNDS[1][0]) / 2, (BOUNDS[0][1] + BOUNDS[1][1]) / 2];
+const STEP = 0.3;
+
+const getCoordinates = (row: number, col: number): LngLat => [CENTER[0] + row * STEP, CENTER[1] + col * STEP];
+
+export const MARKER_LOCATIONS: MMapDefaultMarkerProps[] = [
+    // default marker
+    {coordinates: getCoordinates(-3, 0.5), size: 'normal'},
+    {coordinates: getCoordinates(-3, 0), size: 'small'},
+    {coordinates: getCoordinates(-3, -0.5), size: 'micro'},
+    // fallback color marker
+    {coordinates: getCoordinates(-2, 0.5), size: 'normal', color: 'bluebell',iconName:'fallback'},
+    {coordinates: getCoordinates(-2, 0), size: 'small', color: 'bluebell',iconName:'fallback'},
+    {coordinates: getCoordinates(-2, -0.5), size: 'micro', color: 'bluebell',iconName:'fallback'},
+    // color icon marker
+    {coordinates: getCoordinates(-1, 0.5), size: 'normal', color: 'ceil', iconName: 'attraction'},
+    {coordinates: getCoordinates(-1, 0), size: 'small', color: 'ceil', iconName: 'attraction'},
+    {coordinates: getCoordinates(-1, -0.5), size: 'micro', color: 'ceil', iconName: 'attraction'},
+    // title hint
+    {coordinates: getCoordinates(0, 0.5), size: 'normal', color: 'darksalmon', iconName: 'restaurants',title:'Normal title'},
+    {coordinates: getCoordinates(0, 0), size: 'small', color: 'darksalmon', iconName: 'restaurants',title:'Normal title'},
+    {coordinates: getCoordinates(0, -0.5), size: 'micro', color: 'darksalmon', iconName: 'restaurants',title:'Normal title'},
+    // title subtitle hint
+    {coordinates: getCoordinates(1, 0.5), size: 'normal', color: 'green', iconName: 'beach',title:'Normal title',subtitle:'Normal subtitle'},
+    {coordinates: getCoordinates(1, 0), size: 'small', color: 'green', iconName: 'beach',title:'Normal title',subtitle:'Normal subtitle'},
+    {coordinates: getCoordinates(1, -0.5), size: 'micro', color: 'green', iconName: 'beach',title:'Normal title',subtitle:'Normal subtitle'},
+    // hover hint
+    {coordinates: getCoordinates(2, 0.5), size: 'normal', color: "pink", iconName: 'medicine',title:'Hover title',subtitle:'Hover subtitle',staticHint:false,},
+    {coordinates: getCoordinates(2, 0), size: 'small', color: "pink", iconName: 'medicine',title:'Hover title',subtitle:'Hover subtitle',staticHint:false,},
+    {coordinates: getCoordinates(2, -0.5), size: 'micro', color: "pink", iconName: 'medicine',title:'Hover title',subtitle:'Hover subtitle',staticHint:false,},
+    // overflow hint
+    {coordinates: getCoordinates(3, 0.5), size: 'normal', color: "orchid", iconName: 'auto',title:'Overflow title Overflow title',subtitle:'Overflow subtitle Overflow subtitle'},
+    {coordinates: getCoordinates(3, 0), size: 'small', color: "orchid", iconName: 'auto',title:'Overflow title Overflow title',subtitle:'Overflow subtitle Overflow subtitle'},
+    {coordinates: getCoordinates(3, -0.5), size: 'micro', color: "orchid", iconName: 'auto',title:'Overflow title Overflow title',subtitle:'Overflow subtitle Overflow subtitle'},
+];

example/default-markers/react/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+    <head>
+        <title>React example mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../../index.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="./index.tsx"
+        ></script>
+
+        <link rel="stylesheet" href="../../index.css" />
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>

example/default-markers/react/index.tsx

@@ -0,0 +1,46 @@
+import {LOCATION, MARKER_LOCATIONS} from '../common';
+import {MMapTheme} from '@mappable-world/mappable-types';
+
+window.map = null;
+
+main();
+async function main() {
+    const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
+    const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
+
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} =
+        reactify.module(mappable);
+
+    const {useState, useCallback} = React;
+
+    const {MMapDefaultMarker} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+        document.getElementById('app')
+    );
+
+    function App() {
+        const [location] = useState(LOCATION);
+        const [theme, setTheme] = useState<MMapTheme>('light');
+
+        const switchTheme = useCallback(() => {
+            setTheme(theme === 'light' ? 'dark' : 'light');
+        }, [theme]);
+
+        return (
+            <MMap location={location} theme={theme} ref={(x) => (map = x)}>
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="top right">
+                    <MMapControlButton text="Switch theme" onClick={switchTheme} />
+                </MMapControls>
+                {MARKER_LOCATIONS.map((props, i) => (
+                    <MMapDefaultMarker {...props} key={i} />
+                ))}
+            </MMap>
+        );
+    }
+}