Consider using Azure Maps for the map control. It performs much better than leaflet an

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

It only requires a subion key if you also want to load the base maps from Azure

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Consider using Azure Maps for the map control about satellite-imagery-labeling-tool HOT 6 CLOSED

rbrundritt commented on May 23, 2024

Consider using Azure Maps for the map control

from satellite-imagery-labeling-tool.

Comments (6)

calebrob6 commented on May 23, 2024

Hey @rbrundritt, I believe the Azure Maps map control requires a subscription key (https://docs.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control), is that correct? Generally, we would like to keep this application as flexible as possible for users that don't necessarily have an Azure account.

from satellite-imagery-labeling-tool.

rbrundritt commented on May 23, 2024

It only requires a subscription key if you also want to load the base maps from Azure Maps. The Web SDK can be used without a subscription key. Here is how:

When loading the map, pass a dummy string as a key into the "authOptions", set the "style" option to "blank" (this removes the Azure Maps base maps), and set the "enableAccessibility" option to false (this disables the REST services used to describe the map location).
Add your data layers on top.

Here is a live sample: https://rbrundritt.azurewebsites.net/Demos/AzureMaps/FreeAzureMapsWebSDK.html

The performance of the Azure Maps Web SDK is huge compared to Leaflet. When developing Azure Maps we considered using Leaflet, but it is based on old web technology and way behind in terms of performance compared to nearly every map platform today.

Worth noting that anyone using OSM by any notable amount (i.e. production) is meant to host and serve the data themselves as per the terms of service of OSM servers. The cost of doing this is more than the cost of using Azure Maps (Azure Maps also has free monthly usage included). Also OSM doesn't meet Microsoft's GeoPol requirements internal link If you did use Azure Maps base maps, you could also reenable accessibility. Azure Maps is currently the most accessible web map control on the planet (lots of innovation around accessibility was done in it).

Microsoft also has Bing Maps which also has free usage limits as well. We have two map platforms at Microsoft, so seems odd for any Microsoft team to use anything other than one of those.

Also worth mentioning that there are free licensing options for both these platforms for education and research purposes.

from satellite-imagery-labeling-tool.

agrigoriev commented on May 23, 2024

@rbrundritt Is there a way to disable anti-aliasing in Azure maps? This is crucial for labelling software to be able to see pixels as is (especially for labelling small objects).

from satellite-imagery-labeling-tool.

rbrundritt commented on May 23, 2024

Anti-aliasing is disabled by default in the map control for performance reasons. So no need to explicitly disable it. It doesn't even look like the option to enable it has been exposed publicly.

That said, can you provide more details on what you are trying to achieve. A couple of interesting things about Azure Maps:

The base maps are made from vector tiles, so the tiles are rendered at run time, not on the server. This allows for the labels to be rendered at the same resolution as the screen the map is displayed on. Additionally, every element within the map is accessible and can be customized using undocumented methods at the moment. This means if you wanted to hide a certain type of label or change its style, that can done. This also means that if you wanted to be able to inspect individual items within the displayed map to get more details, you can do that easily. Here is a tool that does this: https://samples.azuremaps.com/?sample=inspect-features-under-the-mouse (click on an item to get more info)
The SymbolLayer (used for rendering labels and custom icons) has a "halo" text option. Perhaps this is what you might be thinking looks like anti-aliasing. Most, if not all, labels in the map have a halo around them with a contrasting color to assist with accessibility needs (ensure the label is readable regardless of background color of map). That said, if you want to experiment with disabling the halo, here is a code sample that does this:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8" />
    <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/css/atlas.min.css?api-version=2" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=2"></script>


    <script type='text/javascript'>
        var map, missingRoadLayer, missingRoadLayerOutline;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [101.517108, 3.182140],
                zoom: 15,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Optional, used for testing. Add a style control to the map.
                map.controls.add(new atlas.control.StyleControl({ mapStyles: 'all' }), {
                    position: 'top-right'
                });
            });

            //Monitor for when the map style changes.
            map.events.add('styledata', function () {

                //Loop through all layers in the map and remove halo from symbol layer text.
                var layers = map.map.getStyle().layers;

                for (var i = 0; i < layers.length; i++) {
                    if (layers[i].source === 'vectorTiles' && layers[i].type === 'symbol') {
                        map.map.setPaintProperty(layers[i].id, 'text-halo-width', 0);
                    }
                }
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;height:600px;"></div>
</body>
</html>

from satellite-imagery-labeling-tool.

rbrundritt commented on May 23, 2024

Also worth noting, if you want to get an image from the map, be sure to set the preserveDrawingBuffer map option to true when loading the map. https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.styleoptions?view=azure-maps-typescript-latest#azure-maps-control-atlas-styleoptions-preservedrawingbuffer

You can then get a PNG image of the map by calling map.getCanvas().toDataURL()

from satellite-imagery-labeling-tool.

rbrundritt commented on May 23, 2024

Closing as version 2 uses Azure Maps.

from satellite-imagery-labeling-tool.

Consider using Azure Maps for the map control about satellite-imagery-labeling-tool HOT 6 CLOSED

Comments (6)

Related Issues (17)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent