Drawing
Drawing geometric elements on the map (point, line, polygon).
HTML Copy
<!DOCTYPE html>
<html>
<head>
<title>Drawing</title>
<script src="https://maps-api.planplus.rs/script/maplibre/maplibre-gl/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>
<link href="https://maps-api.planplus.rs/style/maplibre/maplibre-gl.css" rel="stylesheet" />
<script src="https://maps-api.planplus.rs/script/maplibre/maplibre-gl-draw.js"></script>
<link href="https://maps-api.planplus.rs/style/maplibre/maplibre-gl-draw.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="width: 500px; height: 500px;"></div>
<script>
// your license id
var lid = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
// map instance
var map = new maplibregl.Map({
container: 'map',
style: 'https://vt.planplus.rs/mapstyle/PPMapaStyle.json?lid=' + lid,
center: [20.424476, 44.813864 ],
zoom: 11
});
// instance draw plugin
var draw = new maplibregl.Draw({
// select which control buttons to add to the map.
controls: {
line_string: true,
circle: true,
polygon: true,
point: true,
trash: true,
combine_features: false,
uncombine_features: false
}
});
// add draw control to the map.
map.addControl(draw);
// events
map.on('draw.create', previewData);
map.on('draw.delete', previewData);
map.on('draw.update', previewData);
// add your logic here
function previewData() {
console.log(draw.getAll());
};
</script>
</body>
</html>
JSON Copy
{
"type": "FeatureCollection",
"features": []
}
For more information visit api reference page MapboxGL Draw