Having the maps up-to-date to current Azure maps version

[Mihai196]

We were thinking of using this package in our web application, however it is not ideal that the package uses the 2020 maps edition, and I couldn't find a way to force it to use the 2023 maps, which look and behave a lot better.

I tried enforcing the dependency of react-azure-maps package to the latest azure-maps-control but that did not seem to do the trick. Do you think there might be a workaround to use react-azure-maps with the latest maps version? Or when do you plan having react-azure-maps depending on a newer version of Azure maps ideally the 2023 one?

[yulinscottkang]

You might want to try react-azure-maps@next which has azure-maps-control installed as a peerDependencies package. See MIGRATION.md for more details.

[Mihai196]

Saw this initially, but is the beta version recommended for production use?

[Mihai196]

Also with the suggestions from the Migration link and the preview installed from both packages I don't seem to obtain the same results. Do you have any idea what the problem would be? These are the installed packages inside package.json

The css was imported at the top of the React component which produced the same result as shown in the initial answer. However the result I'm getting seems to show that something might be missing from the new configuration

The updated Azure maps are being used however I see no drawn objects on the map and the map itself seems like it's missing a lot of data (I think I only see the buildings from what I can tell). I also get a Reference error inside the console, which I'm not sure is related or not, I think it might be but I don't know what to make of it.
I used NPM for the installation of both react-azure-maps and azure-maps-control.

[yulinscottkang]

Saw this initially, but is the beta version recommended for production use?

This is still in preview, however we're expecting a GA release of azure-maps-control v3 soon and react-azure-maps will follow after that.

The updated Azure maps are being used however I see no drawn objects on the map and the map itself seems like it's missing a lot of data (I think I only see the buildings from what I can tell).

Which type of the authentication method are you using? Do you see any 401 errors in the network tab?

I also get a Reference error inside the console, which I'm not sure is related or not, I think it might be but I don't know what to make of it.

Looks like there's a problem with your webpack config, make sure azure-maps-control is included in your js bundle.

[Mihai196]

I'm using the anonymous Authentication method, which worked smoothly for version 0.4.7 and produced this result.

After having the map work as expected with the 0.4.7 version I ran the suggested commands npm i react-azure-maps@1.0.0-beta.2 and afterwards npm install --save azure-maps-control@next and proceeded to add the styling import at the top of my component import "azure-maps-control/dist/atlas.min.css";

I don't get any unauthorized 401 errors in the network tab with the new package versions.

This is the authentication setup which also works as expected for version 0.4.7

const azureMapOptions: IAzureMapOptions = {
    authOptions: {
      authType: AuthenticationType.anonymous,
      clientId: configurationContent.clientIdMapsAccount,
      getToken: function (resolve, _reject, _map) {
        sewerObjectsMapStorage?.getToken().then((token) => resolve(token));
      },
    },
    center: sewerObjectsMapStorage.mapItems[0].mapCoordinates[0],
    zoom: 15,
    style: "terra",
    view: "Auto",
  };

This is my full dependencies setup inside package.json (not sure if you know about any problems regarding newer react versions which would cause this behavior)

