Skip to main content
Deno 2 is finally here 🎉️
Learn more
Module

x/gbfs_map/mod.js>GbfsMap

A library for displaying GBFS port data on a map. https://gbfs-map-demo.deno.dev
ayame113/gbfs-map
Latest
class GbfsMap
extends HTMLElement
import { GbfsMap } from "https://deno.land/x/gbfs_map@v2.3.1/mod.js";

Elements for GBFS data. This library is compatible with GBFS version 2.3.

<script src="https://deno.land/x/gbfs_map/mod.js" charset="utf-8" type="module"></script>
<gbfs-map
  x-url="https://api-public.odpt.org/api/v4/gbfs/hellocycling/gbfs.json,https://api-public.odpt.org/api/v4/gbfs/docomo-cycle-tokyo/gbfs.json"
  x-default-lat="35.68123355100922"
  x-default-lon="139.76712357086677"
  x-preferred-languages="ja"
  x-cors
></gbfs-map>

You can specify the following attributes to control the display.

  • x-url: endpoint for gbfs.json. You can specify multiple options by separating them with commas. See https://github.com/MobilityData/gbfs/blob/master/systems.csv for available API endpoints.
  • x-default-lat: Initial coordinates of the map (latitude).
  • x-default-lon: Initial coordinates of the map (longitude).
  • x-preferred-languages: Language you want to display. If the API does not return data for that language, it will fallback to the first value returned by the API. You can specify multiple options by separating them with commas. (example: "ja,en")
  • x-cors: Specifying this attribute enables the CORS proxy. By default cors.deno.dev is used. Override GbfsMap.toCorsUrl if you want to use a different CORS proxy.

Constructors

new
GbfsMap()

Static Properties

i18n: { en: { availableBikeCheckbox: string; availableDockCheckbox: string; availableBike: string; unavailableBike: string; availableDock: string; unavailableDock: string; update: string; }; ja: { availableBikeCheckbox: string; availableDockCheckbox: string; availableBike: string; unavailableBike: string; availableDock: string; unavailableDock: string; update: string; }; }

Dictionary used for localization of map control elements. Add values to this object if you want to extend your localization.

import { GbfsMap } from "https://deno.land/x/gbfs_map/mod.js";
GbfsMap.i18n.fr = {
  availableBikeCheckbox: "Display only lending%OK%",
  availableDockCheckbox: "Display only return%OK%",
  availableBike: "Lending:%OK%（%num_bikes_available%）",
  unavailableBike: "Lending:%NG%",
  availableDock: "Returning:%OK%（%num_docks_available%）",
  unavailableDock: "Returning:%NG%",
  update: "（update: %update%）",
}

The value specified in the x-preferred-languages attribute is used. Fallback to English if no suitable localization is found. You can embed a value in the format %xxx%:

  • %OK%: OK icon
  • %NG%: NG icon
  • %num_bikes_available%: number of bikes available
  • %num_docks_available%: number of docks available
  • %update%: updated time

You definitely need to create properties for availableBikeCheckbox, availableDockCheckbox, unavailableBike, availableBike, unavailableBike, availableDock, unavailableDock and update.

Static Methods

toCorsUrl(url)

Creates a CORS proxy URL that will be used if x-cors is specified. Override here if you want to use any CORS proxy. By default https://cors.deno.dev is used.

import { GbfsMap } from "https://deno.land/x/gbfs_map/mod.js";
GbfsMap.toCorsUrl = url => `https://my-cors-proxy/${url}`