Markers are rendered outside of the map and moving (shadow dom issues)

patryk-wlaz commented 4 years ago

Hi, this is what happens: https://pwlaz.tinytake.com/tt/NDUxOTg5M18xNDMxOTk0Mw

This is my html code:

<mgl-map [style]="'mapbox://styles/mapbox/light-v10'">
  <mgl-marker [lngLat]="[20.995921790599823, 52.20451647814114]"></mgl-marker>
</mgl-map>

css:

:host {
  height: 100%;
  width: 100%;
}

mgl-map {
  height: 100%;
  width: 100%;
}

.marker {
  background-image: url('../../../assets/img/mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

What am I missing here?

When I do not try to add markers, map renders and works normally. Also, it renders at 100% width and height. When I add a marker suddenly overflow appears and marker is rendered below the map - and it moves as shown on the video.

dmytro-gokun commented 4 years ago

@patryk-wlaz You are clearly missing a stackblitz reproduction for the issue. Go ahead and create one. The easiest way is to use demo site: https://wykks.github.io/ngx-mapbox-gl/demo/display-map, click "Edit" there and see if you can reproduce it.

patryk-wlaz commented 4 years ago

I have created repository to reproduce the problem on fresh angular project, and I can't - I did everything as I did in my real app (I can't share the code) but on empty project it works! I know you can't really help me in this case, but maybe you know what could potentially cause such a problem? What things outside of scope of ths library could be so misleading for it in a way that markers would render and behave so weirdly? Edit: in my main app we use shadowDom. It's the cause of the problem; right now I have no idea hot to solve it - I will post an update if I ever will.

Anyway, the whole repository reproduction is still worth checking out, because I have another problem there. I can't use the documented way of implemepting library for AOT compilation. The module for injecting token (created as in the docs) seems to do nothing - when I use it the app starts to behave like mgl-components would be unknown. See commented code lines here: https://github.com/patryk-wlaz/ngx-mapbox-gl-error/blob/master/src/app/app.module.ts

Steven4294 commented 4 years ago

I'm having the same issue

Steven4294 commented 4 years ago

heres my package.json. The only thing I can think of is it has something to do with my angular version. @patryk-wlaz

{
  "name": "ngx-admin",
  "version": "4.0.1",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akveo/ngx-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "node server.js",
    "build": "ng build --prod",
    "serve": "ng serve --port 4200",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
  },
  "dependencies": {
    "@akveo/ng2-completer": "^9.0.1",
    "@angular/animations": "^9.0.4",
    "@angular/cdk": "^9.1.2",
    "@angular/common": "^9.0.4",
    "@angular/compiler": "^9.0.4",
    "@angular/core": "^9.0.4",
    "@angular/forms": "^9.0.4",
    "@angular/google-maps": "^9.1.0",
    "@angular/material": "^9.1.2",
    "@angular/platform-browser": "^9.0.4",
    "@angular/platform-browser-dynamic": "^9.0.4",
    "@angular/router": "^9.0.4",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@nebular/auth": "5.0.0",
    "@nebular/eva-icons": "5.0.0",
    "@nebular/security": "5.0.0",
    "@nebular/theme": "5.0.0",
    "@swimlane/ngx-charts": "^13.0.2",
    "@types/geojson": "^7946.0.7",
    "angular2-chartjs": "0.4.1",
    "body-parser": "^1.19.0",
    "bootstrap": "4.3.1",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "cors": "^2.8.5",
    "echarts": "^4.0.2",
    "eva-icons": "^1.1.3",
    "express": "^4.17.1",
    "hammerjs": "^2.0.8",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "jsonwebtoken": "^8.5.1",
    "leaflet": "1.2.0",
    "mapbox-gl": "^1.11.1",
    "nebular-icons": "1.1.0",
    "ng-gallery": "^5.0.0",
    "ng2-ckeditor": "^1.2.2",
    "ng2-smart-table": "^1.6.0",
    "ngx-echarts": "^4.2.2",
    "ngx-mapbox-gl": "^4.8.1",
    "node-sass": "^4.12.0",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "path": "^0.12.7",
    "roboto-fontface": "0.8.0",
    "rxjs": "6.5.4",
    "rxjs-compat": "6.3.0",
    "socicon": "3.0.5",
    "style-loader": "^1.1.3",
    "tinymce": "4.5.7",
    "tslib": "^1.10.0",
    "typeface-exo": "0.0.22",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.4",
    "@angular/cli": "^9.0.4",
    "@angular/compiler-cli": "^9.0.4",
    "@angular/language-service": "9.0.4",
    "@compodoc/compodoc": "1.0.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@types/d3-color": "1.0.5",
    "@types/googlemaps": "^3.39.3",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/mapbox-gl": "^1.11.1",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "^5.7.0",
    "tslint-language-service": "^0.9.9",
    "typescript": "3.7.5"
  }
}

