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

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

Browse Source
This commit is contained in:
João Demenech
2023-07-03 18:55:43 -03:00
parent 9ee4376abf
commit 5e72711629
6 changed files with 477 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/components/.storybook/preview-head.html Normal file
View File

@@ -0,0 +1,19 @@
<!--
This is necessary for maps to work.
If we decide to distribute this component,
perhaps we could use a provider for this,
e.g.
.../_app.tsx
<PortalJSProvider>
<Component />
</PortalJSProvider>
-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<!-- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script> -->

4
packages/components/package.json
View File

@@ -27,12 +27,15 @@
"@githubocto/flat-ui": "^0.14.1",
"@heroicons/react": "^2.0.17",
"@tanstack/react-table": "^8.8.5",
"chroma-js": "^2.4.2",
"flexsearch": "0.7.21",
"leaflet": "^1.9.4",
"next-mdx-remote": "^4.4.1",
"papaparse": "^5.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.9",
"react-leaflet": "^4.2.1",
"react-query": "^3.39.3",
"react-vega": "^7.6.0",
"rollup-plugin-re": "^1.0.7",
@@ -49,6 +52,7 @@
"@storybook/react-vite": "^7.0.7",
"@storybook/testing-library": "^0.0.14-next.2",
"@types/flexsearch": "^0.7.3",
"@types/leaflet": "^1.9.3",
"@types/papaparse": "^5.3.7",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",

140
packages/components/src/components/Map.tsx Normal file
View File

