Skip to content

Latest commit

 

History

History

example

README.md

English / 日本語

Example for Mapbox Collision Boxes

A simple Vue 3 app to demonstrate mapbox-collision-boxes. This project was generated with npm init vue@latest.

This app shows a Mapbox map around Tokyo Station, and randomly spreads cat and dog symbols. You can click a cat or dog symbol and see which symbols are hidden by it. screenshots

Getting started

Prerequisites

You need Node.js installed. I have developed this library with the version 16, but the version 12 or higher should be fine.

Mapbox GL JS requires an access token to download map data. No access token is included in this repository, so you have to create it yourself. Please also refer to "Configuring Mapbox access token".

Configuring Mapbox access token

Please create a file mapbox-config.ts in the src folder, and write the following contents in it.

export const MAPBOX_ACCESS_TOKEN = '<Your Mapbox Access Token Here>';

Please replace <Your Mapbox Access Token Here> with your Mapbox access token. src/mapbox-config.ts is never pushed to this repository.

Resolving dependencies

npm install

Running the example on a dev server

npm run dev

A dev server will be hosted on http://localhost:5173.