When running the plugin in a web environment on a mobile device, the following errors occur when opening any map for the first time:

main.dart.js:3055 Uncaught PlatformException(unregistered_view_type, A HtmlElementView widget is trying to create a platform view with an unregistered type: <osm_web_plugin_0>., If you are the author of the PlatformView, make sure `registerViewFactory` is invoked., null)

and (probably happening due to the first error):

main.dart.js:3055 Uncaught TypeError: Cannot read properties of null (reading 'firstChild')
    at getIframe (map.js:216:58)
    at setUpMap (map.js:205:22)
    at main.dart.js:83168:34
    at aui.a (main.dart.js:4358:62)
    at aui.$2 (main.dart.js:35754:14)
    at Object.M (main.dart.js:4344:10)
    at vK.ago (main.dart.js:83200:10)
    at vK.pj (main.dart.js:83165:21)
    at main.dart.js:82873:14
    at aui.a (main.dart.js:4358:62)

I also got the following error when using the HTML web renderer instead of canvaskit:

Unsupported operation: toImage is not supported on the Web

Thanks for a response in advance 😄

Jul 17 '23 13:07 derklaro

I tried, you're right there is issue to render the map on the web in mobile I will check why this happen because in my example the main map not visible but when we open in dialog it works I need to check the cause and see maybe flutter made changes how register a plugins in web

Jul 19 '23 22:07 liodali

try to use this command to run it on web mobile : flutter run --web-hostname ADRIP --web-port 8080 --web-renderer canvaskit --debug -d chrome

Jul 19 '23 23:07 liodali

I tried switching to canvaskit rendering, this seems to resolve the issue.

Jul 20 '23 07:07 derklaro

did you try to make release build because I experienced wierd flicking behavior

Jul 20 '23 08:07 liodali

yes, I'm building with flutter build web --web-renderer canvaskit, I did not observe any flickering yet - neither on mobile nor on a desktop web browser.

However, I did sometimes see issues when opening the map page for the first time, the content did not get drawn to it. When going back and opening again everything works as expected.

If needed I can link the page so you can try it out yourself.

Jul 20 '23 09:07 derklaro

if possible provide any log error or more details about that page

Jul 20 '23 10:07 liodali

Browser error logs?

Jul 20 '23 10:07 derklaro

yep and code example if possible

Jul 20 '23 10:07 liodali

Console log (hope the screenshot is ok), the site is available at https://web.bahnup.de - just search a german train station and click on the map icon:

Code Example

class _StationPositionBodyState extends State<_StationPositionBody> with OSMMixinObserver {
  late MapController _mapController;

  @override
  void initState() {
    super.initState();
    _mapController = MapController.withPosition(
      initPosition: GeoPoint(
        latitude: widget.latitude,
        longitude: widget.longitude,
      ),
    );
    _mapController.addObserver(this);
  }

  @override
  void dispose() {
    super.dispose();
    _mapController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return OSMFlutter(
      controller: _mapController,
      initZoom: 16,
      minZoomLevel: 12,
      maxZoomLevel: 19,
      stepZoom: 1.0,
      showContributorBadgeForOSM: true,
      markerOption: MarkerOption(
        defaultMarker: MarkerIcon(
          icon: Icon(
            Icons.location_on,
            color: Colors.red,
            size: MediaQuery.of(context).size.height * 0.1,
          ),
        ),
      ),
    );
  }

  @override
  Future<void> mapIsReady(bool isReady) async {
    if (isReady) {
      await _mapController.addMarker(
        GeoPoint(
          latitude: widget.latitude,
          longitude: widget.longitude,
        ),
      );
    }
  }
}

Jul 20 '23 10:07 derklaro

thnx i will check why thats happen but i like your project and if you want we can collaborate more to improve this library and also your application feel free to request any feature wanted from our side

Jul 20 '23 10:07 liodali

I face same issue please fix fast

