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) which can be easily selfhosted.

## Usage

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

- `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>
  <p>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</p>
  </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>
    <p>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</p>
  </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>
  <p>http://localhost:3000/staticmaps?width=600&height=600&markers=48.726304979176675,-3.9829935637739382|48.724117073204575,-3.9820862134785551</p>
  </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>
  <p>http://localhost:3000/staticmaps?width=600&height=600&basemap=osm&circle=radius:100|48.726304979176675,-3.9829935637739382</p>
  </details>

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

### More usage Examples

<details>
  <summary>Minimal example: `center` and `zoom`</summary>
  <p>http://localhost:3000/staticmaps?center=-119.49280,37.81084&zoom=9</p>
</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>
  <p>http://localhost:3000/staticmaps?width=500&height=500&center=-73.99515,40.76761&zoom=10&format=webp&basemap=carto-voyager</p>
</details>

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

<details>
  <summary>Markers and Polyline</summary>
  <p>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</p>
  </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

## What is OpenLayers?

[OpenLayers](https://openlayers.org/) is a JavaScript library that makes it relatively easy to visualize geodata in web applications (Web-GIS).

OpenLayers is a programming interface that allows client-side development independent of the server. Map tiles, vector data and markers from various data sources can be displayed.

Open Layers was developed to promote the use of [geodata](/en/gis/geodata-what-are-geodata "What are geodata?") Of all kinds. OpenLayers is also free, open-source and is published under "2-clause BSD License".

To be able to create a map with OpenLayers, all you need is a basic general knowledge of programming languages. The missing pieces of the puzzle can be found very easily using the detailed documentation on OpenLayers.

## Create HTML file

First of all, an HTML file is required as the basic framework. The basic structure usually looks like this:

```html
    <html>
      <head>
        <title>OpenLayers Demo</title>
      </head>
      <body>
      </body>
    </html>
```

You can now copy this code and paste it into a file that you name, for example, "jsmap.html".

_If you want to learn more about HTML, you can find a few useful tutorials on [w3schools](https://www.w3schools.com/html/)._

## Insert OpenLayers Javascript library

Now the OpenLayers Javascript is integrated into the HTML. You copy for that

```html
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
```

between `<title>` and `<head>`. You can do that right away

```js
function init() {
  map = new OpenLayers.Map("basicMap"); //create a new map
  var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
  map.addLayer(mapnik); //add the OSM layer to the map

  var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
  map.addLayer(markers); //add the markers layer to the current map

  var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
    .transform(  //transform the location to the coordinate system of our OpenLayers map
      new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
      map.getProjectionObject() // to Spherical Mercator Projection
    );
  markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer

  map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15
}
```

also included in script tags. Here a function with the name init is created, the

* which creates the map and inserts it in the element "basicMap"
* created a layer with [OpenStreetMap](https://www.openstreetmap.org/#map=6/51.330/10.453) data and added it to the map
* creates a layer for markers and also adds this to the map
* Defined a marker in WGS84 and then transformed it from WGS1984 to Spherical Mercator Projection
* add this marker to the map
* and finally centered the map on this marker and set a zoom level.

Now this function must also be loaded and the card placed. For that you are replacing now

```html
  <body>
  </body>
```

with

```html
    <body onload="init();">
        <div style="width: 100%; height: 60%;" id="basicMap"></div>
    </body>
```

With `javascript onload =" init (); `the function is executed when loading the HTML file and inserted via the id` id = "basicMap" `.

Your complete file should now look like this:

```html
    <html>
      <head>
        <title>OpenLayers Demo</title>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script>
          function init() {
            map = new OpenLayers.Map("basicMap"); //create a new map
            var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
            map.addLayer(mapnik); //add the OSM layer to the map

            var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
            map.addLayer(markers); //add the markers layer to the current map

            var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
              .transform(  //transform the location to the coordinate system of our OpenLayers map
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
              );
            markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer

            map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15
          }
        </script>
      </head>
      <body onload="init();">
        <div style="width: 100%; height: 60%;" id="basicMap"></div>
      </body>
    </html>
```

If you save the file and open it, you will end up in the browser of your choice and your Javascript web map will be displayed with OpenLayers.

If you now want to change the position of the marker, all you have to do is change the coordinates.

## Create markers with a 'for .. of ..' loop

Normally, you often want to display several points and not just one on the map.
In theory you could

```js
  var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
    .transform(  //transform the location to the coordinate system of our OpenLayers map
      new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
      map.getProjectionObject() // to Spherical Mercator Projection
    );
    markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer
```

now copy for each additional marker you want to create and simply change the coordinates. But since the whole thing becomes relatively confusing, we will solve it differently.

First, we create an array of arrays.

```js
  var poi = [ // create array with point of interests
    [ 11.557617 ,48.092757 ],
    [ 8.558350, 50.028917 ],
    [ 6.701660, 51.289406 ],
    [ 13.337402, 52.496160 ]
  ];
```

All coordinates for the markers to be displayed are now stored in this array. Now we create a function that can be called to create markers and add them to the map.

```js
function createmarker (lon,lat) {
  var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points
    .transform(  //transform the location to the coordinate system of our OpenLayers map
      new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
      map.getProjectionObject() // to Spherical Mercator Projection
    );
    markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer
}	
```

This function should now be carried out for each pair of coordinates in the "poi" array. This can be solved with a "for .. of" loop.

```js
for (var x of poi) { // for each array(object) in array 
  createmarker (x[0],x[1]) // create markers
}
```

