Mapas estáticos
Um mapa em imagem, a partir de um único endereço: para confirmações de encomenda, recibos, e-mails e mensagens, onde um mapa interativo não chega.
Um único endereço dá uma imagem do mapa: coloque-o numa etiqueta <img>, num e-mail, num recibo em PDF ou numa mensagem de WhatsApp. O N-Ways desenha-a nos seus próprios servidores, a partir do mesmo mapa que o SDK Maps.
Criar uma
<img
width="600" height="300" alt="Mapa do endereço de entrega"
src="https://nways.ng/maps/v1/staticmap?center=6.6018,3.3515&zoom=15&size=600x300&scale=2&markers=color:green|6.6018,3.3515&key=A_SUA_CHAVE_API" />| Parâmetro | Descrição |
|---|---|
center, zoom | O centro (lat,lng) e o zoom (de 0 a 20). Omita ambos para enquadrar os marcadores e os traçados. |
size | WIDTHxHEIGHT em píxeis CSS, de 32 a 1 280 cada. Por omissão 640x400. |
scale | 2 para o dobro dos píxeis, para ecrãs de telemóvel. Por omissão 1. |
theme | light (por omissão) ou dark. |
format | png (por omissão) ou jpg. |
markers | Os estilos, depois os pontos, separados por |: color:red|label:A|6.60,3.35|6.45,3.39. Estilos: color (red, green, blue, orange, yellow, purple, black, white, gray, ou 0xRRGGBB), label (uma letra ou um algarismo), size (tiny, small, mid). Repita markers= para estilos diferentes; até 100 marcadores. |
path | Uma linha: os estilos, depois os pontos, ou uma polilinha codificada: color:0x1e6fe8|weight:5|6.60,3.35|6.52,3.37|6.45,3.39, ou …|enc:<polyline>. fillcolor preenche-a como uma área. Até 10 traçados. |
signature | Uma assinatura, para endereços usados fora do seu site. |
A imagem tem a menção OpenStreetMap no canto: não a corte. Cada imagem conta como uma chamada de mapa estático para a faturação; o mesmo endereço pedido de novo pouco depois é servido a partir da cache.
A partir de JavaScript
import { staticMapUrl } from '@nways/maps'
img.src = staticMapUrl({
key: 'A_SUA_CHAVE_API',
size: [600, 300],
scale: 2,
markers: [
{ at: { lat: 6.5965, lng: 3.3421 }, color: 'orange', label: 'P' },
{ at: { lat: 6.6018, lng: 3.3515 }, color: 'green', label: 'D' },
],
path: { points: routes[0].geometry.coordinates, color: '#1e6fe8', weight: 5 },
})Percursos longos dão endereços longos: mantenha um URL abaixo de cerca de 8 000 caracteres reduzindo o número de pontos da linha, ou use uma polilinha codificada.
Endereços assinados
Uma chave restrita ao seu site só funciona onde o navegador indica que o pedido vem do seu site. Os e-mails, os recibos e as mensagens não o fazem: assine, portanto, esses endereços no seu servidor. A assinatura prova que o endereço vem de si, e passa então a funcionar em todo o lado, sempre dentro das restrições de API, dos limites e do crédito da chave.
- Copie o segredo de assinatura dos endereços a partir da ficha da chave na consola de parceiro (os proprietários e programadores da sua organização veem-no). Guarde-o apenas no seu servidor. Renová-lo, ou regenerar a chave, invalida todas as assinaturas anteriores.
- Construa o endereço com a chave e depois assine o seu caminho e a sua consulta: HMAC-SHA256 com o segredo (descodificado de base64url), sobre o texto que vai de
/maps/v1/staticmap?até ao fim. - Acrescente
&signature=e o resultado em base64url, em último lugar.
import { createHmac } from 'node:crypto'
function signed(url, secret) {
const u = new URL(url)
const sig = createHmac('sha256', Buffer.from(secret, 'base64url')).update(u.pathname + u.search).digest('base64url')
return `${url}&signature=${sig}`
}
const url = signed('https://nways.ng/maps/v1/staticmap?center=6.6018,3.3515&zoom=15&size=600x300&key=A_SUA_CHAVE_API', process.env.NWAYS_SIGNING_SECRET)import base64
import hashlib
import hmac
import os
from urllib.parse import urlsplit
def signed(url: str, secret: str) -> str:
u = urlsplit(url)
key = base64.urlsafe_b64decode(secret + "=" * (-len(secret) % 4))
digest = hmac.new(key, f"{u.path}?{u.query}".encode(), hashlib.sha256).digest()
return url + "&signature=" + base64.urlsafe_b64encode(digest).decode().rstrip("=")
url = signed("https://nways.ng/maps/v1/staticmap?center=6.6018,3.3515&zoom=15&size=600x300&key=A_SUA_CHAVE_API", os.environ["NWAYS_SIGNING_SECRET"])Uma assinatura errada é recusada (403). Nunca assine endereços numa página web: o segredo ficaria exposto na página.