Azure Maps - How to put a map line layer into edit mode?
I create a line layer and add it to the map.
But I then need to put this line layer into edit mode the user can stretch and manipulate the line, or whatever shape that I had added to the map.
The only reference I could find in MS Docs is how to put a 'shape' into edit mode, but this does not seem to be relevant and after trying their example, nothing works for me.
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'blue',
strokeWidth: 5
}));
The code above creates the line, renders it to the map, but when clicking/hovering over the line I can't select it to edit it, really need some help with the missing code to do this. thanks
I think you need to use the drawing module for that. It allows you to create a DrawingManager to edit a shape by setting the mode to edit-geometry.
I reworked a bit your example with the LineString to put it automatically on edit when the map is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AzureMaps</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
type="text/css" />
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css"
type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<script type='text/javascript'>
function GetMap() {
//Initialize a map instance.
const map = new atlas.Map('myMap', {
view: 'Auto',
center: [-73.972340, 40.743270],
zoom: 13,
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<enter-your-subscription-key>'
}
});
map.events.add('ready', () => {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
const lineString = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);
//Create a line and add it to the data source.
dataSource.add(lineString);
const lineStringShape = dataSource.getShapes()[0];
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'blue',
strokeWidth: 5
}));
var drawingManager = new atlas.drawing.DrawingManager(map, {
mode: 'edit-geometry'
});
drawingManager.edit(lineStringShape);
});
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>
Important thing is, you need to reference the atlas-drawing scripts and styles :
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css"
type="text/css" />
You can find more information on the Drawing Manager here.
Edit - Change only color and width
If you want to change only the strokeColor and the strokeWidth of your line string, you don't actually need the drawing manager for that. I would recommend to set expressions on the strokeColor and strokeWidth of your line layer to read the values from the properties of each shape.
The following example displays two line strings with different width and colors :
//Initialize a map instance.
const map = new atlas.Map('myMap', {
view: 'Auto',
center: [-73.972340, 40.743270],
zoom: 13,
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<enter-your-subscription-key>'
}
});
map.events.add('ready', () => {
//Create a data source and add it to the map.
const dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
const firstLineString = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);
const secondLineString = new atlas.data.LineString([[-73.972340, 40.733270], [-74.004420, 40.746800]]);
//Create a line and add it to the data source.
dataSource.add(firstLineString);
dataSource.add(secondLineString);
//Add properties on the shapes
const shapes = dataSource.getShapes()
const firstLineStringShape = shapes[0];
firstLineStringShape.addProperty('color', '#ed5a10');
firstLineStringShape.addProperty('strokeWidth', 10);
const secondLineStringShape = shapes[1];
secondLineStringShape.addProperty('color', '#0e41ea');
secondLineStringShape.addProperty('strokeWidth', 5);
//Create a line layer to render the line to the map.
//strokeColor and strokeWidth are defined on the properties of each line string
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: ['get', 'color'],
strokeWidth: ['get', 'strokeWidth']
}));
});
It is still done when the map is ready in this example for convenience, but you can set the properties of a shape whenever you need to update it using either addProperty if your property was never set, or a combination of getProperties and setProperties.
You can find more information on the data driven expressions here : https://learn.microsoft.com/en-us/azure/azure-maps/data-driven-style-expressions-web-sdk