Many developers rely on Google’s Static Maps API to generate map images, but this has limitations such as:
- API rate limits
- Cost for high-volume usage
- Potential data privacy concerns
- Dependency on an external service

For a long time I was looking for an alternative to Maps Static API from Google which can be selfhosted but I couldn't find anything which seemed to fit my needs.

However I found [staticmaps](https://www.npmjs.com/package/staticmaps "staticmaps") which is a Node.JS library for creating map images with markers, polylines, polygons and text. But the library doesn't provide a web interface so I decided to built one on top of it with [express](https://github.com/expressjs/express "express") and containerized the staticmaps API.

## Docker Static Maps API

[docker-staticmaps](https://github.com/dietrichmax/docker-staticmaps "Docker Static Maps API") is a containerized web version for [staticmaps](https://www.npmjs.com/package/staticmaps) with [express](https://github.com/expressjs/express).

In general `docker-staticmaps` provides a self-hosted alternative that allows you to generate static map images on your own server without relying on third-party APIs.

## Usage

To get a static map from the endpoint `/staticmaps` several prameters have to be provided.

Parameter	Description	Example
center	Latitude,Longitude of map center	48.8588443,2.2943506
zoom	Zoom level (1-20)	12
size	Image size in pixels	600x400
marker	Add a marker at a location	48.8588,2.2943,red
polyline	Draw a line on the map	48.85,2.29;48.86,2.30,blue,2

- `center` - Center coordinates of the map in the format `lon, lat`
- `zoom` - Set the zoom level for the map.
- `width` - default `300` - Width in pixels of the final image
- `height` - default `300` - Height in pixels of the final image
- `format` - default `png` (e.g. `png`, `jpg` or `webp`)
- `basemap` - default `osm` - Map base layer

### Basemaps

For different basemaps docker-staticmaps is using exisiting tile-services from various providers. Be sure to check their Terms of Use for your use case or use a `custom` tileserver with the `tileUrl` parameter!

- `basemap` - default "osm" - Select the basemap
 - `osm` - default - [Open Street Map](https://www.openstreetmap.org/)
 - `streets` - [Esri street basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=7990d7ea55204450b8110d57e20c99ab)
 - `satellite` - Esri's [satellite basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=d802f08316e84c6592ef681c50178f17&center=-71.055499,42.364247&level=15)
 - `hybrid` - Satellite basemap with labels
 - `topo` - Esri [topographic map](https://www.arcgis.com/home/webmap/viewer.html?webmap=a72b0766aea04b48bf7a0e8c27ccc007)
 - `gray` - Esri gray canvas with labels
 - `gray-background` - Esri [gray canvas](https://www.arcgis.com/home/webmap/viewer.html?webmap=8b3d38c0819547faa83f7b7aca80bd76) without labels
 - `oceans` - Esri [ocean basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=5ae9e138a17842688b0b79283a4353f6&center=-122.255816,36.573652&level=8)
 - `national-geographic` - [National Geographic basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=d94dcdbe78e141c2b2d3a91d5ca8b9c9)
 - `otm` - [OpenTopoMap](https://www.opentopomap.org/)
 - `stamen-toner` - [Stamen Toner](http://maps.stamen.com/toner/) black and white map with labels
 - `stamen-toner-background` - [Stamen Toner](http://maps.stamen.com/toner-background/) map without labels
 - `stamen-toner-lite` - [Stamen Toner Light](http://maps.stamen.com/toner-lite/) with labels
 - `stamen-terrain` - [Stamen Terrain](http://maps.stamen.com/terrain/) with labels
 - `stamen-terrain-background` - [Stamen Terrain](http://maps.stamen.com/terrain-background/) without labels
 - `stamen-watercolor` - [Stamen Watercolor](http://maps.stamen.com/watercolor/)
 - `carto-light` - [Carto](https://carto.com/location-data-services/basemaps/) Free usage for up to 75,000 mapviews per month, non-commercial services only.
 - `carto-dark` - [Carto](https://carto.com/location-data-services/basemaps/) Free usage for up to 75,000 mapviews per month, non-commercial services only.
 - `carto-voyager` - [Carto](https://carto.com/location-data-services/basemaps/) Free usage for up to 75,000 mapviews per month, non-commercial services only.
 - `custom` - Pass through the tile URL using parameter `tileurl`

### Polylines

With the parameter `polyline` you can add a polyline to the map in the following format:

`polyline=polylineStyle|polylineCoord1|polylineCoord2|...`

- `polylineCoord` - required - in format `lat,lon` and seperated by `|`. Atleast two locations are needed to draw a polyline.

The `polylineStyle` consists of the following two parameters separated by `|`.

- `weight` - default `5` - Weight of the polyline in pixels, e.g. `weight:5`
- `color` - default `blue` -24-Bit-color hex value, e.g. `color:0000ff`

If no `center` is specified, the polyline will be centered.

<details>
 <summary>Polyline with no `zoom`, `weight:6` and `color:0000ff`</summary>
 http://localhost:3000/staticmaps?width=600&height=600&polyline=weight:6|color:0000ff|48.726304979176675,-3.9829935637739382|48.72623035828412,-3.9829726446543385|48.726126671101639,-3.9829546542797467|48.725965124843256,-3.9829070729298808|48.725871429380568,-3.9828726793245273|48.725764250990267,-3.9828064532306628|48.725679557682362,-3.9827385375789146|48.72567025076134,-3.9827310750289113|48.725529844164292,-3.9826617613709225|48.725412537198615,-3.9826296635284164|48.725351694726704,-3.9826201452878531|48.725258599474508,-3.9826063049230411|48.725157520450125,-3.9825900299314232|48.725077863838543,-3.9825779905509102|48.724930435729831,-3.9825514102373938|48.724815578113535,-3.9825237355887291|48.724760905376989,-3.9825013965800564|48.724677938456551,-3.9824534296566916|48.724379435330384,-3.9822469276001118|48.724304509274596,-3.9821850264836076|48.7242453124599,-3.9821320570321772|48.724206187829317,-3.9821063430223207|48.724117073204575,-3.9820862134785551
 </details>

![polylinepath.png](https://cms.mxd.codes/uploads/polylinepath_d9f50f216a.png)

### Polygons

With the parameter `polygon` you can add a polygon to the map in the following format:

`polygon=polygonStyle|polygonCoord1|polygonCoord2|...`

- `polygonCoord` - required - in format `lat,lon` and seperated by `|`. First and last locations have to be the same to close the polygon.

The `polygonStyle` consists of the following two parameters separated by `|`.

- `color` - default `blue` -24-Bit-color hex value, e.g. `color:4874db`
- `weight` - default `5` - Weight of the polygon in pixels, e.g. `weight:5`
- `fill` - default `green` -24-Bit-color hex value, e.g. `fill:eb7a34`

If no `center` is specified, the polygon will be centered.

<details>
 <summary>Polygon with no `zoom`, `color:4874db`,`weight:7` and `fill:eb7a3`</summary>
 http://localhost:3000/staticmaps?width=600&height=600&polygon=color:4874db|weight:7|fill:eb7a34|41.891169,12.491691|41.890633,12.493697|41.889012,12.492989|41.889467,12.490811|41.891169,12.491691
 </details>

![polygonexample.png](https://cms.mxd.codes/uploads/polygonexample_a8167c572c.png)


### Markers

With the parameter `markers` you can draw one or multiple markers depending on how much pair of coordinates you pass to the parameter

`markers=markerCoord1|markerCoord2|...`

- `markerCoord` - required - in format `lat,lon` and separated by `|`. Atleast one coordinate is needed to draw a marker.

If no `center` is specified, the markers will be centered.

<details>
 <summary>Markers</summary>
 http://localhost:3000/staticmaps?width=600&height=600&markers=48.726304979176675,-3.9829935637739382|48.724117073204575,-3.9820862134785551
 </details>

![markers.png](https://cms.mxd.codes/uploads/markers_e3060a2b45.png)

### Circles

With the parameter `circle` you can add a circle to the map in the following format:

`circle=circleStyle|circleCoord`

- `circleCoord` - required - in format `lat,lon` and separated by `|`. Atleast one locations is needed to draw a marker.

The `circleStyle` consists of the following parameters seperated by `|`.

- `radius` - required - Circle radius in meter, e.g. `radius:500`
- `color` - default `#0000bb` - Stroke color of the circle, e.g. `color:#0000bb`
- `width` - default `3` - Stroke width of the circle, e.g. `width:3`
- `fill` - default `#AA0000` - Fill color of the circle, e.g. `fill:#AA0000`

If no `center` is specified, the circle will be centered.

<details>
 <summary>Circle with no zoom</summary>
 http://localhost:3000/staticmaps?width=600&height=600&basemap=osm&circle=radius:100|48.726304979176675,-3.9829935637739382
 </details>

![circle.png](https://cms.mxd.codes/uploads/circle_646b7609a9.png)

### More usage Examples

<details>
 <summary>Minimal example: `center` and `zoom`</summary>
 http://localhost:3000/staticmaps?center=-119.49280,37.81084&zoom=9
</details>

![minimalexample.png](https://cms.mxd.codes/uploads/minimalexample_ce216c4b8e.png)

<details>
 <summary>`width=500`, `height=500`, `center=-73.99515,40.76761`, `zoom=10`, `format=webp`, `basemap=carto-voyager`</summary>
 http://localhost:3000/staticmaps?width=500&height=500&center=-73.99515,40.76761&zoom=10&format=webp&basemap=carto-voyager
</details>

![example2.webp](https://cms.mxd.codes/uploads/example2_2e3cbb505b.webp)

<details>
 <summary>Markers and Polyline</summary>
 http://localhost:3000/staticmaps?width=600&height=600&polyline=weight:6|color:0000ff|48.726304979176675,-3.9829935637739382|48.72623035828412,-3.9829726446543385|48.726126671101639,-3.9829546542797467|48.725965124843256,-3.9829070729298808|48.725871429380568,-3.9828726793245273|48.725764250990267,-3.9828064532306628|48.725679557682362,-3.9827385375789146|48.72567025076134,-3.9827310750289113|48.725529844164292,-3.9826617613709225|48.725412537198615,-3.9826296635284164|48.725351694726704,-3.9826201452878531|48.725258599474508,-3.9826063049230411|48.725157520450125,-3.9825900299314232|48.725077863838543,-3.9825779905509102|48.724930435729831,-3.9825514102373938|48.724815578113535,-3.9825237355887291|48.724760905376989,-3.9825013965800564|48.724677938456551,-3.9824534296566916|48.724379435330384,-3.9822469276001118|48.724304509274596,-3.9821850264836076|48.7242453124599,-3.9821320570321772|48.724206187829317,-3.9821063430223207|48.724117073204575,-3.9820862134785551&markers=48.726304979176675,-3.9829935637739382|48.724117073204575,-3.9820862134785551
 </details>

![markersandpolyline.png](https://cms.mxd.codes/uploads/markersandpolyline_04626a7660.png)



## Deployment

**with Docker**

```bash
docker run -d \
 --name='static-maps-api' \
 -p '3003:3000/tcp' \
 'mxdcodes/docker-staticmaps:latest'
```

**with Node.js**

```bash
git clone https://github.com/dietrichmax/docker-staticmaps
npm i
npm run start
```

**Links**
* GitHub: [https://github.com/dietrichmax/docker-staticmaps](https://github.com/dietrichmax/docker-staticmaps)
* Docker Hub: [https://hub.docker.com/r/mxdcodes/docker-staticmaps](https://hub.docker.com/r/mxdcodes/docker-staticmaps)

A containerized web version for staticmaps with express.

docker-staticmaps: A selfhosted Static Maps API

Inspired by Aaron Parecki who has been [tracking his location since 2008](https://aaronparecki.com/gps/ "location tracking") with an iPhone app ([Overland](https://overland.p3k.app/ "Overland")) and a server side tracking API ([Compass](https://github.com/aaronpk/Compass "Compass")), I decided to go for a similar approach.

I wanted to track my position constantly with my Android smartphone, save the data to a Postgres database and use the data to display an map with all locations i have ever been to.

To be able to track my position i needed an stable android app and after some tinkering around with different tracking apps I found [OwnTracks](https://owntracks.org/ "OwnTracks") which basically has all i need (and a good [documentation](https://owntracks.org/booklet/ "OwnTracks Documentation") of it).

In this article, we will explore a step-by-step guide on how to set up a location tracking system using OwnTracks for mobile devices, Node.js for a webhook server, PostgreSQL for data storage, and GeoServer, MapProxy, and Nginx for visualizing the location data.

But first of all we need a database to be able to actually save the data.

## Set up PostgreSQL 

To install [PostgrSQL 16](https://www.postgresql.org/about/news/postgresql-16-released-2715/ "PostgreSQL 16") you will need to the repository that provides the packages.
First, update the package index and install required packages:

```bash
sudo apt update
sudo apt install gnupg2 wget vim
```

The PostgreSQL repository can then be added using the command:

```bash
sudo sh -c 'echo "deb https://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
```

Import the repository signing key:
```bash
curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/postgresql.gpg
```
And update your package list:

```bash
sudo apt update
```

Afterwards you can install the latest PostgreSQL (16) version with:
```bash
sudo apt-get -y install postgresql postgresql-contrib
```

Once installed, start and enable the service:
```bash
sudo systemctl start postgresql
sudo systemctl enable postgresql
```

Now you will need a user and database for your location data.

Connect to the PostgreSQL database with:
```bash
sudo su postgres
psql
```

and create a database with:
```sql
CREATE DATABASE locations;
```

aswell a user with:
```sql
CREATE USER USER <username> with encrypted password '<password>';
```

Then you can grant privileges for your user to the database:
```bash
GRANT ALL PRIVILEGES ON DATABASE locations TO <username>;
```

After you set up your database and user you also will need a table to store the data.
The table where I save my locations can be recreated with: 

```sql
CREATE TABLE public.locations (
	id bigserial NOT NULL,
	created_at timestamptz NULL DEFAULT CURRENT_TIMESTAMP,
	lat float8 NULL,
	lon float8 NULL,
	acc int4 NULL,
	alt int4 NULL,
	batt int4 NULL,
	bs int4 NULL,
	cog numeric(10, 2) NULL,
	rad int4 NULL,
	t varchar(255) NULL,
	tid varchar(255) NULL,
	tst int4 NULL,
	vac int4 NULL,
	vel int4 NULL,
	p numeric(10, 2) NULL,
	conn varchar(255) NULL,
	topic varchar(255) NULL,
	inregions jsonb NULL,
	ssid varchar(255) NULL,
	bssid varchar(255) NULL,
);
```
The most important attributes are **lat** (latitude), **lon** (longitude) and **alt** (altitude) which are used to render points later on.

Also I am saving the velocity, battery level of the smartphone and some more data which will be displayed at my [/now](/now "/now") page. The velocity and altitude are quite inaccurate though which probably also depends on the smartphone.

## Create a Node.js Webhook server

You can create a node.js server to act as a webhook to receive location data from OwnTracks. With the [pg](https://www.npmjs.com/package/pg "pg") npm package you can interact with the PostgreSQL database.

```javascript
const http = require("http");
const axios = require('axios');
const { Pool} = require('pg')

const pool = new Pool({
 user: 'username',
 database: 'database',
 password: 'pw!',
 port: port,
 host: 'localhost',
})

async function insertData(body) {
 try {
 const res = await pool.query(
 "INSERT INTO locations (lat, lon, acc, alt, batt, bs, tst, vac, vel, conn, topic, inregions, ssid, bssid) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)",
 [body.lat, body.lon, body.acc, body.alt, body.batt, body.bs, body.tst, body.vac, body.vel, body.conn, body.topic, body.inregions, body.ssid, body.bssid]
 );
 console.log(`Added location ${body.lat}, ${body.lon}`);
 } catch (error) {
 console.error(error)
 }
}

const server = http.createServer((request, response) => {
 let body = [];
 console.log(request.method)
 if (request.method === "POST") {
 request.on('data', (chunk) => {
 body.push(chunk);
 }).on('end', () => {
 body = JSON.parse(Buffer.concat(body).toString());
 insertData(body)
 })
 }

 response.end();
});

server.listen(9001);
```

So basically the webhook parses the request body and inserts the data via an insert statement into the postgres table. Also the server is listening on port 9001 so be sure you opened that port on your sever. The Url for Owntracks now could be **http://yourserverip:9001**.

## Setting up OwnTracks

The OwnTracks app runs in the background on your Android or iOS device and waits for the smart phone to tell it that the device has moved, whereupon OwnTracks sends out a message with its current coordinates (and a few other things we'll discuss in a moment)

With different settings for the app I could tailor the app exactly to my needs because I wanted the app to check my position every second and when i have moved more than two meters from my last known position it should send a POST-Request to my Strapi instance which will store the location data in a Postgres database.

In the following screenshot you can see the settings I am using for OwnTracks.

![content_Screenshot_Own_Tracks_settings_c7d95a33be.jpg](https://cms.mxd.codes/uploads/content_Screenshot_Own_Tracks_settings_c7d95a33be_4b3fcffdf5.jpg)

The most important seetings for me are the mode 
- **Significant location change mode**,
- **locatorDisplacement**,
- **locatorInterval**,
- **ignoreInaccurateLocations** and
- **url** for the POST-request.

The **significant location change mode** is a mode which will let you decide in which interval you want to track your position. I am using the **locationInterval** '1' which will track my position every second with an **LocatorDisplacement** of 1 which will check if i moved away a meter away from my last known position. If i did it will send an POST-request with the location data to the given url if the position data isn't more inaccurate than 10 meters.

Because the app has to run always in the background you probably have to switch off energy saving modes for your smartphone which might disable the background functionality. 

Be warned: You probably will have to charge your smartphone more often. Also sometimes the app has some tracking error if you are using parallel some other tracking app for example for activities like strava.

The url **http://yourserverip:9001** for the POST-request points to the nodejs server webhook which will run a insert command for the postgres database. 

Now the data will be stored in the postgres database but it still needs to be visualized somehow and therefore it needs a geometry attribute. 

## Creating a PostGIS extension

To be able to create a geometry you will need the [PostGIS](https://postgis.net/ "PostGIS") extension. You can extend your PostgreSQL database with 

```bash
sudo apt-get install postgis
sudo su postgres
psql
\c locations
CREATE EXTENSION postgis;
\q
```

Then create a view which creates a geometry based on the lat and lon attribute from the existing table. 

```sql
CREATE OR REPLACE VIEW public.locations_geom
AS SELECT id,
 lat,
 lon,
 alt,
 vel,
 st_setsrid(st_makepoint(lon, lat, alt::double precision), 4326) AS geom
 FROM locations;
```

At the moment I wrote/edited this post I have about two million datasets in the table, so fetching and rendering the data client-side would not be the best idea. This is where Geoserver takes over.

## Install and configure Geoserver

[GeoServer](https://geoserver.org/ "GeoServer") is an open source server for sharing geospatial data.

To setup GeoServer I created a stack in portainer:

```docker
version: '3'

networks:
 default:
 external: true
 name: nginx
 
services:
 geoserver:
 image: kartoza/geoserver:latest
 container_name: geoserver
 restart: always
 volumes:
 - /data/containers/geoserver:/opt/geoserver/data_dir
 ports:
 - "8080:8080"
 environment:
 GEOSERVER_DATA_DIR: ${GEOSERVER_DATA_DIR}
 GEOSERVER_ADMIN_PASSWORD: ${GEOSERVER_ADMIN_PASSWORD}
 GEOSERVER_ADMIN_USER: ${GEOSERVER_ADMIN_USER}
 INITIAL_MEMORY: ${INITIAL_MEMORY}
 MAXIMUM_MEMORY: ${MAXIMUM_MEMORY}
 DB_BACKEND: POSTGRES 
 HOST: ${POSTGRES_HOST} 
 POSTGRES_PORT: 5432 
 POSTGRES_DB: gwc 
 POSTGRES_USER: ${POSTGRES_USER} 
 POSTGRES_PASS: ${POSTGRES_PASS} 
 POSTGRES_SCHEMA: public 
 DISK_QUOTA_SIZE: 20 
```

After deploying GeoServer you can login with the default user "admin" and password "geoserver" or the credentials you assigned with environment variables.

To add a new datasource you have to click on **Stores** and **Add new store**. Then you can select PostGIS (or whatever datasource you want to use).

![Screenshot_2024_01_31_162720_b6e7885b51.png](https://cms.mxd.codes/uploads/Screenshot_2024_01_31_162720_b6e7885b51_737a7d28df.png)

Fill out host, port, database, schema, user and passwd and save your connection.
Afterwards you can select layers which you want to publish.

![Screenshot_2024_01_31_162805_b0ba171177.png](https://cms.mxd.codes/uploads/Screenshot_2024_01_31_162805_b0ba171177_75e18fdc67.png)

After you published your layer you can preview the layer at **Layer Preview**.

Now I am not using Geoserver as endpoint to serve the tiles because I have a Mapproxy instance running which will take care of transforming tiles from internal or external ressources.

## MapProxy

Setting up MapProxy is optional but in this post I will use the endpoints from MapProxy to render a web map. So if you decied to skip MapProxy you will have to adjust the wms URL's to your endpoint from GeoServer.

[MapProxy](https://mapproxy.org/ "MapProxy") is an open source proxy for geospatial data. It caches, accelerates and transforms data from existing map services and serves any desktop or web GIS client.
I have decided create a own docker image [mapproxy-docker](https://github.com/dietrichmax/mapproxy-docker " dietrichmax/mapproxy-docker") which you can setup use in a portainer stack with:

```yaml
version: '3.9'

networks:
 default:
 external: true
 name: nginx
 
services:
 mapproxy:
 image: mxdcodes/mapproxy-docker:latest
 container_name: mapproxy
 restart: always
 ports:
 - 3050:80
 volumes:
 - /mapproxy/config:/persistentConfigFolder
 - /mapproxy/cache_data:/persistentCacheFolder
```

The only thing MapProxy needs one or multiple configuration files in yaml format for each service. So set up a locations.yaml under ```/persistentConfigFolder/locations.yaml```:

```yaml
services:
 demo:
 tms:
 use_grid_names: true
 # origin for /tiles service
 origin: 'nw'
 kml:
 use_grid_names: true
 wmts:
 wms:
 md:
 title: Location Data
 abstract: For mxd.codes.

layers:
 - name: locations
 title: Locations - mxd.codes
 sources: [locations_cache]

caches:
 locations_cache:
 grids: [webmercator]
 sources: [locations_wms]

sources:
 locations_wms:
 type: wms
 req:
 url: http://geoserver:8080/geoserver/mxdcodes/wms?
 layers: locations
 transparent: true

grids:
 webmercator:
 base: GLOBAL_WEBMERCATOR

globals:
 # cache options
 cache:
 # where to store the cached images
 base_dir: '/cache_data'
 # where to store lockfiles for concurrent_requests
 lock_dir: '/cache_data/locks'
 # where to store lockfiles for tile creation
 tile_lock_dir: '/cache_data/tile_locks'
 # request x*y tiles in one step
 meta_size: [4, 4]
 # image/transformation options
 image:
 # use best resampling for vector data
 resampling_method: bilinear # nearest/bicubic/bilinear
 formats:
 image/jpeg:
 encoding_options:
 # jpeg quality [0-100]
 jpeg_quality: 80
```

Be sure to replace the sources url with the url from your GeoServer instance.

Now you should have a endpoint for your wms tiles under **http://serverurl:3050/locations/service?** which you can use to create web map on your website.

I also created each service under a seperate subdomain and setup https for it with Cloudflare but I won't go into detail here because you will find hundreds of tutorials online.

## Creating a Web Map with Leaflet and React

The end product of all this should be a simple map on my [personal website](https://mxd.codes "mxd.codes") under [/map](/map "map"). The map component looks like the following:

```javascript
import React, { useState, useRef, useEffect } from "react"
import "ol/ol.css"
import Map from "ol/Map"
import TileLayer from "ol/layer/Tile"
import View from "ol/View"
import XYZ from "ol/source/XYZ"
import { transform, get as getProjection } from "ol/proj"
import WMTSTileGrid from "ol/tilegrid/WMTS.js"
import WMTS from "ol/source/WMTS.js"
import TileWMS from "ol/source/TileWMS.js"
import OSM from "ol/source/OSM.js"
import { getTopLeft, getWidth } from "ol/extent.js"

function LiveMap({data}) {
 const [map, setMap] = useState()
 const mapElement = useRef()
 const mapRef = useRef()
 mapRef.current = map

 const projection = getProjection("EPSG:3857")
 const projectionExtent = projection.getExtent()
 const size = getWidth(projectionExtent) / 256
 const resolutions = new Array(19)
 const matrixIds = new Array(19)
 for (let z = 0; z < 19; ++z) {
 // generate resolutions and matrixIds arrays for this WMTS
 resolutions[z] = size / Math.pow(2, z)
 matrixIds[z] = z
 }

 const locData = new TileLayer({
 opacity: 0.9,
 preload: Infinity,
 source: new WMTS({
 attributions: '&copy; <a href="https://mxd.codes/">Max Dietrich</a>',
 url: "tilelayerurl",
 layer: "locations",
 matrixSet: "webmercator",
 format: "image/png",
 projection: projection,
 tileGrid: new WMTSTileGrid({
 origin: getTopLeft(projectionExtent),
 resolutions: resolutions,
 matrixIds: matrixIds,
 }),
 style: "default",
 wrapX: true,
 }),
 })

 const aerial = new TileLayer({
 opacity: 0.9,
 preload: Infinity,
 source: new WMTS({
 attributions:
 "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
 url: "tilelayerurl",
 layer: "arcgisaerial",
 matrixSet: "webmercator",
 format: "image/png",
 projection: projection,
 tileGrid: new WMTSTileGrid({
 origin: getTopLeft(projectionExtent),
 resolutions: resolutions,
 matrixIds: matrixIds,
 }),
 style: "default",
 wrapX: true,
 }),
 })

 const center = transform([data.lon, data.lat], "EPSG:4326", "EPSG:3857")

 useEffect(() => {
 const initialMap = new Map({
 target: mapElement.current,
 layers: [aerial, locData],
 view: new View({
 center: center,
 zoom: 16,
 maxZoom: 16,
 }),
 })
 setMap(initialMap)
 }, [])

 return (
 <div
 style={{ height: "100%", width: "100%" }}
 ref={mapElement}
 className="map-container"
 />
 )
}

export default LiveMap
```

Inspired by Aaron Parecki and who he has been tracking his location since 2008 with an iPhone app and a server side tracking API i decided to go for a similar approach.

I wanted to track my position constantly with my Android smartphone and use the data to display a map with all locations i have ever been to.

Node.js

docker-staticmaps: A selfhosted Static Maps API

A Guide to Location Tracking and Visualization with OwnTracks, Node.js, PostgreSQL, GeoServer, MapProxy, Nginx and OpenLayers