Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kikuomax/imaginary-map
PoC project that renders an imaginary map with Mapbox GL JS library
https://github.com/kikuomax/imaginary-map
aws-api-gateway aws-cloudformation aws-cloudfront aws-codepipeline aws-lambda aws-sam mapbox-gl-js mapbox-vector-tiles
Last synced: 16 days ago
JSON representation
PoC project that renders an imaginary map with Mapbox GL JS library
- Host: GitHub
- URL: https://github.com/kikuomax/imaginary-map
- Owner: kikuomax
- License: mit
- Created: 2020-07-04T10:08:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T19:46:57.000Z (almost 2 years ago)
- Last Synced: 2024-10-17T07:37:11.818Z (2 months ago)
- Topics: aws-api-gateway, aws-cloudformation, aws-cloudfront, aws-codepipeline, aws-lambda, aws-sam, mapbox-gl-js, mapbox-vector-tiles
- Language: Python
- Homepage: https://kikuomax.github.io/imaginary-map/
- Size: 12 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Imaginary Map
A PoC project that renders an imaginary map using a [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/) API.
This is a sister project of [COVID-19 research](https://github.com/metasphere-xyz/covid19-research).
## Prerequisites
You need the following software installed,
- [Node.js](https://nodejs.org/en/) (tested with 12.14.0)
## Building an application
Please take the following steps,
1. Install modules.
```
npm ci
```
2. Build the application.
```
npm run build
```
3. You will find the following files in the `docs` directory updated.
- `index.html`
- `main.js`
For production, specify a `--mode=production` option at the step 2.
```
npm run build -- --mode=production
```
## Making a Mapbox vector tiles
There is a Go program that converts a GeoJSON object into a Mapbox vector tile object.
Please refer to [`tools/geo2html`](tools/geo2html) for more information.
## Hosting a CDN for map vector tiles
Map vector tiles are delivered through a CDN powered by [AWS CloudFront](https://aws.amazon.com/cloudfront/).
Please refer to [`cdn`](cdn) for more information.
## Running a test service
The following command starts a test service at http://localhost:3000.
```
npm start
```
You have to specify a CDN URL to a `tile-api` query parameter.
Suppose you have a CDN running at `https://xyz.cloudfront.net`, open the following URL.
```
http://localhost:3000/?tile-api=https%3A%2F%2Fxyz.cloudfront.net
```
## References
- [Mapbox vector tile specification](https://docs.mapbox.com/vector-tiles/specification/)
- [Vector tile specification v2.1](https://github.com/mapbox/vector-tile-spec/tree/master/2.1)
- [Add a third party vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/third-party/)