Measure MapHelp
Measure Map openen

iFrame API

Toon een van je projecten als live kaart op je eigen website, in de eenheden, kaartstijl en het thema die bij je site passen.

Met de iFrame API zet je de kaart van een project op je eigen webpagina. Bezoekers zien de satellietkaart met je metingen en kunnen erover bewegen, zonder account en zonder je site te verlaten. Jij kiest het project, de eenheden, de kaartstijl en het kleurenthema.

Voordat je begint#

  • Een livesleutel met toegang Ingesloten kaarten. Zie API-sleutels.
  • Een project dat bezoekers mogen zien: van jou of van een ander account, gedeeld als Alleen lezen of Openbaar. Een Privé project verschijnt alleen als het van een ander account is en de eigenaar jou heeft geautoriseerd (zie privéprojecten van klanten); je eigen privéprojecten verschijnen nooit. Zie welke projecten kunnen worden ingesloten.
  • Eventueel websitebeperkingen op de sleutel, zodat de embed alleen op je eigen sites werkt. Zie API-sleutels.

De embedcode maken#

Ontwikkelaar > Een kaart insluiten maakt de code voor je met je livesleutel: kies het project, kies het thema, de eenheden, het kaarttype en de grootte, controleer de Livevoorbeeld en kopieer de Embedcode. Als het project privé is, zegt het onderdeel dat en biedt het Op alleen lezen zetten aan. Zie de embedcode ophalen voor elke stap.

Een kaart insluiten met een gekozen project en de live voorvertoning

De code bevat je sleutel, dus hij blijft werken tot je de sleutel vervangt. Het onderdeel waarschuwt je als de sleutel meer kan dan Ingesloten kaarten, omdat iedereen hem in de broncode van je pagina kan lezen, en als de sleutel geen websitebeperkingen heeft. Alleen de Livevoorbeeld gebruikt een kortlevend token. Zie sleutel of token.

Het embedadres#

Een embed is een <iframe> waarvan het adres begint met https://app.measuremaponline.com/iframe_api, gevolgd door deze parameters:

Parameter Nodig Waarden
pid verplicht De ID van het project: het deel na /p/ in het adres van het project in de app. De eigenaar kan hem kopiëren onderaan het overzicht van het project, en klikken op de naam van het project in een ingesloten kaart kopieert hem ook.
key key of token Je API-sleutel.
token key of token Een token van je server (zie hieronder).
ms optioneel Eenheden: metric of imperial. Zonder deze parameter zien bezoekers in de Verenigde Staten imperiale eenheden en alle anderen metrische.
maptype optioneel satellite (standaard), map, hybrid of terrain.
theme optioneel auto (standaard: volgt de eigen systeeminstelling van de bezoeker), light of dark.

Een minimaal voorbeeld#

<iframe src="https://app.measuremaponline.com/iframe_api?pid=YOUR_PROJECT_ID&key=YOUR_API_KEY&maptype=satellite&theme=auto"
  title="YOUR_PROJECT_NAME" width="500" height="500" style="border:0" allow="fullscreen"></iframe>

Vervang YOUR_PROJECT_ID, YOUR_API_KEY en YOUR_PROJECT_NAME (schermlezers lezen de title voor) en pas de breedte en hoogte aan je pagina aan.

De embedcode met de kopieerknop

Sleutel of token#

Met key, zoals in de code die het onderdeel Een kaart insluiten je geeft, blijft de embed werken zolang de sleutel werkt, op de websites die de beperkingen ervan toestaan. Je sleutel is dan zichtbaar in de broncode van je pagina, dus:

  • gebruik een sleutel met alleen toegang Ingesloten kaarten;
  • beperk hem tot je eigen websites;
  • werk je pagina's bij als je de sleutel vervangt, binnen de 24 uur dat de oude sleutel blijft werken (een sleutel van voor de toegangsinstellingen houdt de datum die je is gegeven).

Met token blijft de sleutel op je server. Dat past bij embeds die je eigen server voor elk bezoek in de pagina schrijft: voordat de pagina wordt getoond, vraagt hij de REST API om een token en zet die in het adres van de iframe:

  • POST https://api.measuremaponline.com/api/v2/auth/iframe/token, met je sleutel in de Authorization-header, geeft een token terug dat 60 minuten werkt;
  • POST https://api.measuremaponline.com/api/v2/auth/token doet hetzelfde en accepteert een duration in seconden, tot 24 uur. Het antwoord zegt wanneer het token verloopt.

Je account kan tot 600 tokens per uur krijgen. Gebruik een livesleutel: embeds tonen alleen liveprojecten, dus een token dat met een sandbox-sleutel is gemaakt, opent geen kaart. Zie de API-referentie.

Wat bezoekers kunnen doen#

Bezoekers kunnen de kaart verschuiven en inzoomen, de metingen van je vormen lezen en de opmerkingen van het project lezen. Ze kunnen opmerkingen toevoegen als het project iedereen laat reageren, en klikken op de naam van het project kopieert de ID. Verder kunnen ze niets wijzigen: bewerken staat uit in een embed, welk toegangsniveau het project ook heeft. De enige uitzondering is een Open Guest-project in het Open Guest-abonnement, waar bezoekers zelf meten.

Als de kaart niet verschijnt#

In de meeste gevallen toont de kaart een bericht met de reden: zie als de kaart een bericht toont. Controleer, in deze volgorde:

  • Het adres heeft een token dat is verlopen. Tokens gelden 60 minuten, tenzij je server om langer vroeg. Kopieer de code opnieuw uit Een kaart insluiten, dat je sleutel gebruikt, of laat je server voor elk bezoek een nieuw token ophalen (zie hierboven).
  • Het project is privé. Als het van jou is, zet het dan op Alleen lezen of Openbaar, of druk op Op alleen lezen zetten in Een kaart insluiten. Als het van een klant is, kan die je autoriseren vanuit de kaart, of je kunt het vragen in Privéprojecten.
  • Het abonnement van het project is beëindigd: dat van de eigenaar, of bij een project van een organisatie dat van de organisatie. Het verschijnt weer zodra het abonnement is verlengd.
  • De website is niet toegestaan. Als de sleutel websitebeperkingen heeft, moet de pagina die de embed toont op een ervan staan. Sommige browsers en sites verbergen op welke pagina een embed staat; met beperkingen wordt zo'n embed geweigerd.
  • De sleutel is vervangen. Een oude sleutel stopt 24 uur nadat er een nieuwe is gemaakt, of meteen als hij is ingetrokken.
  • De sleutel is een sandbox-sleutel. Embeds werken alleen met livesleutels en liveprojecten.
  • Het abonnement is niet actief, of de API-toegang is opgeschort: het onderdeel API-sleutels zegt dat.

Hulp nodig?

Schrijf naar ons supportteam en vertel wat je probeerde te doen. Screenshots helpen.

Mail de support