Web implementation #223

andrea689 · 2020-02-12T16:48:39Z

I'm working on web implementation. This is next steps:

update gitignore

remove dart:ui for conflict in web

tobrun · 2020-02-15T09:51:30Z

@andrea689 cool seeing this move forward! Refs #26

- initPlatform - buildView - updateMapOptions - animateCamera - moveCamera - setTelemetryEnabled - getTelemetryEnabled - getVisibleRegion - setCameraTargetBounds - setMinMaxZoomPreference - setRotateGesturesEnabled - setScrollGesturesEnabled - setStyleString - setTiltGesturesEnabled - setTrackCameraPosition - setZoomGesturesEnabled add instruction in README for add accessToken in web platform

rpk98c · 2020-02-25T11:39:03Z

@andrea689 Great to see this being worked on. Let me know if need help

add setMapLanguage

handle addSymbol, updateSymbol and removeSymbol

refactor symbolManager to use abstract featureManager

add onMapStyleLoadedPlatform

…Platform

add requestMyLocationLatLng add onCameraTrackingChangedPlatform add onCameraTrackingDismissedPlatform add setMyLocationEnabled add setMyLocationTrackingMode myLocationRenderMode not available invalidateAmbientCache not available

add setCompassGravity setCompassViewMargins not available setLogoViewMargins not available setAttributionButtonMargins not available

* master: Support setting map's content insets (flutter-mapbox-gl#215) Provide `onMapIdle` callback (flutter-mapbox-gl#214) [example] add full page map example (flutter-mapbox-gl#201) Fix missing location indicator on iOS (flutter-mapbox-gl#176) Returned a nil result so the future completes. (flutter-mapbox-gl#216) Update README: Access Tokens for self-hosted tiles (flutter-mapbox-gl#217) Change annotation priority (flutter-mapbox-gl#222)

mapbox_gl_web/lib/src/mapbox_map_controller.dart

lkuich · 2020-04-01T01:50:38Z

Trying to get symbols and lines to work, noticed onMapCreated gets called before onStyleLoadedCallback. So the call to lineManager is null in mapbox_map_controller.dart:addLine. I fixed this by adding onStyleLoadedCallback in my MapboxMap implementation and adding my lines there instead of in onMapCreated.

Works fine in onMapCreated on Android.

lkuich · 2020-04-02T16:53:23Z

Symbols and lines are not working in release builds or profile builds. Building with flutter run --profile -d chrome / flutter run --release -d chrome. Works fine in debug.

profile:

release:

Flutter 1.15.17 • channel beta • https://github.com/flutter/flutter.git
Framework • revision 2294d75bfa (4 weeks ago) • 2020-03-07 00:28:38 +0900
Engine • revision 5aff311948
Tools • Dart 2.8.0 (build 2.8.0-dev.12.0 9983424a3c)

fix setData in release

andrea689 · 2020-04-02T21:51:54Z

@lkuich the right place to call these methods is just onStyleLoadedCallback

@lkuich @rpk98c I fixed the problem to add symbols in release mode

