Skip to main content

Web Integration

Add Geolocarta aerial imagery and cadastral data to your web applications using popular mapping libraries.

With Mapbox GL JS​

<!DOCTYPE html>
<html>
<head>
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
  <div id="map" style="width:100%;height:500px;"></div>
  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v11',
      center: [153.0251, -27.4698],
      zoom: 15
    });

    map.on('load', () => {
      // Add Geolocarta aerial imagery
      map.addSource('gc-aerial', {
        type: 'raster',
        tiles: [
          'https://tiles.geolocarta.com/xyz/aerial/{z}/{x}/{y}.png?api_key=YOUR_KEY'
        ],
        tileSize: 256
      });
      map.addLayer({ id: 'aerial', type: 'raster', source: 'gc-aerial' });

      // Add cadastral boundaries
      map.addSource('gc-cadastral', {
        type: 'geojson',
        data: 'https://api.geolocarta.com/v1/cadastral/geojson?bounds=-27.48,153.02,-27.46,153.04&api_key=YOUR_KEY'
      });
      map.addLayer({
        id: 'cadastral-fill',
        type: 'fill',
        source: 'gc-cadastral',
        paint: { 'fill-color': '#b3b637', 'fill-opacity': 0.1 }
      });
      map.addLayer({
        id: 'cadastral-line',
        type: 'line',
        source: 'gc-cadastral',
        paint: { 'line-color': '#b3b637', 'line-width': 2 }
      });
    });
  </script>
</body>
</html>

With Leaflet​

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

// Base map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Geolocarta aerial overlay
L.tileLayer(
  'https://tiles.geolocarta.com/xyz/aerial/{z}/{x}/{y}.png?api_key=YOUR_KEY',
  { opacity: 0.8 }
).addTo(map);

With OpenLayers​

import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://tiles.geolocarta.com/xyz/aerial/{z}/{x}/{y}.png?api_key=YOUR_KEY'
      })
    })
  ]
});
CORS

All Geolocarta tile and API endpoints support CORS. No proxy is needed for browser-based requests when using access tokens.

Was this page helpful?