@mapcomponents/react-maplibre is a react component library for declarative GIS application development.
Use our Codesandbox template to quickly try out this library without any setup required. https://codesandbox.io/s/base-template-n0vp9
The easiest way to start a new project using this framework is to bootstrap a react application using our vite-template.
Requirements:
Run the following commands in the terminal:
npx degit mapcomponents/template {your-app-name}
cd {your-app-name}
yarn
yarn dev
This will start a development server that serves the mapcomponents app on port 5174 of your local machine as well as a browser tab with live reload enabled. This reloads the affected parts of the application if changes are detected to the corresponding files in the filesystem. Open the project folder in the IDE of your choice and start building your map client.
In this case, navigate to your project folder in a terminal and execute the following steps:
yarn add @mapcomponents/react-maplibre
.The easiest way to add data to the map is using GeoJSON data and the MlGeoJsonLayer component. The MlGeoJsonLayer component is designed to require only the geojson
property to be set, while it provides properties to fully customize it to your needs.
Insert the following code in your app below index.tsx to add a GeoJSON layer to your map.
import MlGeoJsonLayer from '@mapcomponents/react-maplibre';
const geojson_data = {
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[0.7415817264899545, 56.91203727013931],
[0.7743616447289128, 55.2757658775181],
[4.609612078732766, 55.23840364745948],
[4.642391996971725, 56.91203727013931],
[0.7415817264899545, 56.91203727013931]
]
],
"type": "Polygon"
}
}
And add the following within the JSX.
<MlGeoJsonLayer geojson={geojson_data} />
Please take a look at our storybooks and the code examples provided in the {ComponentName}.stories.tsx files next to the Components in the ./src/components/
folder.