Skip to main content

Tutorial: Your First Map

Build an interactive web map displaying Geolocarta aerial imagery with property boundaries overlaid.

Prerequisites​

  • A Geolocarta API key (sign up)
  • Basic HTML/JavaScript knowledge

Step 1: Create the HTML Page​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Geolocarta Map</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <style>
    #map { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="app.js"></script>
</body>
</html>

Step 2: Initialise the Map​

Create app.js:

const API_KEY = 'YOUR_API_KEY';

const map = L.map('map').setView([-27.4698, 153.0251], 16);

// OpenStreetMap base layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

Step 3: Add Aerial Imagery​

// Geolocarta aerial imagery overlay
const aerialLayer = L.tileLayer(
  `https://tiles.geolocarta.com/xyz/aerial/{z}/{x}/{y}.png?api_key=${API_KEY}`,
  { opacity: 0.85, attribution: '© Geolocarta' }
).addTo(map);

Step 4: Add Cadastral Boundaries​

// Fetch and display cadastral boundaries
fetch(`https://api.geolocarta.com/v1/cadastral/geojson?bounds=-27.475,153.02,-27.465,153.03&api_key=${API_KEY}`)
  .then(res => res.json())
  .then(data => {
    L.geoJSON(data, {
      style: {
        color: '#b3b637',
        weight: 2,
        fillColor: '#b3b637',
        fillOpacity: 0.1
      }
    }).addTo(map);
  });

Step 5: Add Layer Controls​

const baseMaps = { 'Street Map': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') };
const overlays = { 'Aerial Imagery': aerialLayer };

L.control.layers(baseMaps, overlays).addTo(map);

Result​

You now have an interactive map with aerial imagery and cadastral boundaries. From here you can:

Was this page helpful?