Quickstart

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.

Step 1: Get Your API Key

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 Key
YOUR_API_KEY
Your API key is designed to be used in the browser. You must restrict it to your domain(s) in the dashboard before deploying to production. Unrestricted keys are at risk of unauthorized usage.

Step 2: Make Your First Request

Fetch a CLU (Common Land Unit) vector tile for a location in central Kansas. This request returns a Mapbox Vector Tile (MVT) binary.

curl
curl "https://api.landmapmagic.com/v1/tiles/clu/14/3640/6350.mvt?key=YOUR_API_KEY" \
  --output tile.mvt
JavaScript
const response = await fetch(
  "https://api.landmapmagic.com/v1/tiles/clu/14/3640/6350.mvt?key=YOUR_API_KEY"
);
const data = await response.arrayBuffer();
console.log("Tile size:", data.byteLength, "bytes");
Python
import requests

response = requests.get(
    "https://api.landmapmagic.com/v1/tiles/clu/14/3640/6350.mvt",
    params={"key": "YOUR_API_KEY"}
)
print(f"Status: {response.status_code}, Size: {len(response.content)} bytes")
A successful response returns HTTP 200 with Content-Type: application/vnd.mapbox-vector-tile. Empty tiles (no data in the area) return HTTP 204 with no body.

Step 3: Render CLU Tiles on Google Maps with deck.gl

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.

HTML + JavaScript
<!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>
This example uses the deck.gl CDN build for simplicity. For production apps, install @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.

Next Steps

  • Explore all available tile layers: States, Counties, Townships, Sections, CLU, Parcels, SSURGO, and CDL.
  • Use the Search API to geocode locations and find specific parcels or CLU fields.
  • Use the Point Lookup API to query data at a specific latitude/longitude.
  • Check the Authentication docs to set up origin restrictions and manage multiple keys.