Styles prop (#13)

* feat: layer feature injected

* fix: syles updated

src/examples/DefaultMap.tsx

@@ -40,7 +40,9 @@ const DefaultMap: React.FC = () => {
   ]
 
   return (
-    <div>
+    <div style={{
+        height: '300px'
+    }}>
       <AzureMapsProvider>
         <AzureMap options={option}>
           <AzureMapDataSourceProvider id={'default DataSourceProvider'}>

src/examples/MarkersExample/MarkersExample.tsx

@@ -183,11 +183,11 @@ const MarkersExample: React.FC = () => {
                   console.log('Data on source added', e)
                 }
               }}
-              id={'myDump AzureMapDataSourceProvider'}
+              id={'markersExample AzureMapDataSourceProvider'}
               options={{ cluster: true }}
             >
               <AzureMapLayerProvider
-                id={'myDump AzureMapLayerProvider'}
+                id={'markersExample AzureMapLayerProvider'}
                 options={{
                   textOptions: {
                     textField: ['get', 'title'], //Specify the property name that contains the text you want to appear with the symbol.

src/examples/PopupExample.tsx

@@ -71,22 +71,24 @@ const PopupExample: React.FC = () => {
             Close Popup
           </Button>
         </div>
-        <AzureMapsProvider>
-          <AzureMap options={option}>
-            <AzureMapPopup
-              isVisible={isVisible}
-              options={popupOptions}
-              popupContent={
-                <div style={wrapperStyles.popupStyles}>Hello World</div>
-              }
-            />
-            <AzureMapHtmlMarker
-              isPopupVisible={isHtmlMarkerPopupVisible}
-              markerContent={<div className="pulseIcon"></div>}
-              options={htmlMarkerOptions}
-            />
-          </AzureMap>
-        </AzureMapsProvider>
+        <div style={wrapperStyles.map}>
+          <AzureMapsProvider>
+            <AzureMap options={option}>
+              <AzureMapPopup
+                  isVisible={isVisible}
+                  options={popupOptions}
+                  popupContent={
+                    <div style={wrapperStyles.popupStyles}>Hello World</div>
+                  }
+              />
+              <AzureMapHtmlMarker
+                  isPopupVisible={isHtmlMarkerPopupVisible}
+                  markerContent={<div className="pulseIcon"></div>}
+                  options={htmlMarkerOptions}
+              />
+            </AzureMap>
+          </AzureMapsProvider>
+        </div>
       </Paper>
     </div>
   )
@@ -94,7 +96,7 @@ const PopupExample: React.FC = () => {
 
 export const wrapperStyles = {
   map: {
-    height: '300px'
+    height: '500px'
   },
   wrapper: {
     padding: '15px',