knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1061 from datopian/feature/style-in-map-component

Browse Source 
Created the style property for the map component
This commit is contained in:
Leonardo Yuri Farias 2023-12-19 22:20:07 -03:00 committed by GitHub
commit 2ec143707d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/hip-trainers-pretend.md Normal file
View File

@ -0,0 +1,5 @@
---
'@portaljs/components': patch
---
Created the style property in the Map component

15
packages/components/src/components/Map.tsx
View File

@ -21,15 +21,16 @@ export type MapProps = {
ending: string; ending: string;
}; };
tooltip?: tooltip?:
| { | {
propNames: string[]; propNames: string[];
} }
| boolean; | boolean;
_id?: number; _id?: number;
}[]; }[];
title?: string; title?: string;
center?: { latitude: number | undefined; longitude: number | undefined }; center?: { latitude: number | undefined; longitude: number | undefined };
zoom?: number; zoom?: number;
style?: Object;
}; };
export function Map({ export function Map({
@ -44,6 +45,7 @@ export function Map({
center = { latitude: 45, longitude: 45 }, center = { latitude: 45, longitude: 45 },
zoom = 2, zoom = 2,
title = '', title = '',
style = {}
}: MapProps) { }: MapProps) {
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const [layersData, setLayersData] = useState<any>([]); const [layersData, setLayersData] = useState<any>([]);
@ -96,6 +98,7 @@ export function Map({
zoom={zoom} zoom={zoom}
scrollWheelZoom={false} scrollWheelZoom={false}
className="h-80 w-full" className="h-80 w-full"
style={style ?? {}}
// @ts-ignore // @ts-ignore
whenReady={(map: any) => { whenReady={(map: any) => {
// Enable zoom using scroll wheel // Enable zoom using scroll wheel
@ -104,13 +107,13 @@ export function Map({
// Create the title box // Create the title box
var info = new L.Control() as any; var info = new L.Control() as any;
info.onAdd = function () { info.onAdd = function() {
this._div = L.DomUtil.create('div', 'info'); this._div = L.DomUtil.create('div', 'info');
this.update(); this.update();
return this._div; 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>`; this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
}; };

3
packages/components/stories/Map.stories.ts
View File

@ -21,6 +21,9 @@ const meta: Meta = {
zoom: { zoom: {
description: 'Zoom level', description: 'Zoom level',
}, },
style: {
description: "Styles for the container"
}
}, },
}; };