@getcircuit/web-map

Circuit Schema | Svelte Documentation | Google Maps Documentation

Usage no npm install needed!

<script type="module">
  import getcircuitWebMap from 'https://cdn.skypack.dev/@getcircuit/web-map';
</script>

README

Circuit Schema | Svelte Documentation | Google Maps Documentation

Usage

General

The general way to use this component is to instatiate it as you would with any other Svelte component.

import CircuitMap from '@getcircuit/web-map'
import ReactDOM from 'react-dom'
import React from 'react'
import { Avatar } from '@getcircuit/components'
import { AttemptedLocationCard } from '../somewhere'

const mapInstance = new CircuitMap({
  target: document.querySelector('#map'),
  props: {
    apiKey: '...',
    mapOptions: {
      center: { lat: 51.509865, lng: -0.118092 },
      zoom: 15,
    },
    react: {
      React,
      ReactDOM,
      components: {
        Avatar,
        AttemptedLocationCard,
      },
    },
  },
})

API

apiKey

Google maps API key.

mapOptions

Google maps options object.

react

Used to render react elements inside the map component. It must be an object that matches the following type:

type ReactBag = {
  React: ReactLib
  ReactDOM: ReactDOMLib
  components: {
    Avatar: CircuitAvatarComponent
    AttemptedLocationCard?: CircuitAttemptedLocationCard
  }

Methods

setIntl(newIntl: IntlStore): void

Updates the map's Intl bag. An Intl bag is an object composed of the following properties:

type IntlBag {
  /** Current locale */
  locale: string
  /** Method that returns a localised message given a message id */
  formatMessage: (messageId: string, values?: Record<string, any>) => string
  /** Method that formats an epoch timestamp given the current locale */
  formatEpoch: (epoch: EpochTimestamp) => string
}

setMapOptions(options: google.maps.MapOptions): void

Updates map's Google Map options.

setCenter(center: google.maps.LatLngLiteral | google.maps.LatLng): void

Changes the center of the map to the specified point.

fitCoordinates(coords?: google.maps.LatLngLiteral[]): void

Moves the map camera to fit all the passed coordinates.

setPlan(newPlan?: PlanBundle): void

Updates the current plan that is being displayed on the map. Set to undefined to remove the current plan.

focusRoute(routeId: string): void

Focuses the given route on the map.

focusStop(stopId: string): void

Focuses the given stop on the map.

resetFocus(): void

Resets the map focus state.

hoverRoute(routeId: string): void

Hovers the given route on the map.

hoverStop(stopId: string): void

Hovers the given stop on the map.

resetHover(): void

Resets the map hover state.

openAttemptedLocationCard(): void

Opens the Attempted Location Card component for the current focused stop.

closeAttemptedLocationCard(): void

Closes the Attempted Location Card component.