Source: https://developers.woosmap.com/products/map-static-api/advanced-usages/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Customize static maps



This guide leads you through the more advanced capabilities of the Woosmap Static Map. Add custom marker, more than one if necessary, define a custom style for the basemap or display multiple polygons/polylines.

## Add Multiple Markers

You can add multiple markers by including multiple `markers` parameters as JSON objects:

```html
<img 
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&markers={"lat":51.50350,"lng":-0.1186431}&markers={"lat":51.50250,"lng":-0.11784317}' alt='Map with two default markers' />
```

**Result:** A 600 × 400 pixels map with two default Markers.  

<p align="center">
  <img alt="Static Map with Markers" src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&markers={"lat":51.50350,"lng":-0.1186431}&markers={"lat":51.50250,"lng":-0.11784317}'>
</p>

Up to 5 markers can be added to a static map.

## Add a Custom Marker

You can add custom markers to a static map by including a `markers` parameters as JSON objects containing the `url` value for your marker:

```html
<img 
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&markers={"lat":51.50350,"lng":-0.1186431,"url":"https://www.woosmap.com/images/marker-staticmap-2.png?retina=true"}' alt='Map with one custom marker' />
```

**Result:** A 600 × 400 pixels map with one custom marker.  

<p align="center">
  <img alt="Static Map with a Custom Marker" src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&markers={"lat":51.50350,"lng":-0.1186431,"url":"https://www.woosmap.com/images/marker-staticmap-2.png?retina=true"}'>
</p>

Up to 5 custom markers can be added to a static map. Each custom marker can be defined with a dedicated url.

## Add multiple Polygons

You can add up to 5 polygon geometries by including the `polygons` parameters as a JSON object representing the coordinates of the geometry:

```html
<img 
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&polygons={"shape":"qgjyHtgVb@mHiBq@cB_AgA`H\\n@~Ap@rBZ","color":"rgba(255, 20, 147, 0.8)", "fill_color": "rgba(199, 21, 133, 0.3)"}&polygons={"shape":"cejyHxhVd@mHbBl@c@pGeBQ","color":"Blue","fill_color":"LightBlue"}' alt='Map with two polygons' />
```

**Result:** This displays a map centered on The London Eye and the Jubilee Gardens (UK), with two polygons representing limits of a theoretical “Summer event” area in pink and another area in light blue.  

<p align="center">
  <img alt="Static Map with 2 Polygons" src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&polygons={"shape":"qgjyHtgVb@mHiBq@cB_AgA`H\\n@~Ap@rBZ","color":"rgba(255, 20, 147, 0.8)", "fill_color": "rgba(199, 21, 133, 0.3)"}&polygons={"shape":"cejyHxhVd@mHbBl@c@pGeBQ","color":"Blue","fill_color":"LightBlue"}'>
</p>

To limit size of URL and avoid error with URL interpretation, `shape` value should be an encoded string of an encoded polygon.

## Add multiple Polylines

You can add up to 5 polyline geometries by including the `polyline` parameters as a JSON object representing the coordinates of the geometry:  