Error: PlatformException(unregistered_view_type, dart-sdk/lib/internal/js_dev_runtime/privat packages/flutter/src/services/message_codecs.dart 652:7 packages/flutter/src/services/platform_channel.dart 310:18 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 584:5 dart-sdk/lib/async/future_impl.dart 657:7 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.setDefaultIcon packages/flutter_osm_web/src/asset/map.js 50:38 packages/flutter_osm_web/src/mixin_web.dart 58:19 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 584:5 dart-sdk/lib/async/future_impl.dart 657:7 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.setUserLocationIconMarker packages/flutter_osm_web/src/asset/map.js 141:32 packages/flutter_osm_web/src/controller/web_osm dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 584:5 dart-sdk/lib/async/future_impl.dart 657:7 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.configInitZoomMap packages/flutter_osm_web/src/asset/map.js 91:38 packages/flutter_osm_web/src/mixin_web.dart 365:19 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart packages/flutter_osm_web/src/mixin_web.dart 359:32 packages/flutter_osm_web/src/controller/web_osm dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 584:5 dart-sdk/lib/async/future_impl.dart 657:7 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.initMapLocation packages/flutter_osm_web/src/asset/map.js 45:31 packages/flutter_osm_web/src/mixin_web.dart 24:35 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart packages/flutter_osm_web/src/mixin_web.dart 23:31 packages/flutter_osm_web/src/controller/web_osm dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 448:9 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.setDefaultIcon packages/flutter_osm_web/src/asset/map.js 50:38 packages/flutter_osm_web/src/mixin_web.dart 58:19 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 584:5 dart-sdk/lib/async/future_impl.dart 657:7 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.setUserLocationIconMarker packages/flutter_osm_web/src/asset/map.js 141:32 packages/flutter_osm_web/src/controller/web_osm dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 584:5 dart-sdk/lib/async/future_impl.dart 657:7 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.configInitZoomMap packages/flutter_osm_web/src/asset/map.js 91:38 packages/flutter_osm_web/src/mixin_web.dart 365:19 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart packages/flutter_osm_web/src/mixin_web.dart 359:32 packages/flutter_osm_web/src/controller/web_osm dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 584:5 dart-sdk/lib/async/future_impl.dart 657:7 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart TypeError: iframe.contentWindow.initMapLocation packages/flutter_osm_web/src/asset/map.js 45:31 packages/flutter_osm_web/src/mixin_web.dart 24:35 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart packages/flutter_osm_web/src/mixin_web.dart 23:31 packages/flutter_osm_web/src/controller/web_osm dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart dart-sdk/lib/async/zone.dart 1661:54 dart-sdk/lib/async/future_impl.dart 147:18 dart-sdk/lib/async/future_impl.dart 784:44 dart-sdk/lib/async/future_impl.dart 813:13 dart-sdk/lib/async/future_impl.dart 448:9 dart-sdk/lib/async/schedule_microtask.dart 40:11 dart-sdk/lib/async/schedule_microtask.dart 49:5 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart SyntaxError: Identifier 'OSMJS' has already A HtmlElementView widget is trying to create a platform view with an unregistered type: <osm_web_plugin_4>., If you are the author of the PlatformView, make sure registerViewFactory is invoked., null) e/ddc_runtime/errors.dart 288:49 throw decodeEnvelope _invokeMethod 45:50 runUnary handleValue handleValueCallback _propagateToListeners [_completeWithValue] callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function setDefaultIcon changeHomeIconMarker 45:50 runUnary handleValue handleValueCallback _propagateToListeners [_completeWithValue] callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function setUserLocationIconMarker _controller.dart 362:15 customUserLocationMarker 45:50 runUnary handleValue handleValueCallback _propagateToListeners [_completeWithValue] callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function configZoom configureZoomMap 84:54 runBody 123:5 _async configureZoomMap _controller.dart 195:11 initPositionMap 45:50 runUnary handleValue handleValueCallback _propagateToListeners [_completeWithValue] callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function initMapLocation initLocationMap 84:54 runBody 123:5 _async initLocationMap _controller.dart 207:11 initPositionMap 45:50 runUnary handleValue handleValueCallback _propagateToListeners callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function setDefaultIcon changeHomeIconMarker 45:50 runUnary handleValue handleValueCallback _propagateToListeners [_completeWithValue] callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function setUserLocationIconMarker _controller.dart 362:15 customUserLocationMarker 45:50 runUnary handleValue handleValueCallback _propagateToListeners [_completeWithValue] callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function configZoom configureZoomMap 84:54 runBody 123:5 _async configureZoomMap _controller.dart 195:11 initPositionMap 45:50 runUnary handleValue handleValueCallback _propagateToListeners [_completeWithValue] callback _microtaskLoop _startMicrotaskLoop 177:15 is not a function initMapLocation initLocationMap 84:54 runBody 123:5 _async initLocationMap _controller.dart 207:11 initPositionMap 45:50 runUnary handleValue handleValueCallback _propagateToListeners callback _microtaskLoop _startMicrotaskLoop 177:15 been declared

