Styling the map layers using azure-maps-control NPM package

Ashleigh Sims 0

Hello,

So I'm using the azure-maps-control NPM package. I've ran into an issue where I'm trying to change the colour of all the land and all of the water. I've achieved this in the CDN version but not able to in the NPM package. The documentation is not clear, I can't see functions which I used in the CDN version.

Is this a possibility to do in the NPM package?

Thanks,

Ashleigh

AshokPeddakotla-MSFT 30,066 Reputation points

2024-03-21T11:15:03.7466667+00:00

Ashleigh Sims Greetings & Welcome to Microsoft Q&A forum!

Could you share the exact error message you are receiving and which documentation are you following?

Also, please provide more details about the specific functions you used in the CDN version and are unable to find in the NPM package?

Did you see Use the azure-maps-control npm package and Change the style of the map already?

Ashleigh Sims 0

Thanks for the response.

Well I'm not getting errors per se. For example...

I do this in the azure maps CDN version:

if(layers[i].id === "microsoft.bing.maps.baseFeature.generic_water_fill" || 
    layers[i].id === "microsoft.bing.maps.baseFeature.generic_water_pattern_fill") {
    map.map.setPaintProperty(layers[i].id, "fill-color", "#313AD4");
}


if(layers[i].id === "microsoft.bing.maps.baseFeature.vector_land") {
    map.map.setPaintProperty(layers[i].id, "fill-color", "#04015A");
}

This changes the fill colour for the land and sea because that is a requirement I have. I don't see anywhere I can use setPaintProperty() within the NPM package.

const map = new Map(this.mapContainer.nativeElement, {
  center: [0.000000, 51.509865],
  zoom: 3,
  view: 'Auto',
  style: 'night',
  showLogo: false,
  showFeedbackLink: false,
  showLabels: false,
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: '<Your Azure Maps Key>'
  }
});

// This does not exist on map
// map.setPaintLayer();

For documentation I have used:

https://video2.skills-academy.com/en-gb/azure/azure-maps/how-to-use-npm-package

https://video2.skills-academy.com/en-gb/javascript/api/azure-maps-control/?view=azure-maps-typescript-latest

Ashleigh Sims 0 Reputation points

2024-03-21T21:20:17.1533333+00:00

@rbrundritt I noticed you responded (notification via email) but the reply is not visible in this thread.
rbrundritt 16,456 Reputation points Microsoft Employee

2024-03-21T22:56:41.65+00:00

Didn't use email, used the site. Answer is lower on the page
rbrundritt 16,456 Reputation points Microsoft Employee

2024-03-21T22:57:36.0633333+00:00

Misunderstood. Yes responded. You should see the response lower on the page. It's an answer to the question rather than a comment.

1 answer

rbrundritt 16,456 Reputation points Microsoft Employee

2024-03-21T14:57:13.09+00:00
If you are using TypeScript via NPM, you won't see the map.map or the setPaintLayer function as those are undocumented features. The Azure Maps Web SDK wraps MapLibre and creates a more developer friendly APi interface for faster development of common scenarios. map.map is a reference to the wrapped MapLibre instance. TypeScript will not like you trying to access this, so you will need to add a comment above the code to ignore typescript's error. For example:

//@ts-ignore map.map.setPaintProperty(layers[i].id, "fill-color", "#04015A");
Please sign in to rate this answer.
Ashleigh Sims 0 Reputation points

2024-03-22T09:35:27.3033333+00:00

Thanks for the response @rbrundritt I checked out the property map within the Map class and it is private so it's not publicly accessible to use. From the looks of it the NPM (azure-web-control 3.1.2) package is structured is not going to be flexible enough for me to use it the way I can use the Web SDK. Unless you have any other ideas of how I could achieve something like the above.

rbrundritt 16,456 Reputation points Microsoft Employee

2024-03-22T15:57:00.52+00:00

Nothing is ever really private in JavaScript. If ignore doesn't work, try map._getMap()
Sign in to comment

Share via

Styling the map layers using azure-maps-control NPM package

1 answer