[USAGE] New map usage (#5)

* feat: layer feature injected

* chore: removed dump id names

* chore: add dump module for fun

* chore: hmm

* chore: add id'ks

Co-authored-by: Patryk Średnicki <41010528+srednicki95@users.noreply.github.com>

src/examples/AzureLayer.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from "react";
+import {
+  AzureMapsProvider,
+  AzureMap,
+  AzureMapDataSourceProvider,
+  AzureMapLayerProvider,
+  AzureMapFeature,
+  AzureMapHtmlMarker,
+  IAzureMapOptions,
+  IAzureMapHtmlMarkerEvent
+} from "react-azure-maps";
+import atlas, { AuthenticationType, data } from "azure-maps-control";
+
+const AzureLayer: React.FC = () => {
+  const point1 = new data.Position(-100.01, 45.01);
+  const point2 = new data.Position(-100.2, 45.1);
+
+
+  const option: IAzureMapOptions = useMemo(() => {
+    return {
+      authOptions: {
+        authType: AuthenticationType.subscriptionKey,
+        subscriptionKey: "tTk1JVEaeNvDkxxnxHm9cYaCvqlOq1u-fXTvyXn2XkA"
+      },
+      center: [-100.01, 45.01],
+      zoom: 2,
+      view: "Auto"
+    };
+  }, []);
+
+  const onClick = () => {
+    console.log("ASD");
+  };
+
+  const azureHtmlMapMarkerOptions = {
+    htmlContent: '<div class="pulseIcon"></div>',
+    position: [-110, 45]
+  };
+
+  const eventToMarker: Array<IAzureMapHtmlMarkerEvent> = [
+    { eventName: "click", callback: onClick }
+  ];
+
+  return (
+      <>
+    <div>
+      <AzureMapsProvider>
+        <AzureMap options={option}>
+          <AzureMapDataSourceProvider id={'dataSource'}>
+            <AzureMapLayerProvider id={'layer'} options={{url: 'https://i.imgur.com/KBkuZLV.jpg', coordinates:[[-70, 40], [-60, 37], [-63, 30], [-72, 33]]}} type={'ImageLayer'}></AzureMapLayerProvider>
+            <AzureMapFeature
+                id={'itsmyfeature'}
+                key={'asd'}
+                type="Point"
+                coordinate={point1}
+                properties={{
+                  title: "Microsoft",
+                  icon: "pin-round-blue"
+                }}
+            ></AzureMapFeature>
+          </AzureMapDataSourceProvider>
+          <AzureMapHtmlMarker
+              id={'dasdas'}
+            options={azureHtmlMapMarkerOptions}
+            events={eventToMarker}
+          />
+        </AzureMap>
+      </AzureMapsProvider>
+    </div>
+    <div>
+    <AzureMapsProvider>
+      <AzureMap options={option}>
+        <AzureMapDataSourceProvider id={'dddd'}>
+          <AzureMapLayerProvider id={'heatMap'} options={{}} type={'HeatLayer'}></AzureMapLayerProvider>
+          <AzureMapFeature
+              id={'luuuuju'}
+              key={'dddd'}
+              type="Point"
+              coordinate={point1}
+              properties={{
+                title: "Microsoft",
+                icon: "pin-round-blue"
+              }}
+          ></AzureMapFeature>
+        </AzureMapDataSourceProvider>
+        <AzureMapHtmlMarker
+            id={'asdasdxzcvcbsdvgf'}
+            options={azureHtmlMapMarkerOptions}
+            events={eventToMarker}
+        />
+      </AzureMap>
+    </AzureMapsProvider>
+    </div>
+  </>
+  );
+};
+
+export default AzureLayer;

src/examples/DefaultMap.tsx

@@ -18,7 +18,7 @@ const DefaultMap: React.FC = () => {
     return {
       authOptions: {
         authType: AuthenticationType.subscriptionKey,
-        subscriptionKey: ""
+        subscriptionKey: "tTk1JVEaeNvDkxxnxHm9cYaCvqlOq1u-fXTvyXn2XkA"
       },
       center: [-100.01, 45.01],
       zoom: 12,
@@ -43,8 +43,8 @@ const DefaultMap: React.FC = () => {
     <div>
       <AzureMapsProvider>
         <AzureMap options={option}>
-          <AzureMapDataSourceProvider>
-            <AzureMapLayerProvider></AzureMapLayerProvider>
+          <AzureMapDataSourceProvider id={'default'}>
+            <AzureMapLayerProvider id={'asd'} options={{}} type={'SymbolLayer'}></AzureMapLayerProvider>
             <AzureMapFeature
               type="Point"
               coordinate={xd}
@@ -55,6 +55,7 @@ const DefaultMap: React.FC = () => {
             ></AzureMapFeature>
           </AzureMapDataSourceProvider>
           <AzureMapHtmlMarker
+              id={'cxzvcxdfsd'}
             options={azureHtmlMapMarkerOptions}
             events={eventToMarker}
           />

src/examples/MyDump/MyDump.tsx

@@ -0,0 +1,120 @@
+import React, {memo, useMemo, useState} from "react";
+import {
+    AzureMap,
+    AzureMapDataSourceProvider,
+    AzureMapFeature,
+    AzureMapHtmlMarker,
+    AzureMapLayerProvider,
+    AzureMapsProvider,
+    IAzureMapHtmlMarkerEvent,
+    IAzureMapOptions
+} from "react-azure-maps";
+import {AuthenticationType, data} from "azure-maps-control";
+
+const point1 = new data.Position(-100.01, 45.01);
+const point2 = new data.Position(-120.2, 45.1);
+const point3 = new data.Position(-120.2, 50.1);
+
+
+
+const MyDump: React.FC = () => {
+    const [dump, setDump] = useState('START');
+    const [markers, setMarkers] = useState([point1, point2, point3]);
+
+    const option: IAzureMapOptions = useMemo(() => {
+        return {
+            authOptions: {
+                authType: AuthenticationType.subscriptionKey,
+                subscriptionKey: "tTk1JVEaeNvDkxxnxHm9cYaCvqlOq1u-fXTvyXn2XkA"
+            },
+            center: [-100.01, 45.01],
+            zoom: 2,
+            view: "Auto"
+        };
+    }, []);
+
+    const onClick = () => {
+        console.log("ASD");
+    };
+
+    const azureHtmlMapMarkerOptions = {
+        htmlContent: '<div class="pulseIcon"></div>',
+        position: [-110, 45]
+    };
+
+    const eventToMarker: Array<IAzureMapHtmlMarkerEvent> = [
+        {eventName: "click", callback: onClick}
+    ];
+
+    const addMarker = () => {
+        const randomLongitude = Math.floor(Math.random() * (-80 - (-120)) + -120);
+        const randomLatitude = Math.floor(Math.random() * (30 - 65) + 65);
+        const newPoint = new data.Position(randomLongitude, randomLatitude)
+        setMarkers([newPoint])
+    }
+
+    const renderPoint = (marker: data.Position) => {
+
+
+        const rendId = Math.floor(Math.random() * (80 - (120)) + 120);
+
+        return <AzureMapFeature
+            key={rendId}
+            id={rendId.toString()}
+            type="Point"
+            coordinate={marker}
+            properties={{
+                title: "Microsoft",
+                icon: "pin-round-blue"
+            }}
+        />
+    }
+
+
+    console.log("MAP")
+    return (
+        <>
+            MAP {dump}
+            <div style={styles.buttonContainer}>
+                <div style={styles.button} onClick={addMarker}> ADD</div>
+                <div style={styles.button} onClick={() => setMarkers([[-22, 55]])}> REMOVE LAST</div>
+                <div style={styles.button}> TRHRS</div>
+            </div>
+            <div>
+                <AzureMapsProvider>
+                    <AzureMap options={option}>
+                        <AzureMapDataSourceProvider id={'jsdjasjd'}>
+                            <AzureMapLayerProvider id={'dsadas'} options={{}} type={'SymbolLayer'}></AzureMapLayerProvider>
+                            {markers.map(marker =>
+                                renderPoint(marker)
+                            )}
+                            {/*{renderPoint([12, 23])}*/}
+                        </AzureMapDataSourceProvider>
+                        <AzureMapHtmlMarker
+                            id={'hhhtml'}
+                            options={azureHtmlMapMarkerOptions}
+                            events={eventToMarker}
+                        />
+                    </AzureMap>
+                </AzureMapsProvider>
+            </div>
+        </>
+    );
+};
+
+const styles = {
+    buttonContainer: {
+        height: 40,
+        display: 'flex',
+        justifyContent: 'space-around',
+        padding: 10
+    },
+    button: {
+        height: 35,
+        width: 80,
+        backgroundColor: '#68aba3',
+        "text-align": "center",
+    }
+}
+
+export default memo(MyDump);

src/examples/MyDump/MyDumpContainer.tsx

@@ -0,0 +1,29 @@
+// @flow
+import * as React from 'react';
+import MyDump from "./MyDump";
+import {MyDumpWrapper} from "./MyDumpWrapper";
+
+type Props = {
+
+};
+export const MyDumpContainer = (props: Props) => {
+    return (
+        <div>
+            <div style={styles.buttons}>
+                My Dump container
+                <MyDumpWrapper/>
+
+            </div>
+        </div>
+    );
+};
+
+
+export const styles = {
+    buttons: {
+        border: "solid",
+        borderSize: "2px",
+        flex: 1,
+        borderColor: '#885875'
+    }
+}

src/examples/MyDump/MyDumpWrapper.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {useState} from "react";
+import MyDump from "./MyDump";
+
+export type DumpProps = {
+    text?: String
+};
+export const MyDumpWrapper = (props: DumpProps) => {
+    const [dump, setDump] = useState('START');
+    console.log('Wrapper')
+    return (
+        <div style={wrapperStyles.wrapper}>
+            Wrapper {dump}
+            <div style={wrapperStyles.buttonContainer}>
+                <div style={wrapperStyles.button} onClick={() => setDump('FIRST BUTTON')} />
+                <div style={wrapperStyles.button} onClick={() => setDump('SECOND BUTTON')}/>
+                <div style={wrapperStyles.button}/>
+            </div>
+            <MyDump />
+        </div>
+    );
+};
+
+export const wrapperStyles = {
+    wrapper: {
+        border: "solid",
+        borderSize: "2px",
+        borderColor: '#2113ab'
+    },
+    buttonContainer: {
+        height: 40,
+        display: 'flex',
+        justifyContent: 'space-around',
+        padding: 10
+    },
+    button: {
+        height: 35,
+        width: 80,
+        backgroundColor: '#2213ab'
+    }
+}

src/examples/examplesList.tsx

@@ -1,4 +1,7 @@
 import DefaultMap from "./DefaultMap";
+import AzureLayer from "./AzureLayer";
+import MyDump from "./MyDump/MyDump";
+import {MyDumpContainer} from "./MyDump/MyDumpContainer";
 
 export type MapExampleItem = {
   name: string;
@@ -15,8 +18,13 @@ export const examplesList: MapExampleItem[] = [
     exact: true
   },
   {
-    name: "Default map 2",
-    component: DefaultMap,
-    path: "/foo"
+    name: "Layers",
+    component: AzureLayer,
+    path: "/layers"
+  },
+  {
+    name: "MyDump",
+    component: MyDumpContainer,
+    path: "/myDump"
   }
 ];