Hi, I'm trying to use the map control but hitting errors. After failing with my own code I tried to duplicate the code here. I created a blank component and copied the sample straight in, but I'm getting the same error I'm having with my own components. For reference, this is a WASM app running under dotnet 5. Here is the error I'm getting, from the browser console:
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Unable to set property 'DataSource' on object of type 'IgniteUI.Blazor.Controls.GeographicSymbolSeries'. The error was: Could not find 'igUnmarshalledDataSourceCreate' ('igUnmarshalledDataSourceCreate' was undefined). Error: Could not find 'igUnmarshalledDataSourceCreate' ('igUnmarshalledDataSourceCreate' was undefined). at https://localhost:44349/_framework/blazor.webassembly.js:1:1287 at Array.forEach (<anonymous>) at e.findFunction (https://localhost:44349/_framework/blazor.webassembly.js:1:1247) at Object.b [as findJSFunction] (https://localhost:44349/_framework/blazor.webassembly.js:1:2989) at Object.w [as invokeJSFromDotNet] (https://localhost:44349/_framework/blazor.webassembly.js:1:64415) at _mono_wasm_invoke_js_blazor (https://localhost:44349/_framework/dotnet.5.0.9.js:1:190800) at do_icall (<anonymous>:wasm-function[10596]:0x194e4e) at do_icall_wrapper (<anonymous>:wasm-function[3305]:0x79df9) at interp_exec_method (<anonymous>:wasm-function[2155]:0x44ad3) at interp_runtime_invoke (<anonymous>:wasm-function[7862]:0x12efff)
My component is copy and pasted directly from the first sample on the linked page. I'm using a licensed copy of IgniteUI Blazor, version 21.1.77, browsers tested in are Edge and Chrome. This is my index.html page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>EHS.Client</title> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="EHS.Client.styles.css" rel="stylesheet" /> <link href="manifest.json" rel="manifest" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> </head> <body> <div id="app">Loading...</div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_content/IgniteUI.Blazor/app.bundle.js"></script> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script> </body> </html>
Any ideas?
Is there a restriction using this in a PWA? I've placed the same component on a server side blazor app and it works fine, but my target app is a PWA. I'll put together a client side (but not PWA) site next, and test it there
Now I'm confused. Tested it for a new PWA app and it worked. Commented everything out of the index.html and Program.cs in my actual app that made it different from the fresh app and it still failed. At this point I was getting to the test page via a link on my home page. I found that if I went via the link it gave the error, but if I put the address directly in the address bar it would work, and that once it worked the link would also work. Started trying to map out what was happening to report here, but now it has started working every time. That's good news on the face of it, but it seems to have fixed itself without me making any change. This leaves me worried that the problem might return, or might manifest itself for a user despite working in development. Does the error I reported hint at anything that might be a problem?
Hello Kevin,
I cannot comment on why it wouldn't work in a PWA app. We test in Windows with Visual Studio and modern browsers only. I too cannot get the GeoMap running in .NET 5 WASM and I reached out to my team. If you can reproduce the issues please send me a sample and I'll investigate this for you.
eg.
GoeMapJsonData.zip
With the sample above, there appears to be an issue loading our stylesheets thus "container vertical" is necessary. You can work around this by showing the map setting a height eg. <div class="container vertical"> <div class="container vertical" style="height:500px"> <GeographicMap Height="100%" Width="100%" Zoomable="true"> <GeographicSymbolSeries DataSource="Data" MarkerType="MarkerType.Circle" LatitudeMemberPath="Lat" LongitudeMemberPath="Lon" MarkerBrush="LightGray" MarkerOutline="Black" /> </GeographicMap> </div></div>
Setting the following height in app.css allows the map to render without setting a strict height.#app { height: 100%;}