I would like to know if it is possible for Azure Maps to keep the LineStrings for all zoom levels.
Here an exemple : I have a line which will be invisible at zoom level <~ 12 and reappear at zoom level >~ 12
My source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate a snakeline - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.gif" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script>
var map, line;
//Create an array of points to define a path to animate along.
var path = [
[7.4204901, 43.7369253],
[7.420396249439936, 43.73687484884258]
];
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [7.42, 43.73],
zoom: 14,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
authType: '',
subscriptionKey: ''
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
line = new atlas.Shape(new atlas.data.LineString(path));
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add the data to the data source.
datasource.add(line);
//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'blue',
strokeWidth: 5,
}));
map.events.add('zoomend', () => console.log(map.getCamera().zoom));
});
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>
The short answer is no. In your scenario the linestring is small and when zoomed out <12, the linestring is less than 1 pixel in size and thus not rendered.
That said, in scenarios like this where you still want to see where the line is, a common technique is to represent the line in another way when zoomed out. A simple option is to use a bubble layer. This requires storing a single point for each line so that the render doesn't skip the lines point based on its length. This could be put into the same data source you use for your line, or added to a separate data source. Either way you will likely need to a little extra code to make sure the point is removed/edited if the line is removed/edited, assuming you plan on changing the data as during the user experience. If you are only going to load the data once and not make any changes, then that sync logic isn't needed. Here is the code for when you don't need to do any syncing of the data.
If you want to add support for syncing the point as the line data changes, here is some helper methods for this:
To get a little more advanced, you could limit the bubble layer so that it only renders when the line doesn't. I would only do this if you have a lot of lines (tens of thousands) and to optimize performance. If all your lines are around the same size you could just set this to display when zoom is less than 12. If you have lines of difference lengths, you could instead calculate the length, and then determine which zoom level the line should appear at, then store that as a property of the point, and use the filter option of the bubble layer to only render the points for lines that are likely not displayed. Here is a further extension of the code above that adds this logic:
Modify the
addLinefunction to capture the line length information, determine the min zoom level, and add to the point properties.//From there you can update the bubble layer to filter the rendered points based on the maps zoom level.
Another approach to render the data on a server as a tile layer where you can customize how the data is rendered in this scenario, but that is likely overkill.