In this loop, a marker is now created for each coordinate pair in the array, transformed and added to the map. The "poi" array can now be expanded as required and the additional markers are automatically added to the map.

## Add markers via UI

In order to make the whole thing more user-friendly and not having to change the code manually every time, we are now creating a simple user interface to add additional markers.

The new coordinates should be entered via two input fields and created with a confirmation on a button.

The HTML framework can look like this and should be placed somewhere in the "body" area:

```html
    <div class="add_markers">
    	<div class="input_markers">	
    	  Add new markers with coordinates in WGS84!
    		<div class="row">
    			<div class="col-25">
    				<label for="lat">Latitude:</label>
    			</div>
    			<div class="col-75">
    				<input type="text" id="lat" name="firstname" placeholder="48.060614">
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-25">
    				<label for="lon">Longitude:</label>
    			</div>
    			<div class="col-75">
    				<input type="text" id="lon" name="lastname" placeholder="12.190876">
    			</div>
    		</div>
    		<button id="add_marker" class="button">Add marker!</button>
    		<div id="poi_added" class="poi_added"></div>
    	</div>
    </div>
    </div>
```

The most important here are the ids via which the values of the fields are later adopted.

To create these markers we use a function that is called every time the button "Add Marker!" is clicked.

The complete function looks like this:

```js
function addFeature() {
  var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
  var lon = parseFloat(document.getElementById("lon").value); // get value of input lon and parse to float

  var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
  poi.push(newFeature) // add NewFeature to array "poi"

  createmarker (lon,lat) // create marker for input lat, lon  
  document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
}
```

```js
    var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
    var lon = parseFloat(document.getElementById("lon").value);
```

Are references to the elements with the ID "lat" and "lon", ie the two input fields. Here the two variables "lat" and "lon" are created, to which the value from the input fields is assigned.

Then they are merged into an array, since a marker always consists of two coordinates and is added to the "poi" array.

```js
    var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
    poi.push(newFeature) // add NewFeature to array "poi"
```

Adding it to the "poi" array is not functionally necessary, but it can be useful if, for example, you want to create popovers that show the coordinates of each marker.

The coordinates are now saved in "lat" and "lon" and they only have to be transferred to the previously created function "createmarker", which creates the markers and adds them to the map.

```js
    createmarker (lon,lat) // create marker for input lat, lon  
```

It would be nice if the user received feedback about what happened after clicking the button. This can be done with

```js
    document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
```

The last thing that is missing is that the function is executed with a click on the button.

```js
    document.getElementById('add_marker').addEventListener('click', addFeature); // execute function "addFeature" when button with id "add_marjer" is clicked
```

As soon as the button with the id "add_marker" is clicked, the "addFeature" function is now executed.

With

```js
    var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer
```

the extent of the "markers" layer is determined, zoomed onto it and assigned to the variable extent.

If you now save and open your file again, you should see your map with all markers and be able to add additional markers via a graphical user interface.


```html
    <html>
      <head>
        <title>OpenLayers Demo</title>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script>
    		function init() {
    			map = new OpenLayers.Map("basicMap"); //create a new map
    			var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
    			map.addLayer(mapnik); //add the OSM layer to the map

    			var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
    			map.addLayer(markers); //add the markers layer to the current map

    			function createmarker (lon,lat) {
    				var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points
    						.transform(  //transform the location to the coordinate system of our OpenLayers map
    							new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
    							map.getProjectionObject() // to Spherical Mercator Projection
    						);
    				markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer
    			}	

    			var poi = [ // create array with point of interests
    			[ 11.557617 ,48.092757 ],
    			[ 8.558350, 50.028917 ],
    			[ 6.701660, 51.289406 ],
    			[ 13.337402, 52.496160 ]
          ];

    			for (var x of poi) { // for each array(object) in array 
    				createmarker (x[0],x[1]) // create markers
    			}

    			var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer

    			function addFeature() {
    			  var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
    			  var lon = parseFloat(document.getElementById("lon").value); // get value of input lon and parse to float

    			  var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
    			  poi.push(newFeature) // add NewFeature to array "poi"

    			  createmarker (lon,lat) // create marker for input lat, lon  
    			  document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
    			}

    			document.getElementById('add_marker').addEventListener('click', addFeature); // execute function "addFeature" when button with id "add_marjer" is clicked
    		}

    		//  popover coordinates markers 
        </script> 
    	<style>
      /*dein style*/
    	</style>
      </head>
      <body onload="init();">
    	<div id="wrapper"  >
    		<div style="width: 100%; height: 80%" id="basicMap"></div>
    			<div class="add_markers">
    				<div class="input_markers">	
    					Add new markers with coordinates in WGS84!
    					<div class="row">
    						<div class="col-25">
    							<label for="lat">Latitude:</label>
    						</div>
    						<div class="col-75">
    							<input type="text" id="lat" name="firstname" placeholder="48.060614">
    						</div>
    					</div>
    					<div class="row">
    						<div class="col-25">
    							<label for="lon">Longitude:</label>
    						</div>
    						<div class="col-75">
    							<input type="text" id="lon" name="lastname" placeholder="12.190876">
    						</div>
    					</div>
    					<button id="add_marker" class="button">Add marker!</button>
    					<div id="poi_added" class="poi_added"></div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
      </body>
    </html>
```

OpenLayers is a JavaScript library which allows you to visualize easily geodata in web applications (Web GIS).

Javascript

docker-staticmaps: A selfhosted Static Maps API

How to create a web-map with OpenLayers