```html
<img 
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&polylines={"enc":"wfjyH`iVJuBG_@T{DAKBi@mAi@TiB[O","color":"blue","weight":4}&polylines={"enc":"ahjyH|wUUMsAe@WvBt@^OnAe@OK@GHAP?TFXHVB^h@F","color":"HotPink","weight":4}' alt='Map with two polylines' />
```

**Result:** This displays a map centered on The London Eye and the Jubilee Gardens (UK) with a polyline representing a path between the London Eye and the close by *Pret à Manger* and another path to the center of the Jubilee Gardens.  

<p align="center">
  <img alt="Static Map with Polyline" src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&polylines={"enc":"wfjyH`iVJuBG_@T{DAKBi@mAi@TiB[O","color":"blue","weight":4}&polylines={"enc":"ahjyH|wUUMsAe@WvBt@^OnAe@OK@GHAP?TFXHVB^h@F","color":"HotPink","weight":4}'>
</p>

To limit size of URL and avoid error with URL interpretation, `enc` value should be an encoded string of an encoded polyline.

## Set a custom style for your static map

You can define how your static map will look like by defining a custom style via the `stylers` parameter. This parameter should be passed as JSON objects following the [Map Styling definition](/products/map-api/concepts/map-styles)

```html
<img 
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&stylers=[{"featureType": "point_of_interest","elementType":"all","stylers":[{"visibility": "off"}]}]' alt='Map with a style removing point of interest' />
```

**Result:** A 600 × 400 pixels map with a style removing Points of Interest.  

<p align="center">
  <img alt="Static Map with a Custom Marker" src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&stylers=[{"featureType": "point_of_interest","elementType":"all","stylers":[{"visibility": "off"}]}]'>
</p>

### Let's mix those parameters:

```html
<img 
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&markers={"lat":51.50345,"lng":-0.1194,"url":"https://www.woosmap.com/images/marker-staticmap-8.png?retina=true"}&stylers=%5B%7B%22featureType%22:%22all%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%23242f3e%22%7D%5D%7D,%7B%22featureType%22:%22all%22,%22elementType%22:%22labels.text.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%23242f3e%22%7D%5D%7D,%7B%22featureType%22:%22all%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23746855%22%7D%5D%7D,%7B%22featureType%22:%22administrative.locality%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23d59563%22%7D%5D%7D,%7B%22featureType%22:%22poi%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23d59563%22%7D%5D%7D,%7B%22featureType%22:%22poi.park%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%23326030%22%7D%5D%7D,%7B%22featureType%22:%22poi.park%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%236b9a76%22%7D%5D%7D,%7B%22featureType%22:%22road%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%2338414e%22%7D%5D%7D,%7B%22featureType%22:%22road%22,%22elementType%22:%22geometry.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%23212a37%22%7D%5D%7D,%7B%22featureType%22:%22road%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%239ca5b3%22%7D%5D%7D,%7B%22featureType%22:%22road.highway%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%23746855%22%7D%5D%7D,%7B%22featureType%22:%22road.highway%22,%22elementType%22:%22geometry.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%231f2835%22%7D%5D%7D,%7B%22featureType%22:%22road.highway%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23C38B5F%22%7D%5D%7D,%7B%22featureType%22:%22transit%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%232f3948%22%7D%5D%7D,%7B%22featureType%22:%22transit.station%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23d59563%22%7D%5D%7D,%7B%22featureType%22:%22water%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%2317263c%22%7D%5D%7D,%7B%22featureType%22:%22water%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23515c6d%22%7D%5D%7D,%7B%22featureType%22:%22water%22,%22elementType%22:%22labels.text.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%2317263c%22%7D%5D%7D%5D&polylines=%7B%22enc%22:%22wfjyH%60iVJuBG_@T%7BDAKBi@mAi@TiB%5BO%22,%22color%22:%22blue%22,%22weight%22:4%7D&polygons=%7B%22shape%22%3A%22qgjyHtgVb%40mHiBq%40cB_AgA%60H%5C%5Cn%40~Ap%40rBZ%22%2C%22color%22%3A%22rgba(255%2C%2020%2C%20147%2C%200.8)%22%2C%20%22fill_color%22%3A%20%22rgba(199%2C%2021%2C%20133%2C%200.3)%22%7D&markers=%7B%22lat%22%3A51.503579%2C%22lng%22%3A-0.1165989%7D' alt='Map combining all parameters' />
```

**Result:** A 600 × 400 pixels map with a dark style, a custom marker, a polygon and a polyline.  

<p align="center">
  <img alt="Static Map with a Custom Marker" src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.1186431&zoom=16&width=600&height=400&retina=yes&key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&markers=%7B%22lat%22%3A51.5036%2C%22lng%22%3A-0.1194%2C%22url%22%3A%22https%3A%2F%2Fwww.woosmap.com%2Fimages%2Fmarker-staticmap-8.png%3Fretina%3Dtrue%22%7D&stylers=%5B%7B%22featureType%22:%22all%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%23242f3e%22%7D%5D%7D,%7B%22featureType%22:%22all%22,%22elementType%22:%22labels.text.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%23242f3e%22%7D%5D%7D,%7B%22featureType%22:%22all%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23746855%22%7D%5D%7D,%7B%22featureType%22:%22administrative.locality%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23d59563%22%7D%5D%7D,%7B%22featureType%22:%22poi%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23d59563%22%7D%5D%7D,%7B%22featureType%22:%22poi.park%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%23326030%22%7D%5D%7D,%7B%22featureType%22:%22poi.park%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%236b9a76%22%7D%5D%7D,%7B%22featureType%22:%22road%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%2338414e%22%7D%5D%7D,%7B%22featureType%22:%22road%22,%22elementType%22:%22geometry.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%23212a37%22%7D%5D%7D,%7B%22featureType%22:%22road%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%239ca5b3%22%7D%5D%7D,%7B%22featureType%22:%22road.highway%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%23746855%22%7D%5D%7D,%7B%22featureType%22:%22road.highway%22,%22elementType%22:%22geometry.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%231f2835%22%7D%5D%7D,%7B%22featureType%22:%22road.highway%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23C38B5F%22%7D%5D%7D,%7B%22featureType%22:%22transit%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%232f3948%22%7D%5D%7D,%7B%22featureType%22:%22transit.station%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23d59563%22%7D%5D%7D,%7B%22featureType%22:%22water%22,%22elementType%22:%22geometry%22,%22stylers%22:%5B%7B%22color%22:%22%2317263c%22%7D%5D%7D,%7B%22featureType%22:%22water%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:%5B%7B%22color%22:%22%23515c6d%22%7D%5D%7D,%7B%22featureType%22:%22water%22,%22elementType%22:%22labels.text.stroke%22,%22stylers%22:%5B%7B%22color%22:%22%2317263c%22%7D%5D%7D%5D&polylines=%7B%22enc%22:%22wfjyH%60iVJuBG_@T%7BDAKBi@mAi@TiB%5BO%22,%22color%22:%22blue%22,%22weight%22:4%7D&polygons=%7B%22shape%22%3A%22qgjyHtgVb%40mHiBq%40cB_AgA%60H%5C%5Cn%40~Ap%40rBZ%22%2C%22color%22%3A%22rgba(255%2C%2020%2C%20147%2C%200.8)%22%2C%20%22fill_color%22%3A%20%22rgba(199%2C%2021%2C%20133%2C%200.3)%22%7D'>
</p>

Make sure to not combine too many parameters to avoid URL exceeding max length.

**You're all set!**
