CDN Installation
Add a fully interactive map to any HTML page in minutes — no build step required.
Include the assets
Add the stylesheet in <head> and the script before </body>:
<link rel="stylesheet" href="https://cdn.geocerta.io/geocerta-map/v0.1.0/geocerta-map.css" />
<script src="https://cdn.geocerta.io/geocerta-map/v0.1.0/geocerta-map.umd.js"></script>The UMD bundle exposes the GeoCertaMap global. Instantiate with:
const map = new GeoCertaMap.GeoCertaMap({ /* config */ });Minimal example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Map</title>
<link rel="stylesheet" href="https://cdn.geocerta.io/geocerta-map/v0.1.0/geocerta-map.css" />
<style>
html, body { margin: 0; height: 100%; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.geocerta.io/geocerta-map/v0.1.0/geocerta-map.umd.js"></script>
<script>
const map = new GeoCertaMap.GeoCertaMap({
container: '#map',
center: [-0.118, 51.509],
zoom: 12,
toolbar: {
modes: ['polygon', 'select'],
position: 'top-right',
},
onDrawChange: (geometry) => {
// fires on every change — geometry is null when nothing is drawn
console.log(geometry);
},
});
</script>
</body>
</html>
onDrawChangeis the primary event to watch. It fires every time the drawn geometry changes and receives the current GeoJSON geometry (ornullwhen the canvas is empty). See Overview for the full configuration and API reference.
For a live runnable demo with an event log, see Interactive Demo.