From d0366baf81cbd2c85e3f43912d99d48e14ebe2a3 Mon Sep 17 00:00:00 2001 From: Magdalena Kuchejdova <57178283+MagdalenaKuch@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:32:16 +0200 Subject: [PATCH] Update README.md (#9) --- README.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 2ca5e82..0b1ae3f 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,9 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -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](). +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). You can find step-by-step tutorial for it [here](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/). + +Repository branches show code changes corresponding to the [MapTiler React video series](https://youtube.com/playlist?list=PLGHe6Moaz52Mb9_0qH9mdktsTgkrow9oI&si=2RCT0UU_2ssLyGjN). **Get your MAPTILER_CLOUD_API_KEY** to make this code work: https://cloud.maptiler.com/account/keys/ You can create it for free! @@ -46,35 +47,34 @@ Find out more about [MapTiler Cloud](https://www.maptiler.com/cloud/) - where yo ## Episode specific instructions -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. +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/. -#### E1 - Map in react js with geojson data, points, and clusters +#### E1 - Map in React js with geojson data, points, and clusters -[step-by-step tutorial](https://docs.maptiler.com/react/react/sdk-js/geojson-points/) +[step-by-step tutorial](https://docs.maptiler.com/react/react/sdk-js/geojson-points/](https://docs.maptiler.com/react/sdk-js/geojson-points/) -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 +add custom geojson data to a React map with SDK helpers +read more about **MapTilerSDK point helper:** https://docs.maptiler.com/sdk-js/api/helpers/#point -You can find geojson data used in tutorial videos in the assets folder. +You can find GeoJSON data used in tutorial videos in the assets folder. #### E2 - Map in React js with heatmap and visualization switcher -[step-by-step tutorial](https://docs.maptiler.com/react/) - -MapTiler SDK heatmap helpers: https://docs.maptiler.com/sdk-js/api/helpers/#heatmap +[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/heatmap/) -MapTiler SDK Color Ramp: https://docs.maptiler.com/sdk-js/api/color-ramp/ +**MapTiler SDK heatmap helper:** https://docs.maptiler.com/sdk-js/api/helpers/#heatmap +**MapTiler SDK Color Ramp**: https://docs.maptiler.com/sdk-js/api/color-ramp/ #### E3 - Map in React js with popup and sidebar -[step-by-step tutorial](https://docs.maptiler.com/react/) +[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/popup-sidebar/) -Material UI: https://mui.com/core/ -MUI sidebar examples: https://mui.com/material-ui/react-drawer/ +**Material UI:** https://mui.com/core/ +**MUI sidebar examples:** https://mui.com/material-ui/react-drawer/ #### E4 - Map in React js with geocoding control -[step-by-step tutorial](https://docs.maptiler.com/react/) +[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/geocoding-control/) Download MapTiler geocoding control from npm: https://www.npmjs.com/package/@maptiler/geocoding-control @@ -87,7 +87,7 @@ Open the terminal on the my-react-map folder. #### E5 - 3D Map in React js -[step-by-step tutorial](https://docs.maptiler.com/react/) +[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/3d-map/) Enable/disable map terrain programmatically: https://docs.maptiler.com/sdk-js/examples/map-terrain/