Steven4294 commented 4 years ago

@dmytro-gokun

dmytro-gokun commented 4 years ago

@Steven4294 I do not think there is something wrong with Angular itself. If that is your suspicion, I'd advice removing your package.json.lock (if you have one) and updating to the latest versions of the libraries used. If that doesn't do it, I can only repeat this: https://github.com/Wykks/ngx-mapbox-gl/issues/240#issuecomment-670386266 I'm sorry to say that, but nobody can (will) help you until you build a reproduction. So, that is the way.

NB. To me this issue seems to be releated to CSS. Check out what styles get applied to markers and the map itself. Again, just a wild guess.

Steven4294 commented 4 years ago

ok, im going to strip out some of my css in my angular.json and see what the results are. Ive imported my package.json into a stackblitz and it works, so I dont think its a problem with Angular itself

patryk-wlaz commented 4 years ago

Just to clarify: I have described two issues in this thread. Sorry for this mess, If you would like me to split those issues into two threads - let me know.

Issue 1 - markers are moving like this: https://pwlaz.tinytake.com/tt/NDUxOTg5M18xNDMxOTk0Mw This is connected to shadowDom. I can confirm, because after rendering map in the same application outside of shadowDom, the issue is gone, markers are at the right places. Therefore:

ngx-mapbox-gl or mapbox itself doesn't work well with shadow DOM (I'm sorry but I am not willing to contribute changes to the library, at least not in the near future);
people facing this problem can hack their apps like I did - in angular routing you can create shadowDom wrapper that wraps only some components of your app, and leave component with map outside of shadowDom.

Issue 2 - method documented as appriopriate library usage for AOT builds doesn't work, which is reproduced here https://github.com/patryk-wlaz/ngx-mapbox-gl-error @dmytro-gokun Specifically: see lines commented out in this file https://github.com/patryk-wlaz/ngx-mapbox-gl-error/blob/master/src/app/app.module.ts

I don't think that any of these issues can be solved by css changes.

dmytro-gokun commented 4 years ago

@patryk-wlaz Thanks for the clarification. If you do not mind, plz move #2 into a separate issue.

Regarding #1 - if you are willing to share the details of the hack you did here, i think folks will be thanksful.

patryk-wlaz commented 4 years ago

It's nothing special but it feels kinda hacky to organize routes like this. We just moved the shadow-dom wrapper that used to wrap the whole application from app.component to special wrapping.component. Router looks like this:

const routes: Routes = [
  {
    path: 'unwrapped', // those components are going to be rendered outside of shadowDom
    children: [
      {
        path: 'someLayout',
        component: SomeLayoutComponent,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'map',
          },
          {
            path: 'map',
            component: MapComponent,
          },
        ],
      },
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'someLayout',
      },
    ],
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'someLayout',
  },
  {
    path: '',
    component: WrappingComponent, // this wraps everything in shadow-dom-wrapper, which renders stuff in shadowDOM
    children: [
      {
        path: 'someLayout',
        component: SomeLayoutComponent,
        children: [
          {
            path: 'smth',
            component: SmthComponent,
          },
          {
            path: 'other',
            component: OtherComponent,
          },
        ],
      },
    ],
  },

WrappingComponent html (where shadow-wrapper is our custom component that wraps everything in shadow dom):

<shadow-wrapper>
  <router-outlet></router-outlet>
</shadow-wrapper>

patryk-wlaz commented 4 years ago

Moved the second issue described here to https://github.com/Wykks/ngx-mapbox-gl/issues/241

dmytro-gokun commented 4 years ago

@patryk-wlaz Does this solve your case?

patryk-wlaz commented 4 years ago

Yeah, for me this issue can be closed

dmytro-gokun commented 4 years ago

Oh, i'm sorry. I mean to ask @Steven4294 :) @Steven4294 Does this solve your case?

anthony-bernardo commented 1 year ago

How to resolve this error with shadow root ?

Wykks / ngx-mapbox-gl

Markers are rendered outside of the map and moving (shadow dom issues) #240