Maps UI SDK - Getting Started


yarn add @xweather/maps-ui-sdk

Example Project

maps-ui-sdk includes an example project that demonstrates how to use the SDK with a mapping library. The example project is located in the example directory of the Github repo , separate from the SDK implementation code. Follow the steps below to get the example project up and running:

Prerequisites

An Xweather account— We offer a free developer account for you to give our weather API a test drive.
A Mapbox account

Steps to Run

Get Xweather MapsGL ID and Secret Log into your Xweather account, and from your account’s Apps page , create a new application for the MapsGL Demo app. Make note of application’s Xweather MapsGL ID and Secret; you’ll need them in step 5.
Get Xweather Mapbox public access token The example project relies on Mapbox, so you’ll need to log into or create a Mapbox account and follow the instructions to create a Mapbox public access token .
Navigate to the Example Directory After downloading or cloning maps-ui-sdk from npm, navigate to the example directory within the SDK:


> cd ./example

Install Dependencies Once you’re in the example directory, install the project’s dependencies by running:


> yarn install

Update environment variables Rename .env.template at the root of the example repo to .env and add the necessary Xweather and Mapbox access keys:


VITE_MAPBOX_KEY=''
VITE_MAPSGL_ID=''
VITE_MAPSGL_SECRET=''

Import styles You will need to import this stylesheet at the root of your project: import '@xweather/maps-ui-sdk/dist/style.css'
Run the project in development mode:


> yarn dev