======== Exception caught by scheduler library ===================================================== The following assertion was thrown during a scheduler callback: Assertion failed: "Cannot render platform views: 5. These views have not been created, or they have been deleted."

When the exception was thrown, this was the stack: dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49 throw lib/_engine/engine/canvaskit/embedded_views.dart 523:9 submitFrame lib/_engine/engine/canvaskit/rasterizer.dart 36:33 draw lib/_engine/engine/canvaskit/renderer.dart 365:16 renderScene lib/_engine/engine/platform_dispatcher.dart 690:14 render lib/ui/window.dart 100:50 render packages/flutter/src/rendering/view.dart 237:13 compositeFrame packages/flutter/src/rendering/binding.dart 496:18 drawFrame packages/flutter/src/widgets/binding.dart 905:13 drawFrame packages/flutter/src/rendering/binding.dart 358:5 [_handlePersistentFrameCallback] packages/flutter/src/scheduler/binding.dart 1284:15 [_invokeFrameCallback] packages/flutter/src/scheduler/binding.dart 1214:9 handleDrawFrame packages/flutter/src/scheduler/binding.dart 939:7 dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback

Jul 22 '23 09:07 SauravSCC

I need more information about your use case try to use canvaskit when building for web

Jul 22 '23 10:07 liodali

Hello

i use flutter run -d chrome --web-renderer canvaskit this command then face issue

TypeError: Cannot read properties of null (reading 'firstChild') packages/flutter_osm_web/src/asset/map.js 216:58 getIframe packages/flutter_osm_web/src/asset/map.js 205:22 setUpMap packages/flutter_osm_web/src/controller/web_osm_controller.dart 90:13 initPositionMap dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async packages/flutter_osm_web/src/controller/web_osm_controller.dart 86:31 initPositionMap packages/flutter_osm_interface/src/map_controller/base_map_controller.dart 50:31 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async packages/flutter_osm_interface/src/map_controller/base_map_controller.dart 49:50 dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback TypeError: Cannot read properties of null (reading 'firstChild') packages/flutter_osm_web/src/asset/map.js 216:58 getIframe packages/flutter_osm_web/src/asset/map.js 205:22 setUpMap packages/flutter_osm_web/src/controller/web_osm_controller.dart 90:13 initPositionMap dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async packages/flutter_osm_web/src/controller/web_osm_controller.dart 86:31 initPositionMap packages/flutter_osm_interface/src/map_controller/base_map_controller.dart 50:31 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async packages/flutter_osm_interface/src/map_controller/base_map_controller.dart 49:50 dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback TypeError: Cannot read properties of null (reading 'firstChild') packages/flutter_osm_web/src/asset/map.js 216:58 getIframe packages/flutter_osm_web/src/asset/map.js 205:22 setUpMap packages/flutter_osm_web/src/controller/web_osm_controller.dart 90:13 initPositionMap dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async packages/flutter_osm_web/src/controller/web_osm_controller.dart 86:31 initPositionMap packages/flutter_osm_interface/src/map_controller/base_map_controller.dart 50:31 dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async packages/flutter_osm_interface/src/map_controller/base_map_controller.dart 49:50 dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19

On Sat, 22 Jul 2023 at 16:18, hamza mohamed ali @.***> wrote:

I need more information about your use case try to use canvaskit when building for web

— Reply to this email directly, view it on GitHub https://github.com/liodali/osm_flutter/issues/426#issuecomment-1646555584, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYOEMFXAAZLXLSR4UEQZME3XROVY5ANCNFSM6AAAAAA2M6W4ZE . You are receiving this because you commented.Message ID: @.***>

Jul 22 '23 10:07 SauravSCC

Error when using in web on a mobile device