Getting Started

yarn add @xweather/map-ui-sdk

Example Project

map-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, 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 (opens in a new tab) 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 (opens in a new tab), 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 (opens in a new tab) account and follow the instructions to create a Mapbox public access token (opens in a new tab).
Navigate to the Example Directory After downloading or cloning map-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/map-ui-sdk/dist/style.css'
Run the project in development mode:

> yarn dev

Introduction Examples