Documentation

Connect a website

Pick the tier that matches the site. All three run the same engine against the same master database, so nothing is ever copied and nothing drifts. If you would rather click than read, the embed builder writes any of these snippets for you and previews the result live.

0 · Register the site

In the admin → Websites → Connect a website. Give it a key, the categories it may show and its accent colour. That row is the whole integration on our side — no deploy here, ever.

Tier 1 · Iframe embed — no build step

For static sites, WordPress, a partner church, anything. Works today, on any stack.

<div data-kingdom-map data-site="lotw" data-height="620"></div>
<script async src="https://map.loveontheworld.com/embed.js"></script>

Or drop the iframe in directly:

<iframe
  src="https://map.loveontheworld.com/embed?site=lotw&types=outreach_group&globe=1&fill=1"
  style="width:100%;height:70vh;border:0"
  allow="geolocation"
  title="Kingdom Map"
></iframe>

Parameters: site types country city focus zoom globe terrain search filters legend panel upcoming verified accent theme fill.

Tier 2 · Hosted SDK — ten lines, any framework

The engine as a module, served from here. Your page owns the container and the surrounding design; the map itself is never duplicated into your bundle.

<div id="map" style="height:70vh"></div>
<script type="module">
  import { mount } from "https://map.loveontheworld.com/sdk/v1/kingdom-map.js";

  const map = await mount("#map", {
    siteKey: "lotw",
    categories: ["outreach_group", "evangelist"],
    globe: true,
    onSelect: (entity) => console.log(entity?.name),
  });
</script>

Tier 3 · React package — full control

import { KingdomMap } from "@lotw/map-react";

<KingdomMap
  siteKey="lotw"
  categories={["outreach_group", "evangelist"]}
  globe
/>

Or by preset, which is usually what you want:

<KingdomMap preset="EVENTS_ONLY" globe />
<KingdomMap preset="MISSIONS" globe />
<KingdomMap preset="PRAYER" globe />

And the data on its own, for directories and counters:

import { useMapEntities, useMapStats } from "@lotw/map-react";

const { entities } = useMapEntities({ types: ["outreach_group"], country: "Canada" });
const stats = useMapStats(["outreach_group"]);

Basemaps

A theme sets the basemap, how it is configured and the atmosphere around the globe, in one word. Every one of them keeps the base map quiet — no POIs, muted land, roads dimmed — so the Kingdom activity on top is the brightest thing on the screen.

mapTheme="lotw-global"   magenta activity on near-black earth (default)
mapTheme="evangelize"    the same map in gold
mapTheme="festival"      dusk light, warmer air
mapTheme="events"        green, road labels on — people have to get there
mapTheme="daylight"      for sites with a light design
mapTheme="satellite"     the actual ground
mapTheme="minimal"       the quietest base, for a partner's page

In an iframe: ?theme=satellite. Add ?controls=1 to let a visitor switch basemap, flip between the globe and a flat map, and copy a link to the exact view they are looking at.

The API

GET https://map.loveontheworld.com/api/map/entities?type=outreach_group
GET https://map.loveontheworld.com/api/map/entities?country=Canada&upcoming=1
GET https://map.loveontheworld.com/api/map/entities?near=43.25,-79.87&radius=50&sort=distance
GET https://map.loveontheworld.com/api/map/entities?bounds=-80.5,43.0,-79.0,43.6&format=geojson
GET https://map.loveontheworld.com/api/map/entities/{id-or-slug}
GET https://map.loveontheworld.com/api/v1/cities/hamilton
GET https://map.loveontheworld.com/api/v1/countries/Canada
GET https://map.loveontheworld.com/api/v1/coverage?country=Canada
GET https://map.loveontheworld.com/api/v1/activity
GET https://map.loveontheworld.com/api/v1/types
GET https://map.loveontheworld.com/api/v1/stats
GET https://map.loveontheworld.com/api/v1/revision
POST https://map.loveontheworld.com/api/v1/submissions

/api/map/* and /api/v1/* are the same handlers. Full contract: openapi.json.

What the API will never give you

Exact coordinates for a person, and street addresses for anything person-class. The database applies a precision floor per category and fuzzes or snaps the point before it reaches any route. Records carry approximate and accuracy_m — say so in your UI.

Scale

GeoJSON plus client clustering is the fastest option up to roughly 50,000 records. Past that, switch the source to vector tiles — already live at /api/v1/tiles/{z}/{x}/{y}.mvt — and nothing else changes. Viewport queries turn on automatically as soon as a result set exceeds one page.