May 01, 2025

Customize static maps

Discover Static Map advanced capabilities

1. Add Multiple Markers
2. Add a Custom Marker
3. Add multiple Polygons
4. Add multiple Polylines
5. Set a custom style for your static map

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.

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"}' alt='Map with one custom marker' />

    

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

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 a polygon' />

    

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.

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 a polyline' />

    

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.

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

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.

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=YOUR_API_KEY&markers={%22lat%22:51.5036,%22lng%22:-0.1194,%22url%22:%22https://www.woosmap.com/images/marker-staticmap-8.png%22}&stylers=[{%22featureType%22:%22all%22,%22elementType%22:%22geometry%22,%22stylers%22:[{%22color%22:%22%23242f3e%22}]},{%22featureType%22:%22all%22,%22elementType%22:%22labels.text.stroke%22,%22stylers%22:[{%22color%22:%22%23242f3e%22}]},{%22featureType%22:%22all%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%23746855%22}]},{%22featureType%22:%22administrative.locality%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%23d59563%22}]},{%22featureType%22:%22poi%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%23d59563%22}]},{%22featureType%22:%22poi.park%22,%22elementType%22:%22geometry%22,%22stylers%22:[{%22color%22:%22%23326030%22}]},{%22featureType%22:%22poi.park%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%236b9a76%22}]},{%22featureType%22:%22road%22,%22elementType%22:%22geometry%22,%22stylers%22:[{%22color%22:%22%2338414e%22}]},{%22featureType%22:%22road%22,%22elementType%22:%22geometry.stroke%22,%22stylers%22:[{%22color%22:%22%23212a37%22}]},{%22featureType%22:%22road%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%239ca5b3%22}]},{%22featureType%22:%22road.highway%22,%22elementType%22:%22geometry%22,%22stylers%22:[{%22color%22:%22%23746855%22}]},{%22featureType%22:%22road.highway%22,%22elementType%22:%22geometry.stroke%22,%22stylers%22:[{%22color%22:%22%231f2835%22}]},{%22featureType%22:%22road.highway%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%23C38B5F%22}]},{%22featureType%22:%22transit%22,%22elementType%22:%22geometry%22,%22stylers%22:[{%22color%22:%22%232f3948%22}]},{%22featureType%22:%22transit.station%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%23d59563%22}]},{%22featureType%22:%22water%22,%22elementType%22:%22geometry%22,%22stylers%22:[{%22color%22:%22%2317263c%22}]},{%22featureType%22:%22water%22,%22elementType%22:%22labels.text.fill%22,%22stylers%22:[{%22color%22:%22%23515c6d%22}]},{%22featureType%22:%22water%22,%22elementType%22:%22labels.text.stroke%22,%22stylers%22:[{%22color%22:%22%2317263c%22}]}]&polylines={%22enc%22:%22wfjyH`iVJuBG_@T{DAKBi@mAi@TiB[O%22,%22color%22:%22blue%22,%22weight%22:4}&polygons={%22shape%22:%22qgjyHtgVb@mHiBq@cB_AgA`H\\n@~Ap@rBZ%22,%22color%22:%22rgba(255,%2020,%20147,%200.8)%22,%20%22fill_color%22:%20%22rgba(199,%2021,%20133,%200.3)%22}' alt='Map combining all parameters' />

    

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

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

You’re all set!

‹ Do your first static maps Quick Start ›

Was this article helpful?

Have more questions? Submit a request