Mappls MapSnapshot¶

Introduction¶

The mappls mapSnapshot allows you to capture an image of the current map. The snapshot can includes watermarks of Mappls or MapmyIndia depending on the snapshot size, and can be downloaded directly as an image. This functionality is typically useful for generating static map images or sharing a fixed view of the map in your application.

Document Version History¶

Version	Last Updated	Author	Remarks
1.0	7 Dec 2024	MapmyIndia API Team (PK)	Initial Commit

Getting Started¶

Steps for Using mappls.mapSnapshot¶

Load the Map SDK: First, you need to load the Map SDK script in your HTML document. This is necessary for accessing the map and its associated methods.

<script src="https://sdk.mappls.com/map/sdk/web?v=3.0&access_token=<Static Key>&layer=vector&callback=initMap1&mapsnapshot" defer async></script>

The callback parameter (initMap1 in this case) is the function that will be triggered once the map SDK is successfully loaded.
- The layer parameter specifies the map layer. Here, it's set to a vector.
- The v=3.0 specifies the version of the Map SDK.
- The &mapsnapshot specifies that you capture an image of the current map.

Initialize the Map with mapSnapshot¶

After loading the Map SDK, initialize your map object in the initMap1 function. This will create a map instance that you can later use to capture the snapshot.

Code Snippet:¶

function initMap1() {
    const map = new mappls.Map('map-container', {
        center: [27.634320502688186, 77.21964825705418], // Center coordinates
        zoom: 10 
    });

    // Now you can call mapSnapshot function after initializing the map
    captureSnapshot(map);
}

//Capture the Snapshot: 
//To capture the snapshot, call the mappls.mapSnapshot method. Pass the map instance and configuration options like imageWidth, imageHeight, etc. 


function captureSnapshot(map) {
    mappls.mapSnapshot({
        map: map,  // Required: Your map instance
        imageWidth: 150, // Optional: Width of the image (default 200)
        imageHeight: 150, // Optional: Height of the image (default 200)
        Optional: Specify a custom image type (e.g., 'jpeg', default is 'png')
        imageType: 'jpeg', 
        imagePlaceId: 'imagePlaceId' // Optional: ID of an element to show the image in
       centerCoordinate:[27.634320502688186, 77.21964825705418], // optional
    }, function(imageUrl) {
        // Callback function that gets triggered once the snapshot is created
        console.log('Snapshot created with watermark!',imageUrl.data);
        // You can use imageUrl.data to display or save the image
    });
}

Explanation of Parameters:¶

map: Required – The map instance that you want to capture.
imageWidth: Optional – The width of the generated image in pixels (default: 200).
imageHeight: Optional – The height of the generated image in pixels (default: 200).
imageType: Optional – The type of image to be generated. You can specify 'jpeg' or 'png'. If not provided, the default is 'png'.
centerCoordinate: Optional – The center coordinate of the map, used to specify a custom center point before capturing the snapshot.
imagePlaceId: Optional – The ID of an HTML element where the generated snapshot image will be inserted. If this is provided, the image will be displayed in the element specified by this ID.

Callback Function¶

The second parameter passed to mappls.mapSnapshot is a callback function. This function is called once the snapshot is successfully created. The function receives an imageUrl object, which contains the data field where the URL to the snapshot image is stored.

function(imageUrl) {
    // Handle the generated snapshot image URL
    console.log(imageUrl.data);  // Logs the URL of the generated image
}

Complete Sample Implementation¶

Example of Full Implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map Snapshot Example</title>
    <script src="https://sdk.mappls.com/map/sdk/web?v=3.0&access_token=<Static Key>&layer=vector&callback=initMap1&mapsnapshot" defer async></script>
</head>
<body>
    <div id="map-container" style="height: 500px; width: 100%"></div>
    <div id="imagePlaceId" style="height: 100px; width: 100px; clear:both;"></div>
    <script>
        function initMap1() {
            const map = new mappls.Map('map-container', {
                center: [27.634320502688186, 77.21964825705418],
                zoom: 10
            });
        setTimeout(() => { 
// Call the function to capture the snapshot
                captureSnapshot(map);
}, 1000);
        }

        function captureSnapshot(map) {
            mappls.mapSnapshot({
                map: map,
                imageWidth: 150,
                imageHeight: 150,
centerCoordinate: [27.634320502688186, 77.21964825705418], 
                imagePlaceId: 'imagePlaceId'
            }, function(imageUrl) {
                console.log('Snapshot created with watermark!', imageUrl.data);
                // You can use the imageUrl.data to display or download the image
            });
        }
    </script>
</body>
</html>

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!