map-get-shape-data.md

title	description	author	ms.author	ms.date	ms.topic	ms.service	ms.custom
Get data from shapes on a map | Microsoft Azure Maps	In this article learn, how to get shape data drawn on a map using the Microsoft Azure Maps Web SDK.	stevemunk	v-munksteve	09/04/2019	conceptual	azure-maps	devx-track-js

Get shape data

This article shows you how to get data of shapes that are drawn on the map. We use the drawingManager.getSource() function inside drawing manager. There are various scenarios when you want to extract geojson data of a drawn shape and use it elsewhere.

Get data from drawn shape

The following function gets the drawn shape's source data and outputs it to the screen.

function getDrawnShapes() {
    var source = drawingManager.getSource();

    document.getElementById('CodeOutput').value = JSON.stringify(source.toJson(), null, '    ');
}

Below is the complete running code sample, where you can draw a shape to test the functionality:

<iframe height="686" title="Get shape data" src="//codepen.io/azuremaps/embed/xxKgBVz/?height=265&theme-id=0&default-tab=result" frameborder='no' loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen Get shape data by Azure Maps (@azuremaps) on CodePen. </iframe>

Next steps

Learn how to use additional features of the drawing tools module:

[!div class="nextstepaction"] React to drawing events

[!div class="nextstepaction"] Interaction types and keyboard shortcuts

Learn more about the classes and methods used in this article:

[!div class="nextstepaction"] Map

[!div class="nextstepaction"] Drawing manager

[!div class="nextstepaction"] Drawing toolbar