Tutorial: Overlay Custom Data

Learn how to add your own markers, polygons, and GeoJSON data on top of Geolocarta aerial imagery.

Adding Markers

// Add a marker at a specific location
const marker = L.marker([-27.4698, 153.0251])
  .addTo(map)
  .bindPopup('<strong>Site A</strong><br>Inspection scheduled');

Adding Polygons

// Draw a custom polygon (e.g. a building footprint)
const building = L.polygon([
  [-27.4695, 153.0245],
  [-27.4695, 153.0255],
  [-27.4705, 153.0255],
  [-27.4705, 153.0245]
], {
  color: '#1c6443',
  weight: 2,
  fillColor: '#1c6443',
  fillOpacity: 0.2
}).addTo(map);

building.bindPopup('Building footprint — 245 m²');

Loading GeoJSON Files

// Load a GeoJSON file with custom styling
fetch('/data/sites.geojson')
  .then(res => res.json())
  .then(data => {
    L.geoJSON(data, {
      style: feature => ({
        color: feature.properties.status === 'active' ? '#1c6443' : '#9ca3af',
        weight: 2,
        fillOpacity: 0.15
      }),
      onEachFeature: (feature, layer) => {
        layer.bindPopup(`<strong>${feature.properties.name}</strong>`);
      }
    }).addTo(map);
  });

Combining with Cadastral Data

Overlay your custom data alongside Geolocarta cadastral boundaries for context — see the First Map tutorial for the base setup.