CODEWITHSUNDEEP
javascriptangulartypescriptmapboxmapbox-gl-js
user7781212
user7781212

Reputation:

Why my Mapbox GL does not display tiles correctly?

I'm working on an angular project and I want to use Mapbox I followed this tutorial on medium that shows how to do that. When I tried to run the server I end up with this result. Angular Mapbox result I searched everywhere but I didn't find a solution to the problem.

Here is my code

TripPlanner Component 

import { Component, OnInit } from "@angular/core";
import { environment } from "../../environments/environment";
import * as mapboxgl from "mapbox-gl";

@Component({
  selector: "app-trip-planner",
  templateUrl: "./trip-planner.component.html",
  styleUrls: ["./trip-planner.component.css"]
})
export class TripPlannerComponent implements OnInit {
  map: mapboxgl.Map;
  style = "mapbox://styles/mapbox/streets-v11";
  lat = 37.75;
  lng = -122.41;
  constructor() {}

  ngOnInit() {
    mapboxgl.accessToken = environment.mapbox.accessToken;
    this.map = new mapboxgl.Map({
      container: "map",
      style: this.style,
      zoom: 13,
      center: [this.lng, this.lat]
    });
    // Add map controls
    this.map.addControl(new mapboxgl.NavigationControl());
  }
}

My Index.html 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Trip</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
  </head>
  <body>
    <app-root> </app-root>
  </body>
</html>

My Package.json

{
  "name": "trip",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@auth0/angular-jwt": "^4.0.0",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@ng-bootstrap/ng-bootstrap": "^5.0.0",
    "@popperjs/core": "^2.0.6",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "mapbox-gl": "^1.8.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.4.1",
    "@angular-devkit/build-angular": "~0.803.22",
    "@angular/cli": "~8.3.22",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/mapbox-gl": "^0.51.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-scss": "^2.0.0",
    "protractor": "~5.4.0",
    "tailwindcss": "^1.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Upvotes: 1

Views: 725

Answers (2)

AndrewHarvey
AndrewHarvey

Reputation: 3055

This is a bug in version 1.8.0 you can downgrade to 1.7 or wait for the next patch release https://github.com/mapbox/mapbox-gl-js/issues/9327

Upvotes: 1

Oussail
Oussail

Reputation: 2288

That's because you are using different versions for CSS you use 1.8.0 and for js 1.0.0 :

Stackblitz Example : https://stackblitz.com/edit/angular-mapbox-gl-working

Result :

enter image description here

Upvotes: 0

Related Questions