Custom Svg Image is Not Clear,how to validate azure maps key

Question

Hi everyone,

I have a few questions about Azure Maps and would appreciate some guidance.

Low-Quality SVG Images:

I'm using SVG images in my application with the Azure Maps SDK, but they appear faint and of poor quality on the map. While they're visible, the detail is lacking (see attached screenshot). Could you suggest any factors that might influence SVG image quality in Azure Maps, or any optimization techniques I could employ?

Azure Maps Key Validation:

I understand that an invalid Azure Maps key will result in a green map instead of displaying the actual data. However, I'm looking for a more programmatic approach to validate the key within my application. I couldn't find anything specific in the documentation (perhaps a property, method, or event that returns false or indicates an invalid key). Ideally, I'd like to achieve visual feedback similar to Bing Maps, where an error message appears on the map for an invalid key. Is there a recommended approach for in-app validation in Azure Maps?

Overlapping Marker Labels:

I'm encountering an issue where marker labels are overlapping each other, creating a cluttered appearance on the map (see attached screenshot). Are there any built-in mechanisms or strategies in the Azure Maps SDK to manage marker label placement and prevent overlap?

Screenshot (50)

Screenshot (51)

Any help will be appreciated thank you in advance.

Answer

In order for SVG images to be used with a symbol layer, they must be converted to an image. This is done by the map when you add the SVG to the image sprite. Scaling can be a cause for blurring, so make sure your SVG has a viewBox, width, and height value defined, otherwise the map will have generate a large image then scale it down which could cause blurriness.
Funny enough that error message in Bing Maps was often not desired by developers (especially if the map was offline). With Azure Maps you can set the map style to blank and point to a local map tile layer, and it doesn't need to connect to the Azure Maps services (and thus doesn't need authentication), so no error is displayed as majority of users don't want that. Also, most developers don't want their end users seeing that this error message. As a developer though, you can look in the browser console and see the auth error message easily. At the end of the day, Azure Maps is just another data layer in the map. The map control itself is actually a wrapper around MapLibre, an open-source map control (Azure Maps makes the API interface easier and streamlines common scenarios), so the map control doesn't need Azure Maps, and thus doesn't display an error message when it can't connect to Azure Maps (or any othe rservice, those appear in the dev console, where these types of erros should appear). That said, if you really want to be able to programmatically detect this, you can try making a call to the Azure Maps services using the fetch API. For example:

async function testAzureMapsKey(key) {
    //Try making a call to the attribution service, as copyright services don't incure charges.
    var r = await fetch('https://atlas.microsoft.com/map/attribution?api-version=2.1&tilesetId=microsoft.core.vector&zoom=1&bounds=-180,-85,180,85&subscription-key=' + key);

    if (r.ok) {
        return true;
    }

    if (r.status === 401) {
        console.error('Invalid Azure Maps key.');
    } else {
        console.error('Error connecting to Azure Maps.');
    }

    return false;
}

You can then use this like this:

var couldConnect = await testAzureMapsKey('NotAValidKey');

By default this does not happen. You must have changed some of the textOptions on the symbol layer as label collision detection is enabled by default. If you have them, remove the following textOptions or set them to false; allowOverlap, ignorePlacement

Share via

Custom Svg Image is Not Clear,how to validate azure maps key

1 answer

Your answer