Update vite.config.ts

* [components,maps][l]: implements Leaflet map component -- #963

* [openspending, maps][m]: fix build for leaflet map

* Feature/openlayers map (#967)

* [maps][xl] - working with swc equals to minify

* [maps][xs] - fixing height

* [openspending][xs] - testing

* [openspending][xs] - testing

* [openspending][xs] - change order drd

* [openspending][xs] - add map

* [maps,tests][xs]: add default export to OpenLayers component

* [@portaljs/components][m] - map components

---------

Co-authored-by: João Demenech <joaommdemenech@gmail.com>

examples/openspending/content/stories/frankfurt-is-investing-in-education-and-your-city-should-too.mdx

@@ -15,17 +15,6 @@ helps to bring this data to life. It maps out the city's annual spending across
 the education slice has grown noticeably over the years, indicating Frankfurt's intention to prioritize this space.
 The city's commitment to education is abundantly clear.
 
-<Map data="https://openlayers.org/data/vector/ecoregions.json" />
-
-<OpenLayers
-  layers={[
-    {
-      url: 'https://openlayers.org/data/vector/ecoregions.json',
-      name: 'Teste',
-    },
-  ]}
-/>
-
 <VegaLite
   spec={{
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',

packages/components/src/components/Map.tsx

@@ -6,93 +6,86 @@ import {
   MapContainer,
   TileLayer,
   GeoJSON as GeoJSONLayer,
+  LayersControl
 } from 'react-leaflet';
 
 import * as L from 'leaflet';
 
 export type MapProps = {
-  data: string | GeoJSON.GeoJSON;
+  layers: {
+    data: string | GeoJSON.GeoJSON;
+    name: string;
+    colorScale?: {
+      starting: string;
+      ending: string;
+    };
+    tooltip?:
+      | {
+          propNames: string[];
+        }
+      | boolean;
+    _id?: number;
+  }[];
   title?: string;
-  colorScale?: {
-    starting: string;
-    ending: string;
-  };
   center?: { latitude: number | undefined; longitude: number | undefined };
   zoom?: number;
-  tooltip?: {
-    prop: string;
-  };
 };
 
 export function Map({
-  data,
-  title = '',
-  colorScale = { starting: 'blue', ending: 'red' },
+  layers = [
+    {
+      data: null,
+      name: null,
+      colorScale: { starting: 'blue', ending: 'red' },
+      tooltip: true,
+    },
+  ],
   center = { latitude: 45, longitude: 45 },
   zoom = 2,
-  tooltip = {
-    prop: '',
-  },
+  title = '',
 }: MapProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  //  By default, assumes data is an Array...
-  const [geoJsonData, setGeoJsonData] = useState<any>(null);
+  const [layersData, setLayersData] = useState<any>([]);
 
   useEffect(() => {
-    //  If data is string, assume it's a URL
-    if (typeof data === 'string') {
-      setIsLoading(true);
+    const loadDataPromises = layers.map(async (layer) => {
+      let layerData: any;
 
-      loadData(data).then((res: any) => {
-        const geoJsonObject = JSON.parse(res);
+      if (typeof layer.data === 'string') {
+        //  If "data" is string, assume it's a URL
+        setIsLoading(true);
+        layerData = await loadData(layer.data).then((res: any) => {
+          return JSON.parse(res);
+        });
+      } else {
+        //  Else, expect raw GeoJSON
+        layerData = layer.data;
+      }
 
+      if (layer.colorScale) {
         const colorScaleAr = chroma
-          .scale([colorScale.starting, colorScale.ending])
+          .scale([layer.colorScale.starting, layer.colorScale.ending])
           .mode('lch')
-          .colors(geoJsonObject.features.length);
+          .colors(layerData.features.length);
 
-        geoJsonObject.features.forEach((feature, i) => {
+        layerData.features.forEach((feature, i) => {
+          //  Only style if the feature doesn't have a color prop
           if (feature.color === undefined) {
             feature.color = colorScaleAr[i];
           }
         });
+      }
 
-        setGeoJsonData(geoJsonObject);
-        setIsLoading(false);
-      });
-    } else {
-      setGeoJsonData(data);
-    }
+      return { name: layer.name, data: layerData };
+    });
+
+    Promise.all(loadDataPromises).then((values) => {
+      setLayersData(values);
+      setIsLoading(false);
+    });
   }, []);
 
-  const onEachFeature = (feature, layer) => {
-    const geometryType = feature.type;
-
-    if (tooltip.prop)
-      layer.bindTooltip(feature.properties[tooltip.prop], {
-        direction: 'center',
-      });
-
-    layer.on({
-      mouseover: (event) => {
-        if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
-          event.target.setStyle({
-            fillColor: '#B85042',
-          });
-        }
-      },
-      mouseout: (event) => {
-        if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
-          event.target.setStyle({
-            fillColor: '#A7BEAE',
-          });
-        }
-      },
-    });
-  };
-
-  return isLoading || !geoJsonData ? (
+  return isLoading ? (
     <div className="w-full flex items-center justify-center w-[600px] h-[300px]">
       <LoadingSpinner />
     </div>
@@ -104,8 +97,10 @@ export function Map({
       className="h-80 w-full"
       // @ts-ignore
       whenReady={(map: any) => {
+        //  Enable zoom using scroll wheel
         map.target.scrollWheelZoom.enable();
 
+        //  Create the title box
         var info = new L.Control() as any;
 
         info.onAdd = function () {
@@ -119,21 +114,98 @@ export function Map({
         };
 
         if (title) info.addTo(map.target);
-
-        setTimeout(() => map.target.invalidateSize(), 5000);
       }}
     >
-      <GeoJSONLayer
-        data={geoJsonData}
-        style={(geoJsonFeature: any) => {
-          return { color: geoJsonFeature?.color };
-        }}
-        onEachFeature={onEachFeature}
-      />
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
+      <LayersControl position="bottomright">
+        {layers.map((layer) => {
+          const data = layersData.find(
+            (layerData) => layerData.name === layer.name
+          )?.data;
+
+          return (
+            data && (
+              <LayersControl.Overlay key={layer.name} checked name={layer.name}>
+                <GeoJSONLayer
+                  data={data}
+                  style={(geoJsonFeature: any) => {
+                    //  Set the fill color of each feature when appliable
+                    if (
+                      !['Point', 'MultiPoint'].includes(geoJsonFeature.type)
+                    ) {
+                      return { color: geoJsonFeature?.color };
+                    }
+                  }}
+                  eventHandlers={{
+                    add: (e) => {
+                      const featureGroup = e.target;
+                      const tooltip = layer.tooltip;
+
+                      featureGroup.eachLayer((featureLayer) => {
+                        const feature = featureLayer.feature;
+                        const geometryType = feature.geometry.type;
+
+                        if (tooltip) {
+                          const featurePropNames = Object.keys(
+                            feature.properties
+                          );
+                          let includedFeaturePropNames;
+
+                          if (tooltip === true) {
+                            includedFeaturePropNames = featurePropNames;
+                          } else {
+                            includedFeaturePropNames = tooltip.propNames.filter(
+                              (name) => featurePropNames.includes(name)
+                            );
+                          }
+
+                          if (includedFeaturePropNames) {
+                            const tooltipContent = includedFeaturePropNames
+                              .map(
+                                (name) =>
+                                  `<b>${name}:</b> ${feature.properties[name]}`
+                              )
+                              .join('<br />');
+
+                            featureLayer.bindTooltip(tooltipContent, {
+                              direction: 'center',
+                            });
+                          }
+                        }
+
+                        featureLayer.on({
+                          mouseover: (event) => {
+                            if (
+                              ['Polygon', 'MultiPolygon'].includes(geometryType)
+                            ) {
+                              event.target.setStyle({
+                                fillOpacity: 0.5,
+                              });
+                            }
+                          },
+                          mouseout: (event) => {
+                            if (
+                              ['Polygon', 'MultiPolygon'].includes(geometryType)
+                            ) {
+                              event.target.setStyle({
+                                fillOpacity: 0.2,
+                              });
+                            }
+                          },
+                        });
+                      });
+                    },
+                  }}
+                />
+                ;
+              </LayersControl.Overlay>
+            )
+          );
+        })}
+      </LayersControl>
     </MapContainer>
   );
 }

packages/components/stories/Map.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta = {
   component: Map,
   tags: ['autodocs'],
   argTypes: {
-    data: {
+    layers: {
       description:
         'Data to be displayed.\n\n GeoJSON Object \n\nOR\n\n URL to GeoJSON Object',
     },
@@ -21,9 +21,6 @@ const meta: Meta = {
     zoom: {
       description: 'Zoom level',
     },
-    tooltip: {
-      description: 'Tooltip settings'
-    }
   },
 };
 
@@ -35,21 +32,60 @@ type Story = StoryObj<MapProps>;
 export const GeoJSONPolygons: Story = {
   name: 'GeoJSON polygons map',
   args: {
-    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+    layers: [
+      {
+        data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Polygons',
+        tooltip: { propNames: ['name'] },
+        colorScale: {
+          starting: '#ff0000',
+          ending: '#00ff00',
+        },
+      },
+    ],
     title: 'Seas and Oceans Map',
     center: { latitude: 45, longitude: 0 },
     zoom: 2,
-    tooltip: { prop: 'name' },
   },
 };
 
 export const GeoJSONPoints: Story = {
   name: 'GeoJSON points map',
   args: {
-    data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+    layers: [
+      {
+        data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        name: 'Points',
+        tooltip: { propNames: ['Location'] },
+      },
+    ],
     title: 'Roads in York',
     center: { latitude: 53.9614, longitude: -1.0739 },
     zoom: 12,
-    tooltip: { prop: 'Location' },
+  },
+};
+
+export const GeoJSONMultipleLayers: Story = {
+  name: 'GeoJSON polygons and points map',
+  args: {
+    layers: [
+      {
+        data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        name: 'Points',
+        tooltip: true,
+      },
+      {
+        data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Polygons',
+        tooltip: true,
+        colorScale: {
+          starting: '#ff0000',
+          ending: '#00ff00',
+        },
+      },
+    ],
+    title: 'Polygons and points',
+    center: { latitude: 45, longitude: 0 },
+    zoom: 2,
   },
 };

packages/components/vite.config.ts

@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react-swc';
+import react from '@vitejs/plugin-react';
 import path from 'node:path';
 import { defineConfig } from 'vitest/config';
 import dts from 'vite-plugin-dts';

site/content/docs/examples/github-backed-catalog.md

@@ -63,7 +63,7 @@ Congratulations, your new app is now running at http://localhost:3000.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fgithub-backed-catalog)
 
-By clicking on this button, you will be redirected to a page which will allows you to clone the example into your own GitHub/GitLab/BitBucket account and automatically deploy it.
+By clicking on this button, you will be redirected to a page which will allow you to clone the example into your own GitHub/GitLab/BitBucket account and automatically deploy it.
 
 ### GitHub token
 
@@ -101,7 +101,7 @@ It has
 You can also add
 
 - A `description` which is useful if you have more than one dataset for each repo, if not provided we are just going to use the repo description
-- A `Name` which is useful if you want to give your dataset a nice name, if not provided we are going to use the junction of the `owner` the `repo` + the path of the README, in the exaple above it will be `fivethirtyeight/data/nba-raptor`
+- A `Name` which is useful if you want to give your dataset a nice name, if not provided we are going to use the junction of the `owner` the `repo` + the path of the README, in the example above it will be `fivethirtyeight/data/nba-raptor`
 
 ## Extra commands