{"componentChunkName":"component---src-templates-developers-js","path":"/en/developers/user-interfaces/1-digitransit-ui/","result":{"data":{"childPages":{"edges":[{"node":{"fields":{"slug":"/en/developers/"},"frontmatter":{"title":"For developers","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/"},"frontmatter":{"title":"System architecture","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/api-registration/"},"frontmatter":{"title":"API portal and registration","order":-12,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/changes/"},"frontmatter":{"title":"Changes","order":-10,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/user-interfaces/"},"frontmatter":{"title":"User interfaces","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/deprecations/"},"frontmatter":{"title":"Deprecations","order":-11,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/docker-guide/"},"frontmatter":{"title":"Docker guide","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/"},"frontmatter":{"title":"APIs","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/"},"frontmatter":{"title":"Routing API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/2-routing-data-api/"},"frontmatter":{"title":"Routing data API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/4-map-api/"},"frontmatter":{"title":"Map API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/"},"frontmatter":{"title":"API architecture","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/6-api-faq/"},"frontmatter":{"title":"FAQ","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/5-realtime-api/"},"frontmatter":{"title":"Realtime APIs","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/3-geocoding-api/"},"frontmatter":{"title":"Geocoding API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/7-terms-of-use/"},"frontmatter":{"title":"Terms of use","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/user-interfaces/1-digitransit-ui/"},"frontmatter":{"title":"Digitransit-ui","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/0-graphql/"},"frontmatter":{"title":"GraphQL","order":10,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/3-realtime-information/"},"frontmatter":{"title":"Real-time information","order":40,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/2-glossary/"},"frontmatter":{"title":"Glossary","order":30,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/canceled-trips/"},"frontmatter":{"title":"Canceled trips","order":80,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/disruption-info/"},"frontmatter":{"title":"Disruption info","order":70,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/4-translations/"},"frontmatter":{"title":"Translation","order":50,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/routes/"},"frontmatter":{"title":"Routes","order":100,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/stops/"},"frontmatter":{"title":"Stops","order":110,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/bicycles-scooters-cars/"},"frontmatter":{"title":"Bicycles, cars and e-scooters","order":60,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/itinerary-planning/"},"frontmatter":{"title":"Itinerary planning","order":90,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/1-routing-api/"},"frontmatter":{"title":"Routing API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/2-routing-data-api/"},"frontmatter":{"title":"Routing Data","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/4-map-api/"},"frontmatter":{"title":"Map API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/5-realtime-api/"},"frontmatter":{"title":"Real-time APIs","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/3-geocoding-api/"},"frontmatter":{"title":"Geocoding API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/1-routing-api/1-graphiql/"},"frontmatter":{"title":"GraphiQL","order":20,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/4-map-api/background-map/"},"frontmatter":{"title":"Background map","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/5-realtime-api/1-getting-started/"},"frontmatter":{"title":"Getting started","order":10,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/3-geocoding-api/address-search/"},"frontmatter":{"title":"Address search","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/3-geocoding-api/autocomplete/"},"frontmatter":{"title":"Autocomplete","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/5-realtime-api/trip-updates/"},"frontmatter":{"title":"Trip updates","order":30,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/5-realtime-api/service-alerts/"},"frontmatter":{"title":"Service alerts","order":20,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/3-geocoding-api/address-lookup/"},"frontmatter":{"title":"Address lookup","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/4-map-api/pois/"},"frontmatter":{"title":"Points of interest","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/5-realtime-api/vehicle-positions/"},"frontmatter":{"title":"Vehicle positions","order":40,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/3-geocoding-api/data-container/"},"frontmatter":{"title":"Data builder and container","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/architecture/x-apis/3-geocoding-api/api/"},"frontmatter":{"title":"API","order":null,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/5-realtime-api/vehicle-positions/high-frequency-positioning/"},"frontmatter":{"title":"High-frequency positioning","order":20,"redirect":null}}},{"node":{"fields":{"slug":"/en/developers/apis/5-realtime-api/vehicle-positions/digitransit-mqtt/"},"frontmatter":{"title":"Digitransit MQTT broker","order":10,"redirect":null}}}]},"markdownRemark":{"fields":{"slug":"/en/developers/user-interfaces/1-digitransit-ui/"},"frontmatter":{"title":"Digitransit-ui","redirect":null,"toc":null,"description":{"info":"Digitransit-ui is a mobile friendly User interface built to work with Digitransit APIs.","architecture":"https://raw.githubusercontent.com/HSLdevcom/digitransit-site/master/src/pages/en/developers/user-interfaces/1-digitransit-ui/architecture.xml"},"assets":[{"title":"source","url":"https://github.com/HSLdevcom/digitransit-ui"},{"title":"DockerHub","url":"https://hub.docker.com/r/hsldevcom/digitransit-ui/"},{"title":"Dockerfile","url":"https://github.com/HSLdevcom/digitransit-ui/blob/v3/Dockerfile"}],"technologies":[{"title":"React","url":"https://react.dev/"},{"title":"Leaflet","url":"http://leafletjs.com/"},{"title":"Relay","url":"https://relay.dev/"}],"docker":{"dockerfile":"https://github.com/HSLdevcom/digitransit-ui/blob/v3/Dockerfile","imageName":"hsldevcom/digitransit-ui:v3-prod","buildScript":null,"runContainer":"docker run -p 8080:8080 -it -e CONFIG=hsl -e API_URL=https://api.digitransit.fi -e MAP_URL=https://cdn.digitransit.fi -e NODE_OPTS=--max_old_space_size=1500 -e API_SUBSCRIPTION_QUERY_PARAMETER_NAME=digitransit-subscription-key -e API_SUBSCRIPTION_HEADER_NAME=digitransit-subscription-key -e API_SUBSCRIPTION_TOKEN= hsldevcom/digitransit-ui:v3-prod","accessContainer":"http://localhost:8080/"}},"html":"

Application is built with React. React components can access data in two different ways:

\n\n

Basically, division between alternatives is:

\n\n

Installation

\n

Installation instructions are available at GitHub

\n

Tests

\n

Unit testing is used.

\n

Service dependencies

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AssetUrl
Routing - APIhttps://digitransit.fi/en/developers/apis/1-routing-api/
Realtime HSL - APIhttps://digitransit.fi/en/developers/apis/5-realtime-api/
Map - APIhttps://digitransit.fi/en/developers/apis/4-map-api/
Geocoding - APIhttps://digitransit.fi/en/developers/apis/3-geocoding-api/
\n

Key service delivery activities

\n
    \n
  1. Keep up with key project dependencies on GitHub
    2. \n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Dependecyurl
Reacthttps://github.com/facebook/react
React-leaflethttps://github.com/PaulLeCam/react-leaflet
React-routerhttps://github.com/rackt/react-router
React-autosuggesthttps://github.com/moroshko/react-autosuggest
react-router-relayhttps://github.com/relay-tools/react-router-relay
Relayhttps://github.com/facebook/relay
Babel relay pluginhttps://github.com/facebook/relay
Fluxiblehttps://github.com/yahoo/fluxible
Leaflethttps://github.com/Leaflet/Leaflet
MQTT.jshttps://github.com/mqttjs/MQTT.js
Polyfill-servicehttps://github.com/Financial-Times/polyfill-service
PBFhttps://github.com/mapbox/pbf
Webpackhttps://github.com/webpack/webpack
\n
    \n
  1. Follow GraphQL specification
    \nhttps://graphql.org/https://graphql.org/
    2. \n
  2. From time to time check HSL style guide
    \nhttps://www.hsl.fi/tyyliopas
    3. \n
  3. Follow EcmaScript, and browser development
    \nhttps://esdiscuss.org/
    \nhttps://discuss.babeljs.io/
    \nhttp://www.ecma-international.org/news/index.html
    \nhttp://caniuse.com/#info_news
    4. \n
","tableOfContents":"","excerpt":"Application is built with React. React components can access data in two different ways: Routing-API queries with Relay Other API with Flux model Basically, division between alternatives is: GraphQL…"}},"pageContext":{"slug":"/en/developers/user-interfaces/1-digitransit-ui/"}},"staticQueryHashes":["3675773199","4050193485"]}