From 99455745e4d20213f7e935a0770fb480a343d0f6 Mon Sep 17 00:00:00 2001 From: adarsh Date: Tue, 5 Nov 2024 00:46:19 +0530 Subject: [PATCH 1/2] Add React setup instructions to documentation --- guide/src/web-getting-started.md | 47 +++++++++++++++++++------------- 1 file changed, 28 insertions(+), 19 deletions(-) diff --git a/guide/src/web-getting-started.md b/guide/src/web-getting-started.md index a446fb27d..d779c4560 100644 --- a/guide/src/web-getting-started.md +++ b/guide/src/web-getting-started.md @@ -1,9 +1,9 @@ # Getting Started on the Web -This section of the guide covers how to integrate Ferrostar into a web app. +This section of the guide covers how to integrate **Ferrostar** into a web app using **React**. While there are limitations to the web [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) (notably no background updates), -PWAs and other mobile-optimized sites +**Progressive Web Apps (PWAs)** and other mobile-optimized sites can be a great solution when a native iOS/Android app is impractical or prohibitively expensive. We'll cover the "batteries included" approach, but flag areas for customization and overrides along the way. @@ -33,7 +33,7 @@ Then add `wasm()` and `topLevelAwait()` to the `plugins` section of your Vite co TODO -## Add Ferrostar web components to your web app +## Add Ferrostar web components to your React App The Ferrostar web SDK uses the [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) to ensure maximum compatibility across frontend frameworks. @@ -43,35 +43,44 @@ You can import the components just like other things you’re used to in JavaScr import { FerrostarMap, BrowserLocationProvider } from "@stadiamaps/ferrostar-components"; ``` -## Configure the `` component +## Configure the Component -Now you can use Ferrostar in your HTML like this: +Now you can use Ferrostar in your React component like this: -```html +```javascript +import React from 'react'; +import { FerrostarMap } from "@stadiamaps/ferrostar-webcomponents"; + +const MyMapComponent = () => { +return ( +id="ferrostar" +valhallaEndpointUrl="https://api.stadiamaps.com/route/v1" +styleUrl="https://tiles.stadiamaps.com/styles/outdoors.json" +profile="bicycle" +style={{ display: 'block', width: '100%', height: '100%' }} > +); +}; + +export default MyMapComponent; ``` -Here we have used Stadia Maps URLs, which should work without authentication for local development. -(Refer to the [authentication docs](https://docs.stadiamaps.com/authentication/) -for network deployment details; you can start with a free account.) +--- -See the [vendors appendix](./vendors.md) for a list of other compatible vendors. +## CSS Requirements -`` additionally requires setting some CSS manually, or it will be invisible! +The `` component requires setting some CSS manually; otherwise, it will be invisible! ```css ferrostar-map { - display: block; - width: 100%; - height: 100%; +display: block; +width: 100%; +height: 100%; } ``` +--- + That’s all you need to get started! ### Configuration explained From 269027ace3f068a0244851cbe6d7c01ce21d61ed Mon Sep 17 00:00:00 2001 From: adarsh Date: Tue, 5 Nov 2024 21:58:50 +0530 Subject: [PATCH 2/2] Addressed review comments and made requested changes --- guide/src/web-getting-started.md | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/guide/src/web-getting-started.md b/guide/src/web-getting-started.md index d779c4560..860cee70e 100644 --- a/guide/src/web-getting-started.md +++ b/guide/src/web-getting-started.md @@ -1,6 +1,6 @@ # Getting Started on the Web -This section of the guide covers how to integrate **Ferrostar** into a web app using **React**. +This section of the guide covers how to integrate Ferrostar into a web app. While there are limitations to the web [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) (notably no background updates), **Progressive Web Apps (PWAs)** and other mobile-optimized sites @@ -33,7 +33,7 @@ Then add `wasm()` and `topLevelAwait()` to the `plugins` section of your Vite co TODO -## Add Ferrostar web components to your React App +## Add Ferrostar web components to your Web App The Ferrostar web SDK uses the [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) to ensure maximum compatibility across frontend frameworks. @@ -45,7 +45,20 @@ import { FerrostarMap, BrowserLocationProvider } from "@stadiamaps/ferrostar-com ## Configure the Component -Now you can use Ferrostar in your React component like this: +Now you can use Ferrostar in your web component like this: + +## HTML + +``` + +``` + +## React ```javascript import React from 'react';