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?
This may be relevant - if I remove the GeographicSymbolSeries child component, leaving me with just a GeographicMap component, I don't get the error (no surprise, since the error was from the DataSource setter method), but I get a completely blank canvas where the map should be, nothing rendered at all. Is that to be expected? What is the minimum example that should just display an otherwise empty map of the world?