Skip to content

Commit 24984f5

Browse files
authored
Update README.md
1 parent c484a44 commit 24984f5

File tree

1 file changed

+11
-10
lines changed

1 file changed

+11
-10
lines changed

README.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,6 @@
1616

1717
Use our Codesandbox template to quickly try out this library without any setup required. https://codesandbox.io/s/base-template-n0vp9
1818

19-
## **Add any of our packages to your project**
20-
21-
In this case, navigate to your project folder in a terminal and execute the following steps:
22-
23-
1. Add @mapcomponents/{package} as a dependency to your project using `npm i @mapcomponents/{package}`.
24-
2. Add the MapComponentsProvider (named export of this module) to your applications react-DOM where it makes sense. Only children of this component will be able to render a map canvas or interact with a maplibre-gl instance. Place it in the index.js entrypoint if your application is a dedicated map app and all components have a high probability to interact with the maplibre-gl instance. Place it somewhere higher in the JSX tree if the map constitutes only a small portion of your app and components outside of the MapComponentsProvider have no need to interact with the map instance.
25-
3. Add a MapLibreMap component to the react-DOM wherever the map canvas is supposed to be placed.
2619

2720
## **How to use @mapcomponents/react-maplibre in a new project**
2821

@@ -40,12 +33,12 @@ npm i
4033
npm run dev
4134
```
4235

43-
<img src="packages/react-maplibre/docs_md/initial_0.gif"/>
36+
<img src="https://github.com/mapcomponents/react-map-components-maplibre/blob/main/packages/react-maplibre/docs_md/initial_0.gif"/>
4437

4538

4639
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.
4740

48-
<img src="packages/react-maplibre/docs_md/initial_3.gif" width="400" />
41+
<img src="https://github.com/mapcomponents/react-map-components-maplibre/blob/main/packages/react-maplibre/docs_md/initial_3.gif" width="400" />
4942

5043
## Adding data to the map
5144

@@ -80,7 +73,15 @@ And add the following within the JSX.
8073
<MlGeoJsonLayer geojson={geojson_data} />
8174
```
8275

83-
<img src="packages/react-maplibre/docs_md/sample_screenshot.png" />
76+
<img src="https://github.com/mapcomponents/react-map-components-maplibre/blob/main/packages/react-maplibre/docs_md/sample_screenshot.png" />
77+
78+
## **Add any of our packages to your project**
79+
80+
In this case, navigate to your project folder in a terminal and execute the following steps:
81+
82+
1. Add @mapcomponents/{package} as a dependency to your project using `npm i @mapcomponents/{package}`.
83+
2. Add the MapComponentsProvider (named export of this module) to your applications react-DOM where it makes sense. Only children of this component will be able to render a map canvas or interact with a maplibre-gl instance. Place it in the index.js entrypoint if your application is a dedicated map app and all components have a high probability to interact with the maplibre-gl instance. Place it somewhere higher in the JSX tree if the map constitutes only a small portion of your app and components outside of the MapComponentsProvider have no need to interact with the map instance.
84+
3. Add a MapLibreMap component to the react-DOM wherever the map canvas is supposed to be placed.
8485

8586
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.
8687

0 commit comments

Comments
 (0)