Measure Map Online voor ontwikkelaars

Vanuit je eigen offerteformulier

Om de gegevens van de bezoeker voor hem in te vullen, vraagt je server met je livesleutel om een token en stuurt de bezoeker naar een nieuw gastproject. De sleutel komt nooit in de browser.

// Node.js 18+ with Express. Your API key stays on this server.
const express = require('express');
const app = express();

app.get('/start-measuring', async (req, res) => {
  // A token lets one visitor start one project in your account.
  const reply = await fetch('https://api.measuremaponline.com/api/v2/auth/token', {
    method: 'POST',
    headers: {'Authorization': process.env.MMO_API_KEY, 'Content-Type': 'application/json'},
    body: '{}',
  });
  if (!reply.ok) {
    return res.sendStatus(502);
  }
  const {token} = await reply.json();
  const name = String(req.query.name || '');
  const email = String(req.query.email || '');
  // URLSearchParams encodes every value: "Smith & Sons" arrives whole.
  const params = new URLSearchParams({
    token,
    name,                       // the project's name in your account
    description: email,         // any text you want to search by later
    guest_name: name,           // shown in the email you receive
    guest_email: email,
    // folder_id: 'FOLDER_ID',  // optional: the folder new projects go into
  });
  res.redirect('https://app.measuremaponline.com/app/projects/guest/new?' + params.toString());
});

app.listen(3000);

// On your page: call this from the button on your quote form.
function startMeasuring(name, email) {
  const params = new URLSearchParams({name, email});
  window.open('/start-measuring?' + params.toString(), '_blank', 'noopener');
}

De pagina Ontwikkelaar heeft deze code klaar voor je account, onder Gastlink > Open Guest API. Elk gastproject telt mee in je Open Guest-gebruik.

<iframe
  src="https://app.measuremaponline.com/iframe_api?pid=PROJECT_ID&key=YOUR_API_KEY&ms=metric&maptype=satellite&theme=auto"
  width="100%" height="500" style="border: 0"
  title="Metingen van de klus">
</iframe>

ms: metric of imperial · maptype: satellite, map, hybrid of terrain · theme: auto, light of dark