Source: https://developers.woosmap.com/products/map-static-api/first-queries/

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

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

# Create your first static map



This guide shows how to construct a basic map image, add a marker, or drawings on top of your static map using a set of HTTP query parameters.  

## Display a Basic Map

Here’s the simplest way to display a static map in an HTML content:

```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" alt="Map of the London Eye surroundings" />
```

**Result:** A 600 × 400 pixels map centered on the London Eye surroundings, zoom level 15.  

<p align="center">
  <img alt="Basic Static Map" 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'>
</p>

## Add a Marker

You can add a single marker by including the marker parameter as a JSON object representing a coordinates for the location:

```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&markers={"lat":51.50350,"lng":-0.11864317}' alt='Map with marker' />
```

**Result:** A 600 × 400 pixels map with a Marker in the middlle.  

<p align="center">
  <img alt="Static Map with Marker" 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&markers={"lat":51.50350,"lng":-0.11864317}'>
</p>

## Add a Polygon

You can add a single polygon geometry by including the polygon 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)"}' alt='Map with a polygon' />
```

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

<p align="center">
  <img alt="Static Map with Polygon" 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)"}'>
</p>

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

## Add a Polyline

You can add a single polyline geometry 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}' 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*.  

<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}'>
</p>

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

**You're all set!**
