Static Map

Generate static map images with custom markers, routes, and overlays.

Description

The Static Map API allows you to generate static map images with custom markers, routes, and overlays. You can customize the map style, add markers with custom icons, draw routes between locations, and overlay images on the map. This is useful for embedding maps in websites, applications, or reports where dynamic maps are not required. The static map images can be generated with different sizes, zoom levels, and map styles to suit your needs.

tip

When using that, just use our Enterprise Dashboard or guild API Key to create your API Key try for free!

Base URL

https://maptiles.openmap.vn/

Endpoint

• Center based:
  /styles/{style-id}/static/{lon},{lat},{zoom}[@{bearing}[,{pitch}]]/{width}x{height}[@2x].{format}
• Area based:
  /styles/{style-id}/static/{minx},{miny},{maxx},{maxy}/{width}x{height}[@2x].{format}
• Auto fit path:
  /styles/{style-id}/static/auto/{width}x{height}[@2x].{format}

Example

/styles/day-v1/static/105.78792,21.03284,20/[email protected]?marker=105.78792,21.03284|https://openmap.vn/statics/images/map/pin_map_dot.svg

Parameters

• All the static image endpoints additionally support following query parameters:

  • path - ((fill|stroke|width)\:[^\|]+\|)*(enc:.+|-?\d+(\.\d*)?,-?\d+(\.\d*)?(\|-?\d+(\.\d*)?,-?\d+(\.\d*)?)+)

    • comma-separated lng,lat, pipe-separated pairs

      • e.g. path=105.78815,21.03328|105.78792,21.03236

    • Google Encoded Polyline Format

      • e.g. path=enc:_ak_C}vtdSvDl@
      • If 'enc:' is used, the rest of the path parameter is considered to be part of the encoded polyline string -- do not specify the coordinate pairs.

    • With options (fill|stroke|width)

      • e.g. path=stroke:yellow|width:2|fill:green|105.78815,21.03328|105.78792,21.03236 or path=stroke:blue|width:1|fill:yellow|enc:_ak_C}vtdSvDl@

    • can be provided multiple times

  • latlng - indicates coordinates are in lat,lng order rather than the usual lng,lat for paths and markers

  • fill - default color to use as the fill (e.g. red, rgba(255,255,255,0.5), #0000ff) for all paths

  • stroke - default color of the path stroke for all paths

  • width - default width of the stroke for all paths

  • linecap - rendering style for the start and end points of all paths - see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap

  • linejoin - rendering style for joining successive segments of all paths when the direction changes - see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin

  • border - color of the optional border stroke for all paths ; the border is like a halo around the stroke

  • borderwidth - width of the border stroke (default 10% of stroke width) for all paths

  • marker - Marker in format lng,lat|iconPath|option|option|...

    • Will be rendered with the bottom center at the provided location

    • lng,lat and iconPath are mandatory and icons won't be rendered without them

    • iconPath is either a link to an image served via http(s) or a path to a file relative to the configured icon path

    • option must adhere to the format optionName:optionValue and supports the following names

      • scale - Factor to scale image by

        • e.g. 0.5 - Scales the image to half it's original size

      • offset - Image offset as positive or negative pixel value in format [offsetX],[offsetY]

        • scales with scale parameter since image placement is relative to it's size
        • e.g. 2,-4 - Image will be moved 2 pixel to the right and 4 pixel in the upwards direction from the provided location

    • e.g. 105.78815,21.03328|marker-icon.png|scale:0.5|offset:2,-4

    • can be provided multiple times

  • padding - "percentage" padding for fitted endpoints (area-based and path autofit)

    • value of 0.1 means "add 10% size to each side to make sure the area of interest is nicely visible"

  • maxzoom - Maximum zoom level (only for auto endpoint where zoom level is calculated and not provided)