https://github.com/kuflink/angular2-mapbox

Angular 2 components for mapbox-gl
https://github.com/kuflink/angular2-mapbox

Last synced: about 1 month ago
JSON representation

Angular 2 components for mapbox-gl

• Host: GitHub
• URL: https://github.com/kuflink/angular2-mapbox
• Owner: kuflink
• Archived: true
• Created: 2016-12-07T10:09:04.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-03-07T06:28:29.000Z (almost 6 years ago)
• Last Synced: 2024-10-13T14:15:51.920Z (about 2 months ago)
• Language: TypeScript
• Size: 108 KB
• Stars: 16
• Watchers: 5
• Forks: 6
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - angular2-mapbox - Angular 2 components for mapbox-gl. (Uncategorized / Uncategorized)

README

        
# angular2-mapbox

[![Join the chat at https://gitter.im/kuflink/angular2-mapbox](https://badges.gitter.im/kuflink/angular2-mapbox.svg)](https://gitter.im/kuflink/angular2-mapbox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Angular2 components for [mapbox-gl](https://www.npmjs.com/package/mapbox-gl). This project is currently in development state. Please do not use this in production.

## Install

```bash

npm install --save angular2-mapbox

```

Inside your @NgModule, add the MapBoxModule along with your API key for Mapbox ([you can grab one here](https://www.mapbox.com/studio/account/tokens/)):

```javascript

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

import { MapBoxModule }  from 'angular2-mapbox/core';

@NgModule({

  imports: [ 

    BrowserModule, 

    MapBoxModule.forRoot("REPLACE_WITH_YOUR_API_KEY")

  ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

```

Now added the map for [mapbox-gl](https://www.npmjs.com/package/mapbox-gl) and angular2-mapbox in your **system.config.js**

```javascript

(function (global) {

  System.config({

    paths: {

      'npm:': 'node_modules/'

    },

    map: {

      ...

      'mapbox-gl': 'npm:mapbox-gl/dist/mapbox-gl.js',

      'angular2-mapbox/core': 'npm:angular2-mapbox/core/core.umd.js'

    },

    ...

})(this);

```

Lastly, we need to include the mapbox-gl css file. You can do this via @import or including it as a stylesheet in your HTML.

```

@import "node_modules/mapbox-gl/dist/mapbox-gl";

```

OR 

```html

```

## Usage

Now you can start using the angular2 mapbox components.

### mapbox[options]

```html

```

`options` should be use the interface `MapOptions` which is exported by this package.

* style: string, defaultsTo = **'mapbox://styles/mapbox/streets-v9'**

* center: array, defaultsTo = **[-5.646973, 52.087483]**

* zoom: number, defaultsTo = **6**

* hash: boolean, defaultsTo = **false**

* index: number, defaultsTo = **0** (NOTE: Must be used if multiple maps are displayed)

### mapbox-marker[_image, width, height, coordinates, click, data, flyTo_]

```html

    

    

```

* image: string

* width: number = defaultsTo = **60**

* height: number = defaultsTo = **60**

* coordinates: array 

* click: function

* data: [object, string]

* flyTo: number (If present, when clicked the marker is flown to)