From 4ddfc1126a3f0b8137ea47a08a36c56b7373b8f6 Mon Sep 17 00:00:00 2001
From: Leonardo Farias <leonardo.farias@datopian.com>
Date: Tue, 19 Dec 2023 22:16:57 -0300
Subject: [PATCH] Created the style property for the map component

---
 .changeset/hip-trainers-pretend.md         |  5 +++++
 packages/components/src/components/Map.tsx | 15 +++++++++------
 packages/components/stories/Map.stories.ts |  3 +++
 3 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/hip-trainers-pretend.md

diff --git a/.changeset/hip-trainers-pretend.md b/.changeset/hip-trainers-pretend.md
new file mode 100644
index 000000000..f9a54bc7a
--- /dev/null
+++ b/.changeset/hip-trainers-pretend.md
@@ -0,0 +1,5 @@
+---
+'@portaljs/components': patch
+---
+
+Created the style property in the Map component
diff --git a/packages/components/src/components/Map.tsx b/packages/components/src/components/Map.tsx
index d17fbd4c0..9a902299f 100644
--- a/packages/components/src/components/Map.tsx
+++ b/packages/components/src/components/Map.tsx
@@ -21,15 +21,16 @@ export type MapProps = {
       ending: string;
     };
     tooltip?:
-      | {
-          propNames: string[];
-        }
-      | boolean;
+    | {
+      propNames: string[];
+    }
+    | boolean;
     _id?: number;
   }[];
   title?: string;
   center?: { latitude: number | undefined; longitude: number | undefined };
   zoom?: number;
+  style?: Object;
 };
 
 export function Map({
@@ -44,6 +45,7 @@ export function Map({
   center = { latitude: 45, longitude: 45 },
   zoom = 2,
   title = '',
+  style = {}
 }: MapProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [layersData, setLayersData] = useState<any>([]);
@@ -96,6 +98,7 @@ export function Map({
       zoom={zoom}
       scrollWheelZoom={false}
       className="h-80 w-full"
+      style={style ?? {}}
       // @ts-ignore
       whenReady={(map: any) => {
         //  Enable zoom using scroll wheel
@@ -104,13 +107,13 @@ export function Map({
         //  Create the title box
         var info = new L.Control() as any;
 
-        info.onAdd = function () {
+        info.onAdd = function() {
           this._div = L.DomUtil.create('div', 'info');
           this.update();
           return this._div;
         };
 
-        info.update = function () {
+        info.update = function() {
           this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
         };
 
diff --git a/packages/components/stories/Map.stories.ts b/packages/components/stories/Map.stories.ts
index 9c49e8965..e1c0502e6 100644
--- a/packages/components/stories/Map.stories.ts
+++ b/packages/components/stories/Map.stories.ts
@@ -21,6 +21,9 @@ const meta: Meta = {
     zoom: {
       description: 'Zoom level',
     },
+    style: {
+      description: "Styles for the container"
+    }
   },
 };