Basic controls
Zoom control
Center Controls
Extent Controls
Imagery Date
Date:
Collection:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://app.vexcelgroup.com/map/v1/public/css/styles.css" type="text/css"/>
<style>
.map {
height: 800px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div class="col-md-3">
<h4>Zoom control</h4>
<div class="row g-3 align-items-center">
<div class="col-auto">
<input type="text" id="zoomId" placeholder="Zoom level">
</div>
<div class="col-auto">
<button onclick="setZoom()">Set zoom</button>
</div>
<div class="col-auto">
<button onclick="getZoom()">Get zoom</button>
</div>
</div>
</div>
<div class="col-md-3">
<h4>Center Controls</h4>
<div class="row g-3 align-items-center">
<div class="col-auto">
<input type="text" id="latitude" placeholder="Latitude">
</div>
<div class="col-auto">
<input type="text" id="longitude" placeholder="Longitude">
</div>
<div class="col-auto">
<button onclick="setLocation()">Set location</button>
</div>
<div class="col-auto">
<button onclick="getLocation()">Get location</button>
</div>
</div>
</div>
<div class="col-md-6">
<h4>Extent Controls</h4>
<div class="row g-3 align-items-center">
<div class="col-auto">
<input type="text" id="minX" placeholder="Min X">
</div>
<div class="col-auto">
<input type="text" id="minY" placeholder=Min Y>
</div>
<div class="col-auto">
<input type="text" id="maxX" placeholder="Max X">
</div>
<div class="col-auto">
<input type="text" id="maxY" placeholder="Max Y">
</div>
<div class="col-auto">
<button onclick="setExtent()">Set extent</button>
</div>
<div class="col-auto">
<button onclick="getExtent()">Get extent</button>
</div>
</div>
</div>
<div class="col-md-3">
<h4>Imagery Date</h4>
<div class="row g-3 align-items-center">
<div>Date: <div id="date"></div></div>
<div>Collection: <div id="collection"></div></div>
</div>
</div>
<script type="text/javascript" src="https://app.vexcelgroup.com/map/v1/public/Vexcel.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
const API_KEY = "YOUR_KEY";
const core = new Vexcel.Map({
target: "map",
token: API_KEY,
});
core.addListener(Vexcel.Events.MapEvents.CENTER_DATE_IMAGE, (e) => {
document.getElementById("date").innerHTML = e.date;
document.getElementById("collection").innerHTML = e.collection;
});
function setZoom() {
const zoom = document.getElementById("zoomId").value;
core.setZoom(zoom);
}
function getZoom() {
alert(`Zoom: ${core.getZoom()}`);
}
function setLocation() {
const latitude = document.getElementById("latitude").value;
const longitude = document.getElementById("longitude").value;
core.setLocation(new Vexcel.Geometry.Location(latitude, longitude));
}
function getLocation() {
alert(`Location: ${core.getLocation().toString()}`);
}
function setExtent() {
const minX = document.getElementById("minX").value;
const minY = document.getElementById("minY").value;
const maxX = document.getElementById("maxX").value;
const maxY = document.getElementById("maxY").value;
const extent = new Vexcel.Geometry.Extent([minX, minY, maxX, maxY]);
core.setViewExtent(extent);
}
function getExtent() {
alert(`Zoom: ${JSON.stringify(core.getViewExtent())}`);
}