"dependencies": {
    "@azure/msal-browser": "^2.34.0",
    "@azure/msal-react": "^1.5.4",
    "@cloudflare/util-http-poll": "^1.3.2",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@microsoft/signalr": "^5.0.17",
    "@mui/base": "5.0.0-alpha.123",
    "@mui/icons-material": "5.8.4",
    "@mui/material": "5.8.2",
    "@mui/private-theming": "5.8.6",
    "@mui/styled-engine": "5.8.7",
    "@mui/system": "5.8.7",
    "@mui/utils": "5.8.6",
    "@mui/x-data-grid": "^5.17.26",
    "@mui/x-date-pickers": "^5.0.20",
    "@tanker/file-ponyfill": "^2.32.2",
    "@types/common-tags": "^1.8.1",
    "@types/lodash": "^4.14.192",
    "@types/react-pdf": "^5.7.4",
    "@types/streamsaver": "^2.0.1",
    "axios": "^0.21.4",
    "azure-maps-control": "^3.0.0-preview.8",
    "concurrently": "^6.5.1",
    "date-fns": "^2.29.3",
    "formik": "^2.2.9",
    "immer": "^9.0.21",
    "json8-patch": "^1.0.6",
    "mobx": "^6.9.0",
    "mobx-react-lite": "^3.4.3",
    "mobx-state-tree": "^5.1.8",
    "mobx-utils": "^6.0.6",
    "msal": "^1.4.17",
    "nightwatch-xhr": "^0.4.7",
    "plotly.js": "^2.21.0",
    "pubsub-js": "^1.9.4",
    "query-string": "^7.1.3",
    "react": "^18.2.0",
    "react-app-polyfill": "^2.0.0",
    "react-async": "^10.0.1",
    "react-azure-maps": "^1.0.0-beta.2",
    "react-beautiful-dnd": "^13.1.1",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^11.7.1",
    "react-helmet": "^6.1.0",
    "react-pdf": "^5.7.2",
    "react-player": "^2.12.0",
    "react-plotly.js": "^2.6.0",
    "react-router-dom": "^5.3.4",
    "react-scripts": "^5.0.1",
    "sass": "^1.60.0",
    "screenfull": "^5.2.0",
    "serve": "^12.0.1",
    "srcdoc-polyfill": "^1.0.0",
    "streamsaver": "^2.0.5",
    "ts-sinon": "^2.0.2",
    "web-streams-polyfill": "^3.2.1"
  },

Regarding checking if azure-maps-control is included in the bundle, not sure how I would achieve that. If I used npm to install the packages as mentioned previously, why would azure-maps-control not be included in the bundle?

[yulinscottkang]

Can you capture and share a HAR trace?

This is my full dependencies setup inside package.json (not sure if you know about any problems regarding newer react versions which would cause this behavior)

The setup looks correct, react-azure-maps should work in react 18.2.0. I have another project using the same react version.

Did you get the Reference error before upgrading to react-azure-maps@1.0.0-beta.2? Can you trace the error log and find out which module is missing?

Regarding checking if azure-maps-control is included in the bundle, not sure how I would achieve that. If I used npm to install the packages as mentioned previously, why would azure-maps-control not be included in the bundle?

It depends on how webpack is configured in your project, sometime people will bundle 3rd party libraries into a separate vendor.js.

[Mihai196]

Can you capture and share a HAR trace?

This is the HAR trace (when loading the page with the map - hope it helps) localhost.zip

Did you get the Reference error before upgrading to react-azure-maps@1.0.0-beta.2? Can you trace the error log and find out which module is missing?

Nope, the reference error only started appearing after upgrading to react-azure-maps@1.0.0-beta.2 with "azure-maps-control": "^3.0.0-preview.8".

It depends on how webpack is configured in your project, sometime people will bundle 3rd party libraries into a separate vendor.js.

We don't have any special configuration of the webpack(we're not using a separate vendor.js), this seems to be the first time some of the added packages are not bundled properly. I tried looking up a bit and some issues mentioned that I should have @babel/runtime mentioned specifically inside package.json, but that did not seem to do the trick. I also tried a "clean" install of the packages by removing node_modules and the package.lock file, but again the same issue inside the console with the reference error.

We're not planning on using the beta/preview version since we also have a production environment, we thought about waiting for the official release when it comes. However it would be ideal if we could get this to work, just to make our life easier in the future when the "official" release will be available(since I would expect a similar problem incoming). Thank you for your prompt replies, let me know if you have any other ideas why this would not work as expected.

[yulinscottkang]

Thanks for sharing the HAR trace. I see that some of the most important vector tile requests are missing from the trace, and strangely, only buildingfootprint tile requests were made. The root cause is unknown at this moment. I'll need way to reproduce this issue to debug it further.

Can you share a minimum project setup and source code to reproduce the issue?

[danieloliveira117]

@Mihai196 @yulinscottkang I was able to reproduce this issue on a CRA app by changing the "browserslist" configuration to > 0.2%, not dead. (This is used by babel)

Which causes this:

If I change it to > 0.3%, it works correctly. (or add not android 4.4.3-4.4.4)

The difference is these browsers:

[yulinscottkang]

See @danieloliveira117's comment for a working solution.