Get started with angular-mapboxgl-directive CDN

MIT licensed

Angular-mapboxgl-directive is a library for using Mapbox GL JS maps in Angular applications.

Tags:
  • webgl
  • angularjs
  • mapbox
  • mapboxgl
  • javascript
  • cli

Stable version

Copied!

How to start using angular-mapboxgl-directive CDN


import { Component } from '@angular/core';

declare const mapboxgl: any; // Add this line for TypeScript

@Component({
  selector: 'app-mapbox-example',
  template: `
    <div style="height: 500px; width: 100%;">
      <mapbox-map [style]="mapboxStyle" [accessToken]="accessToken">
        <mapbox-geojson [geojson]="geojsonData"></mapbox-geojson>
      </mapbox-map>
    </div>
  `
})
export class MapboxExampleComponent {
  mapboxStyle = 'mapbox://styles/mapbox/streets-v11';
  accessToken = 'YOUR_ACCESS_TOKEN'; // Replace with your Mapbox access token
  geojsonData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-122.4194, 37.7749]
        },
        properties: {
          title: 'San Francisco'
        }
      }
    ]
  };

  ngOnInit() {
    mapboxgl.accessToken = this.accessToken; // Set the access token for Mapbox
  }
}
Copied!
Copied!
Copied!
Copied!
Copied!

All versions