Sample Code

Leaflet sample for overlaying images from our API onto a basemap.

var map = L.map('map').setView([45.11, 10.8], 12); // Initial view

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19
}).addTo(map);
var apikey = "39553fb7-7f6f-4945-9b84-a4c8745bdbec";

$.getJSON("https://geocledian.com/agknow/api/v4/parcels/46218/vitality/sentinel2/3179236", {
    key: apikey
}, function(data) {
    console.debug(data);
    var raster = data["content"];
    var imgUrl = "https://geocledian.com/agknow/api/v4" + raster["png"] + "?key=" + apikey;
    console.debug(imgUrl);
    var bounds = raster["bounds"]; // Should be [[south, west], [north, east]]
    L.imageOverlay(imgUrl, bounds).addTo(map);
    map.fitBounds(bounds);
});

Mapbox GL sample for overlaying images from our API onto a basemap.

mapboxgl.accessToken = 'YOUR_MAPBOX_API_KEY'; // <-- Replace with your token

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-v9',
    center: [10.8, 45.11], // initial center
    zoom: 12
});

const apikey = "39553fb7-7f6f-4945-9b84-a4c8745bdbec";
const apiUrl = "https://geocledian.com/agknow/api/v4/parcels/46218/vitality/sentinel2/3179236";

$.getJSON(apiUrl, { key: apikey }, function(data) {
    const raster = data["content"];
    const imgUrl = "https://geocledian.com/agknow/api/v4" + raster["png"] + "?key=" + apikey;

    const bounds = raster["bounds"]; // [[south, west], [north, east]]
    const mapboxBounds = [
        [bounds[0][1], bounds[0][0]], // [west, south]
        [bounds[1][1], bounds[1][0]]  // [east, north]
    ];

    map.on('load', () => {
        map.addSource('image-overlay', {
            type: 'image',
            url: imgUrl,
            coordinates: [
                [mapboxBounds[0][0], mapboxBounds[1][1]], // top-left (west, north)
                [mapboxBounds[1][0], mapboxBounds[1][1]], // top-right
                [mapboxBounds[1][0], mapboxBounds[0][1]], // bottom-right
                [mapboxBounds[0][0], mapboxBounds[0][1]]  // bottom-left
            ]
        });

        map.addLayer({
            id: 'overlay-layer',
            type: 'raster',
            source: 'image-overlay',
            paint: {
                'raster-opacity': 0.7
            }
        });

        map.fitBounds(mapboxBounds, { padding: 20 });
    });
});

Google Maps API sample for overlaying images from our API onto a basemap.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 45.11, lng: 10.8 },
        zoom: 12
    });

    var apikey = "39553fb7-7f6f-4945-9b84-a4c8745bdbec";

    $.getJSON("https://geocledian.com/agknow/api/v4/parcels/46218/vitality/sentinel2/3179236", {
        key: apikey
    }, function(data) {
        console.debug(data);
        var raster = data["content"];
        var imgUrl = "https://geocledian.com/agknow/api/v4" + raster["png"] + "?key=" + apikey;
        console.debug(imgUrl);
        var bounds = raster["bounds"]; // Format: [[south, west], [north, east]]

        var overlayBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(bounds[0][0], bounds[0][1]), // SW
            new google.maps.LatLng(bounds[1][0], bounds[1][1])  // NE
        );

        var overlay = new google.maps.GroundOverlay(imgUrl, overlayBounds);
        overlay.setMap(map);
        map.fitBounds(overlayBounds);
    });
}

// Initialize map when page is loaded
window.onload = initMap;