Loading documentation...
Get up and running with the Land Map Magic API in under 5 minutes. Follow these three steps to fetch your first tile and render it on a map.
Sign up or log in to your dashboard to generate an API key. Your key is used to authenticate all requests and track usage.
YOUR_API_KEYFetch a CLU (Common Land Unit) vector tile for a location in central Iowa. This request returns a Mapbox Vector Tile (MVT) binary.
curl "https://api.landmapmagic.com/v1/tiles/clu/14/4215/6082.mvt?key=YOUR_API_KEY" \
--output tile.mvtconst response = await fetch(
"https://api.landmapmagic.com/v1/tiles/clu/14/4215/6082.mvt?key=YOUR_API_KEY"
);
const data = await response.arrayBuffer();
console.log("Tile size:", data.byteLength, "bytes");import requests
response = requests.get(
"https://api.landmapmagic.com/v1/tiles/clu/14/4215/6082.mvt",
params={"key": "YOUR_API_KEY"}
)
print(f"Status: {response.status_code}, Size: {len(response.content)} bytes")Content-Type: application/vnd.mapbox-vector-tile. Empty tiles (no data in the area) return HTTP 204 with no body.Use deck.gl's MVTLayer as a Google Maps overlay to visualize CLU boundaries. Copy the full example below into an HTML file, replace YOUR_API_KEY and YOUR_GOOGLE_MAPS_KEY, and open it in a browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CLU Tiles on Google Maps</title>
<style>
html, body, #map { margin: 0; padding: 0; width: 100%; height: 100%; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_KEY&v=weekly"></script>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
const API_KEY = "YOUR_API_KEY";
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 41.9, lng: -93.5 },
zoom: 14,
mapTypeId: "satellite",
});
const deckOverlay = new deck.GoogleMapsOverlay({
layers: [
new deck.MVTLayer({
id: "clu-layer",
data: `https://api.landmapmagic.com/v1/tiles/clu/{z}/{x}/{y}.mvt?key=${API_KEY}`,
minZoom: 11,
maxZoom: 15,
getFillColor: [0, 200, 100, 80],
getLineColor: [0, 200, 100, 200],
getLineWidth: 1,
lineWidthMinPixels: 1,
pickable: true,
}),
],
});
deckOverlay.setMap(map);
// Optional: show attributes on click
deckOverlay.setProps({
onClick: (info) => {
if (info.object) {
console.log("CLU properties:", info.object.properties);
}
},
});
</script>
</body>
</html>@deck.gl/core, @deck.gl/layers, and @deck.gl/google-maps via npm and use a bundler. The MVTLayer automatically handles tile loading, caching, and zoom-level transitions.