* master: Updated location package and code to cope with a breaking change. (flutter-mapbox-gl#239)

m0nac0 · 2020-05-22T19:28:32Z

pubspec.lock

@@ -1,5 +1,5 @@
 # Generated by pub


I think we can gitignore this file, as it's generated

this file contains all packages version used.. if we don't commit this file, and a new incompatible version of a package is released, a new user may have problems

m0nac0 · 2020-05-22T20:21:06Z

example/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"


I think we can probably also gitignore these AndroidManifest.xml files in /debug and /profile as I think they are generated, but it's probably also not an issue to commit them

TimothySealy

The current implementation still has the Page component that conflict with a new Page component in the Flutter SDK.

I think the strong typed interface is a great improvement. Great job!

mapbox_gl_web/lib/src/feature_manager/line_manager.dart

TimothySealy · 2020-05-22T18:19:19Z

mapbox_gl_web/lib/src/feature_manager/symbol_manager.dart

+        'icon-allow-overlap': true,
+        'icon-ignore-placement': true,
+        'text-allow-overlap': true,
+        'text-ignore-placement': true,


Maybe add a todo here for the tail work in making these options configurable. Also see #206 .

mapbox_gl_platform_interface/lib/src/circle.dart

TimothySealy · 2020-05-22T19:58:33Z

mapbox_gl_web/lib/src/mapbox_map_controller.dart

+  Future<void> _addStylesheetToShadowRoot() async {
+    int index = -1;
+    while (index == -1) {
+      index = document.getElementsByTagName('flt-platform-view').length - 1;
+      await Future.delayed(Duration(milliseconds: 10));
+    }
+    HtmlElement e = document.getElementsByTagName('flt-platform-view')[index]
+        as HtmlElement;
+
+    LinkElement link = LinkElement();
+    link.href =
+        'https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css';
+    link.rel = 'stylesheet';
+    e.shadowRoot.append(link);
+
+    await link.onLoad.first;
+  }


Why is the CSS added to the shadow root of this component? What is the reason why is it not added to the HEAD? As this is attached to a specific version of Mapbox GL JS this could lead to inconsistencies in the UI.

because the shadow DOM not see the css added to head section.. I found this workaround but I am opened to new solution!

TimothySealy · 2020-05-22T20:32:45Z

mapbox_gl_web/lib/src/mapbox_map_controller.dart

+  @override
+  Future<CameraPosition> updateMapOptions(
+      Map<String, dynamic> optionsUpdate) async {
+    // FIX: why is called indefinitely? (map_ui page)


I noticed the updates are triggered due to mapChanged events. Probably due to a combination of tracking options passed to the MapboxMap.

m0nac0 · 2020-05-22T20:39:23Z

@andrea689 I'm currently getting errors in the examples because of the changes we made in #258, could you rebase to solve those?
But in general: really great job, thank you for the hard work 👍

fotiDim · 2020-05-27T14:57:03Z

Not sure if it is indeed an issue but pointing my pubspec to the repo & brach of @andrea689 like so:

  mapbox_gl:
    git: 
      url: git://github.com/andrea689/flutter-mapbox-gl.git
      ref: av-web

gives me this error:

Error on line 12, column 11: Invalid description in the "mapbox_gl" pubspec on the "mapbox_gl_platform_interface" dependency: "./mapbox_gl_platform_interface" is a relative path, but this isn't a local pubspec.

I fixed it in a fork like this:

  mapbox_gl_platform_interface:
    git:
      url: https://github.com/fotiDim/flutter-mapbox-gl
      path: mapbox_gl_platform_interface
  mapbox_gl_web:
    git:
      url: https://github.com/fotiDim/flutter-mapbox-gl
      path: mapbox_gl_web

When this PR is merged it would be nice to have a 0.6 release of this package.

m0nac0 · 2020-05-28T18:31:54Z

@andrea689 I just did a thorough testing and everything is looking really fine already.
Just three minor things:

On the Place Symbol/Circle/Line pages and the scrolling map page in the example app I'm getting lot's of Expected value to be of type ..., but found null instead warnings and a Could not parse color from value 'null' warning
Adding a custom image throws a warning, I think the styleimagemissing listener here:
https://github.com/tobrun/flutter-mapbox-gl/blob/c7e364e2bffdeef063f5a0c8708541b02ad6cc2c/mapbox_gl_web/lib/src/feature_manager/symbol_manager.dart#L61
probably always logs that warning. It would be nice if there was a way to prevent the warning, but it's not a big issue if there isn't.
On the scrolling map page I'm getting an Uncaught Error: There is already a source with this ID and both maps behave identically, scrolling and zooming at the same time. Is this feature even supported on web?

tobrun

awesome work @andrea689! Could you rebase on head of master and resolve conflicts. Really excited getting support for web on this project 😄

* master: [flutter] release v0.6.0 Change gradle version to 3.5.0 instead of 3.6.1 Update Mapbox plugins and gradle iOS: add long press handler (flutter-mapbox-gl#268) [android] Implemented long click for Android (flutter-mapbox-gl#198) [fix] Change default MyLocationTrackingMode to None (flutter-mapbox-gl#285) Add First-Class Support For Listening to `onCameraIdle` events (flutter-mapbox-gl#280) CI: use stable flutter channel also on iOS (flutter-mapbox-gl#270) Implement addImage() to style (flutter-mapbox-gl#269) Add animation duration for animateCamera (flutter-mapbox-gl#259) Document onStyleLoadedCallback (flutter-mapbox-gl#257) example: rename Page to ExamplePage (flutter-mapbox-gl#258)

tobrun · 2020-06-03T13:35:52Z

@andrea689:

The bots are reporting, 1 small thing, we are close:

Lint analysis16s
##[error]Process completed with exit code 1.
Run flutter analyze
Analyzing flutter-mapbox-gl...                                  

   info • This function has a return type of 'Future<LatLngBounds>', but doesn't end with a return statement • mapbox_gl_web/lib/src/mapbox_map_controller.dart:262:24 • missing_return

1 issue found. (ran in 14.5s)
##[error]Process completed with exit code 1.

README.md

mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart

mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart

mapbox_gl_web/lib/src/mapbox_map_controller.dart

Point was imported from dart:math and dart:ui

andrea689 · 2020-06-03T17:16:49Z

I added sdf on iOS addImage

onStyleLoadedCallback not called on iOS, I will investigate on it.

The scrolling map page not working because with actual implementation only one map for page is working.. I will refactor the code to work with more the one map for page

tobrun · 2020-06-03T20:12:21Z

I added sdf on iOS addImage
onStyleLoadedCallback not called on iOS, I will investigate on it.
The scrolling map page not working because with actual implementation only one map for page is working.. I will refactor the code to work with more the one map for page

@andrea689 That is fine for first version, let's merge and keep iterating. Can you ticket out all the remaining work?

edit: I can only squash merge this PR, rebase merging won't be possible.

dismissing review to merge the PR, please ticket out any tailwork you want to see adressed!

migrate to platform interface

b6d07be

update gitignore

andrea689 mentioned this pull request Feb 12, 2020

Web support #26

Closed

andrea689 added 3 commits February 12, 2020 17:55

fix lint analysis

11d8435

update example project to support web

937491f

remove dart:ui for conflict in web

remove test from example

ee8f0ab

andrea689 added 12 commits March 3, 2020 11:58

add matchMapLanguageWithDeviceDefault

ad1a0ac

add setMapLanguage

add SymbolManager

147b111

handle addSymbol, updateSymbol and removeSymbol

add lineManager and circleManager

a7a1794

refactor symbolManager to use abstract featureManager

fix ios build

14fdf1d

fix path of symbol_manager

d2479ec

add onMapStyleLoadedPlatform

add queryRenderedFeatures, queryRenderedFeaturesInRect and onMapClick…

82d88b4

…Platform

add onCameraMoveStarted, onCameraMove and onCameraIdle

e71255c

add updateMyLocationTrackingMode

23e80c4

add requestMyLocationLatLng add onCameraTrackingChangedPlatform add onCameraTrackingDismissedPlatform add setMyLocationEnabled add setMyLocationTrackingMode myLocationRenderMode not available invalidateAmbientCache not available

add setCompassEnabled

202d344

add setCompassGravity setCompassViewMargins not available setLogoViewMargins not available setAttributionButtonMargins not available

update mapbox_gl_dart dependency

0c0e257

update Supported API

ac3b48f

andrea689 marked this pull request as ready for review March 13, 2020 15:40

andrea689 requested review from TimothySealy and tobrun March 13, 2020 15:41

rpk98c reviewed Mar 27, 2020

View reviewed changes

mapbox_gl_web/lib/src/mapbox_map_controller.dart Outdated Show resolved Hide resolved

fix onPlatformViewCreated callbacks

e6cdd3f

update mapbox_gl_dart to 0.1.4

5883c13

fix setData in release

Merge branch 'master' into av-web

c7e364e

* master: Updated location package and code to cope with a breaking change. (flutter-mapbox-gl#239)

m0nac0 reviewed May 22, 2020

View reviewed changes

TimothySealy previously requested changes May 22, 2020

View reviewed changes

m0nac0 mentioned this pull request May 28, 2020

Navigation support #205

Closed

tobrun mentioned this pull request May 31, 2020

Implement onDrag for LineManager #288

Closed

tobrun reviewed May 31, 2020

View reviewed changes

m0nac0 reviewed Jun 3, 2020

View reviewed changes

README.md Outdated Show resolved Hide resolved

m0nac0 reviewed Jun 3, 2020

View reviewed changes

mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart Outdated Show resolved Hide resolved

m0nac0 reviewed Jun 3, 2020

View reviewed changes

mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart Outdated Show resolved Hide resolved

m0nac0 reviewed Jun 3, 2020

View reviewed changes

mapbox_gl_web/lib/src/mapbox_map_controller.dart Outdated Show resolved Hide resolved

andrea689 added 7 commits June 3, 2020 15:54

add console log for onDrag method not implemented

048cb29

fix web compile error

fb1219c

Point was imported from dart:math and dart:ui

add web implementation of addImage()

618215f

fix readme

ba7ad86

fix image version conflict

5818c31

fix addImage

fea7778

add sdf to ios style#addImage

f3f5769

tobrun approved these changes Jun 3, 2020

View reviewed changes

tobrun merged commit ebef5db into flutter-mapbox-gl:master Jun 3, 2020

andrea689 mentioned this pull request Jun 4, 2020

Implement addImage() to style #269

Merged

m0nac0 mentioned this pull request Jun 4, 2020

Revert "Add icon/text allow overlap configuration" #299

Closed

AAverin mentioned this pull request Nov 8, 2020

onStyleLoadedCallback not called on iOS #347

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web implementation #223

Web implementation #223

andrea689 commented Feb 12, 2020 •

edited

tobrun commented Feb 15, 2020

rpk98c commented Feb 25, 2020

lkuich commented Apr 1, 2020 •

edited

lkuich commented Apr 2, 2020 •

edited

andrea689 commented Apr 2, 2020

m0nac0 May 22, 2020

andrea689 Jun 3, 2020

m0nac0 May 22, 2020

TimothySealy left a comment

TimothySealy May 22, 2020

TimothySealy May 22, 2020

andrea689 Jun 3, 2020

TimothySealy May 22, 2020

m0nac0 commented May 22, 2020 •

edited

fotiDim commented May 27, 2020 •

edited

m0nac0 commented May 28, 2020 •

edited

tobrun left a comment

tobrun commented Jun 3, 2020

andrea689 commented Jun 3, 2020

tobrun commented Jun 3, 2020 •

edited

		@@ -0,0 +1,7 @@
		<manifest xmlns:android="http://schemas.android.com/apk/res/android"

Web implementation #223

Web implementation #223

Conversation

andrea689 commented Feb 12, 2020 • edited

tobrun commented Feb 15, 2020

rpk98c commented Feb 25, 2020

lkuich commented Apr 1, 2020 • edited

lkuich commented Apr 2, 2020 • edited

andrea689 commented Apr 2, 2020

m0nac0 May 22, 2020

Choose a reason for hiding this comment

andrea689 Jun 3, 2020

Choose a reason for hiding this comment

m0nac0 May 22, 2020

Choose a reason for hiding this comment

TimothySealy left a comment

Choose a reason for hiding this comment

TimothySealy May 22, 2020

Choose a reason for hiding this comment

TimothySealy May 22, 2020

Choose a reason for hiding this comment

andrea689 Jun 3, 2020

Choose a reason for hiding this comment

TimothySealy May 22, 2020

Choose a reason for hiding this comment

m0nac0 commented May 22, 2020 • edited

fotiDim commented May 27, 2020 • edited

m0nac0 commented May 28, 2020 • edited

tobrun left a comment

Choose a reason for hiding this comment

tobrun commented Jun 3, 2020

andrea689 commented Jun 3, 2020

tobrun commented Jun 3, 2020 • edited

andrea689 commented Feb 12, 2020 •

edited

lkuich commented Apr 1, 2020 •

edited

lkuich commented Apr 2, 2020 •

edited

m0nac0 commented May 22, 2020 •

edited

fotiDim commented May 27, 2020 •

edited

m0nac0 commented May 28, 2020 •

edited

tobrun commented Jun 3, 2020 •

edited