@@ -0,0 +1,140 @@
import { useEffect, useState } from 'react';
import LoadingSpinner from './LoadingSpinner';
import loadData from '../lib/loadData';
import chroma from 'chroma-js';
import {
MapContainer,
TileLayer,
GeoJSON as GeoJSONLayer,
useMap,
} from 'react-leaflet';
import * as L from 'leaflet';
export type MapProps = {
data: string | GeoJSON.GeoJSON;
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' },
center = { latitude: 45, longitude: 45 },
zoom = 2,
tooltip = {
prop: '',
},
}: MapProps) {
const [isLoading, setIsLoading] = useState<boolean>(false);
title;
// By default, assumes data is an Array...
const [geoJsonData, setGeoJsonData] = useState<any>(null);
useEffect(() => {
// If data is string, assume it's a URL
if (typeof data === 'string') {
setIsLoading(true);
loadData(data).then((res: any) => {
const geoJsonObject = JSON.parse(res);
const colorScaleAr = chroma
.scale([colorScale.starting, colorScale.ending])
.mode('lch')
.colors(geoJsonObject.features.length);
geoJsonObject.features.forEach((feature, i) => {
if (feature.color === undefined) {
feature.color = colorScaleAr[i];
}
});
setGeoJsonData(geoJsonObject);
setIsLoading(false);
});
} else {
setGeoJsonData(data);
}
}, []);
const onEachFeature = (feature, layer) => {
const map = useMap();
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 ? (
<div className="w-full flex items-center justify-center w-[600px] h-[300px]">
<LoadingSpinner />
</div>
) : (
<MapContainer
center={[center.latitude, center.longitude]}
zoom={zoom}
scrollWheelZoom={false}
className="h-[500px]"
whenReady={(map) => {
map.target.scrollWheelZoom.enable();
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
};
if (title) info.addTo(map.target);
}}
>
<GeoJSONLayer
data={geoJsonData}
style={(geoJsonFeature) => {
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"
/>
</MapContainer>
);
}

171
packages/components/src/types/GeoJSON.tsx Normal file
View File

@@ -0,0 +1,171 @@
/**
* Typescript types for the GeoJSON RFC7946 specification. This is not fully RFC-compliant due to lack of support for
* ranged number data types.
*
* See https://tools.ietf.org/html/rfc7946
*/
export declare namespace GeoJSON {
/**
* Inside this document, the term "geometry type" refers to seven case-sensitive strings: "Point", "MultiPoint",
* "LineString", "MultiLineString", "Polygon", "MultiPolygon", and "GeometryCollection".
*/
export type Geometry = Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon
| GeometryCollection;
export type GeometryType = Geometry["type"];
/**
* ...the term "GeoJSON types" refers to nine case-sensitive strings: "Feature", "FeatureCollection", and the
* geometry types listed above.
*/
export type GeoJson = Geometry | Feature | FeatureCollection;
export type GeoJsonType = GeoJson["type"];
// types
/**
* A position is an array of numbers. There MUST be two or more elements. The first two elements are longitude and
* latitude, or easting and northing, precisely in that order and using decimal numbers. Altitude or elevation MAY
* be included as an optional third element.
*
* Implementations SHOULD NOT extend positions beyond three elements because the semantics of extra elements are
* unspecified and ambiguous.
*/
export type Position = [longitude: number, latitude: number, elevation?: number]
export type Record = { [key in string | number]: unknown };
/**
* Properties inherit to all GeoJSON types
*/
export interface GeometryBase extends Record {
/**
* A GeoJSON object MAY have a member named "bbox" to include information on the coordinate range for its
* Geometries, Features, or FeatureCollections. The value of the bbox member MUST be an array of length 2*n
* where n is the number of dimensions represented in the contained geometries, with all axes of the most
* southwesterly point followed by all axes of the more northeasterly point. The axes order of a bbox follows
* the axes order of geometries.
*/
bbox?: number[];
/**
* A GeoJSON object MAY have other members.
*
* Members not described in this specification ("foreign members") MAY be used in a GeoJSON document. Note that
* support for foreign members can vary across implementations, and no normative processing model for foreign
* members is defined.
*/
}
// geometry types
export interface Point extends GeometryBase {
type: "Point";
/**
* For type "Point", the "coordinates" member is a single position.
*/
coordinates: Position;
}
export interface MultiPoint extends GeometryBase {
type: "MultiPoint";
/**
* For type "MultiPoint", the "coordinates" member is an array of positions.
*/
coordinates: Position[];
}
export interface LineString extends GeometryBase {
type: "LineString";
/**
* For type "LineString", the "coordinates" member is an array of two or more positions.
*/
coordinates: { 0: Position, 1: Position } & Position[]
}
export interface MultiLineString extends GeometryBase {
type: "MultiLineString";
/**
* For type "MultiLineString", the "coordinates" member is an array of LineString coordinate arrays.
*/
coordinates: LineString["coordinates"][];
}
/**
* To specify a constraint specific to Polygons, it is useful to introduce the concept of a linear ring:
* - A linear ring is a closed LineString with four or more positions.
* - The first and last positions are equivalent, and they MUST contain identical values; their representation
* SHOULD also be identical.
* - A linear ring is the boundary of a surface or the boundary of a hole in a surface.
* - A linear ring MUST follow the right-hand rule with respect to the area it bounds, i.e., exterior rings are
* counterclockwise, and holes are clockwise.
*/
export type LinearRing = { 0: Position, 1: Position, 2: Position, 3: Position } & Position[];
export interface Polygon extends GeometryBase {
type: "Polygon";
/**
* For type "Polygon", the "coordinates" member MUST be an array of linear ring coordinate arrays.
*
* For Polygons with more than one of these rings, the first MUST be the exterior ring, and any others MUST be
* interior rings. The exterior ring bounds the surface, and the interior rings (if present) bound holes within
* the surface.
*/
coordinates: LinearRing[];
}
export interface MultiPolygon extends GeometryBase {
type: "MultiPolygon";
/**
* For type "MultiPolygon", the "coordinates" member is an array of Polygon coordinate arrays.
*/
coordinates: Polygon["coordinates"][];
}
export interface GeometryCollection {
/**
* A GeoJSON object with type "GeometryCollection" is a Geometry object.
*/
type: "GeometryCollection";
/**
* A GeometryCollection has a member with the name "geometries". The value of "geometries" is an array. Each
* element of this array is a GeoJSON Geometry object. It is possible for this array to be empty.
*/
geometries: Geometry[];
}
// GeoJSON types
export interface Feature {
/**
* A Feature object has a "type" member with the value "Feature".
*/
type: "Feature";
/**
* If a Feature has a commonly used identifier, that identifier SHOULD be included as a member of the Feature object
* with the name "id", and the value of this member is either a JSON string or number.
*/
id?: string | number;
/**
* A Feature object has a member with the name "geometry". The value of the geometry member SHALL be either a
* Geometry object as defined above or, in the case that the Feature is unlocated, a JSON null value.
*/
geometry: Geometry | null;
/**
* A Feature object has a member with the name "properties". The value of the properties member is an object
* (any JSON object or a JSON null value).
*/
properties: Record | null;
}
export interface FeatureCollection {
/**
* A GeoJSON object with the type "FeatureCollection" is a FeatureCollection object.
*/
type: "FeatureCollection";
/**
* A FeatureCollection object has a member with the name "features". The value of "features" is a JSON array. Each
* element of the array is a Feature object as defined above. It is possible for this array to be empty.
*/
features: Feature[];
}
}

55
packages/components/stories/Map.stories.ts Normal file
View File

@@ -0,0 +1,55 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Map, MapProps } from '../src/components/Map';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta = {
title: 'Components/Map',
component: Map,
tags: ['autodocs'],
argTypes: {
data: {
description:
'Data to be displayed.\n\n GeoJSON Object \n\nOR\n\n URL to GeoJSON Object',
},
title: {
description: 'Title to display on the map. Optional.',
},
center: {
description: 'Initial coordinates of the center of the map',
},
zoom: {
description: 'Zoom level',
},
tooltip: {
description: 'Tooltip settings'
}
},
};
export default meta;
type Story = StoryObj<MapProps>;
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const GeoJSONPolygons: Story = {
name: 'GeoJSON polygons map',
args: {
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
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',
title: 'Roads in York',
center: { latitude: 53.9614, longitude: -1.0739 },
zoom: 12,
tooltip: { prop: 'Location' },
},
};