The main branch's code shows a basic example of a map with a marker and navbar using React and MapTiler SDK. (MapTiler SDK extends MapLibre GL JS with functions related to the MapTiler mapping platform. The basic concepts of this tutorial also show how to create a react map with MapLibre GL JS) Repository branches show code changes corresponding to the MapTiler react video series.
Get your MAPTILER_CLOUD_API_KEY to make this code work: https://cloud.maptiler.com/account/keys/ You can create it for free!
You can learn more about MapTiler SDK.
Find out more about MapTiler Cloud - where you can get your basemaps and store your mapping data.
- Clone this repo
git clone https://github.com/maptiler/maps-in-react.git my-react-map
- Navigate to the newly created project folder my-react-map
cd my-react-map
- Install dependencies
npm install
-
⚠️ Open my-react-map/src/config.js and replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key. If you don't have an API KEY, you can create it for FREE at https://www.maptiler.com/cloud/ -
Start your local environment
npm run dev
- You will find your app on the address http://localhost:5173/. Now, you should see the map in your browser.
Here is the step-by-step guide for creating a state in the main branch: https://docs.maptiler.com/react/sdk-js/get-started-material-ui/. The only difference is that this repo has the Material UI for the navbar component, which is part of the map component.
add custom geojson data to a react map with SDK helpers read more about MapTilerSDK point helpers: https://docs.maptiler.com/sdk-js/api/helpers/#point
You can find geojson data used in tutorial videos in the assets folder.
MapTiler SDK heatmap helpers: https://docs.maptiler.com/sdk-js/api/helpers/#heatmap
MapTiler SDK Color Ramp: https://docs.maptiler.com/sdk-js/api/color-ramp/
Material UI: https://mui.com/core/ MUI sidebar examples: https://mui.com/material-ui/react-drawer/
Download MapTiler geocoding control from npm: https://www.npmjs.com/package/@maptiler/geocoding-control
Open the terminal on the my-react-map folder.
- npm i @maptiler/geocoding-control
- npm install
- npm run dev //to start your map app geocoding API reference https://docs.maptiler.com/client-js/geocoding/
Enable/disable map terrain programmatically: https://docs.maptiler.com/sdk-js/examples/map-terrain/
How to find id of last text map layer?
- Go to MapTiler Cloud
- Select a map that you want to use as a basemap
- Customize
- Go to layer - Verticality and find the last symbol layer
- Click at last symbol layer and open JSON editor ( {} )
- Copy layer id, e.g., "Ocean labels".
How to create a custom map style on MapTiler Cloud: https://documentation.maptiler.com/hc/en-us/articles/360020805917-How-to-make-custom-map-design-in-MapTiler-Cloud