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.