Vido is a web map application for browsing POIs organized in categories. The main features are:

• a slippy map
• a POI categories menu
• a full POIs browsing mode
• POI favorites and notebook
• page for each POI content
• list a POI be categories

Vido is the frontend for the data API.

Vido use aside projects to:

• export list of POIs as PDF: https://github.com/teritorio/elasa-export
• search for POIs: elasa-search
• produce QR Code: qr-shortener

The web application target multiple devices: smartphones, desktops, and large touchscreens.

Full entry points documentation available on api.yml and on server at http://localhost:3000/api.yaml.

• Main Map:
  • Full page: /, /{poi_Id}, /{category_ids}/ and /{category_ids}/{poi_id}.
  • Parameters:
    • boundary: an alternative boundary key from settings polygons_extra.
    • clipingPolygonSlug: POI filtering by polygon (key from settings polygons_extra).
• Embedded: /embedded/, same subpath and parameters as full page.
  • Parameters:
    • showEmbeddedUi: Show/hide category selector and selected categories indicator (values: true | false)
• POI:
  • details: /poi/{id}/details.
• POIs:
  • map only: /pois/{ids}/map.
• Categories
  • Empty list: /category
  • List of POIs by category ID: /category/{id}
• Categories (embedded):
  • Embedded empty list: /category/embedded
  • Embedded list of POIs by category ID: /category/embedded/{id}
    • Parameters:
      • menuItemIds=[id,id]: filters selector entries by categories IDs
      • showEmbeddedUi: Show/hide category selector and selected categories indicator (values: true | false)

• /manifest.webmanifest
• /sitemap.xml

Can be build directly (dev) or within Docker.

Prerequisite

• Node ^14.18.0 || >=16.10.0

# install dependencies
yarn install

# Generate fixtures
yarn build-fixture

# serve with hot reload at localhost:3000
yarn dev

# build for production and launch server
yarn build
yarn start

cp .env.sample .env
docker compose build
docker compose up -d

Require server allows CORS on:

• /api.yaml: the swagger specification Require server allows iframe usage on:
• /pois/{ids}/map: map intended to be used as iframe.

Apache2 configuration

<Location "/api.yaml">
Header set Access-Control-Allow-Origin "*"
</Location>
<LocationMatch "^/pois/.*/map$">
Header set Content-Security-Policy "frame-ancestors *"
</LocationMatch>

Vido is mainly building using:

• MapLibre GL JS
• Nuxt 3 and Vue 3, using both Options API / Composition API

# serve with hot reload at localhost:3000
yarn dev

Run Historie with

yarn start:historie

Historie build also available on gh-pages branch built by CI and online at https://teritorio.github.io/vido/

Run end to end tests with build or dev server:

# With build
yarn test
yarn start # In a new terminal for separate logs

# With dev server (slower - not recommended)
yarn dev
## In a new terminal for separate logs
yarn test:gui
yarn test:cli

# The run Histoire component screenshot regression tests
yarn test:histoire

$ git checkout develop
$ npm version minor -m "chore: release %s"
$ git push --follow-tags

Then, create a PR from develop to main, it will launch the continuous development.

Fields render types:

Basic data types:

• string: plain text value.
• text: rich HTML text content.
• integer: numeric integer value.
• boolean: true/false value.

Contact fields:

• phone: telephone number (tel: link on mobile).
• email: email address (mailto: link).
• weblink: standard web URL.
• weblink@download: download link (PDF, GPX, etc.).
• weblink@social-network: social media profile link.

Date/time fields:

• date: single date.
• datetime: date and time.
• duration: time duration.
• start_end_date: combined start_date and end_date fields.

Location/address fields:

• addr: combined address fields (housenumber, street, postcode, city).
• route: route information (difficulty, duration, length) per activity type.
• coordinates: geographic coordinates.

Special fields:

• tag: categorical tag value displayed as list item.
• osm:stars: star rating (1-5, with optional half-star "S" notation).
• osm:opening_hours: business opening hours.
• osm:collection_times: collection schedule times.
• osm:opening_hours+values: opening hours with additional values.

Media fields:

• image: image.
• mapillary: Mapillary street view imagery.
• panoramax: Panoramax street view imagery.

Display fields:

• color: color value.
• rating-scale: rating scale.

Note on Matomo. Origin is a set as dimension 1 and should be configured as is on Matomo.

Enable/Disable: Add the following query parameter in the URL: ?contrib=true|false