kuflink / angular2-mapbox Goto Github PK

Angular 2 components for mapbox-gl

TypeScript 97.05% JavaScript 2.95%

angular2-mapbox's Introduction

angular2-mapbox

Angular2 components for mapbox-gl. This project is currently in development state. Please do not use this in production.

Install

npm install --save angular2-mapbox

Inside your @NgModule, add the MapBoxModule along with your API key for Mapbox (you can grab one here):

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 and angular2-mapbox in your system.config.js

(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";

<link rel="stylesheet" href="node_modules/mapbox-gl/dist/mapbox-gl.css"/>

Usage

Now you can start using the angular2 mapbox components.

mapbox[options]

<mapbox [options]="myMapboxOptions"></mapbox>

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]

<mapbox [center]="[-5.646973, 52.087483]">
    <mapbox-marker
        *ngFor="let marker of map.markers"
        flyTo="16"
        [image]="marker.image"
        [coordinates]="marker.coordinates"
        [popup]="marker.popup"
        [data]="marker.data"
        (click)="markerClicked($event)">
    </mapbox-marker>
</mapbox>

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)

angular2-mapbox's People

Contributors

Stargazers

Watchers

Forkers

gitter-badger aaronczichon srmanjiro1695 smstromb neokore lifeai krunalkp

angular2-mapbox's Issues

Build failed with angular-cli

Using angular-cli instead of system.config.js

angular-cli.json :

...
"apps": [
    { 
      ...
  "styles": [
 "../node_modules/mapbox-gl/dist/mapbox-gl.css"
      ],
"scripts": [
        "../node_modules/mapbox-gl/dist/mapbox-gl.js",
        "../node_modules/angular2-mapbox/core/core.umd.js"
       ]
}

And following the other steps of install, provides the following error

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/dev/workspace/app/node_modules/angular2-mapbox/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/dev/workspace/app/node_modules/angular2-mapbox/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in C:/dev/workspace/app/node_modules/angular2-mapbox/node_modules/@angular/core/src/di/opaque_token.d.ts

It seams to be an AOT issue.

Any idea ?

Can't import MapBoxModule

When I am trying to import MapBoxModule like so:

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

I am getting Cannot read property 'getSourceFile' of undefined

Error in file

Hello, Trying to use the Angular2.mapbox in my angular2 project, after following the readme file , I get this error.

node_modules/angular2-mapbox/index.d.ts(1,1): error TS6053: File 'D:/MyRepositories/Angular-2-mapbox-starter/node_modules/angular2-mapbox/node_modules/@types/mapbox-gl/index.d.ts' not found.

Link to my project: https://github.com/AlexeyKorkoza/Angular-2-mapbox-starter

Any ideas?

Thank you very match!

npm install doesn't work

Looks like the NPM package is broken, this doesn't work anymore:
npm install --save angular2-mapbox

I get:

npm WARN deprecated [email protected]: This package has been merged into the 'mapbox-gl-style-spec' package
npm WARN deprecated [email protected]: This module has moved: please install @mapbox/point-geometry instead
npm WARN deprecated [email protected]: This module is now under the @mapbox namespace: install @mapbox/shelf-pack instead
npm WARN deprecated [email protected]: This module has moved: please install @mapbox/vector-tile instead
npm WARN deprecated [email protected]: This module is now under the @mapbox namespace: install @mapbox/whoots-js instead
npm ERR! code 128
npm ERR! Command failed: /usr/local/bin/git clone --depth=1 -q -b 656/head git://github.com/mapbox/mapbox-gl-style-spec.git /Users/meow/.npm/_cacache/tmp/git-clone-19c9d0c7
npm ERR! warning: templates not found /var/folders/ky/mnzzz1n52dv759fjqv7k1kwh0000gn/T/pacote-git-template-tmp/git-clone-6d2e8343
npm ERR! warning: Could not find remote branch 656/head to clone.
npm ERR! fatal: Remote branch 656/head not found in upstream origin

Anything I can do? Sorry, I am not a NPM/JSPM pro, but will definitely contribute to the angular2-mapbox if I can.

When we can use mapbox on production

Hi Guys, can anyone tell me when we can use mapbox on production ?

Module not found

I'm using this module with webpack and have isntalled it via NPM but can't get it to work as i'm getting the error on build that the module cannot be found, although it's been properly installed.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'angular2-mapbox/core' in 'XXXXXXXXXX/src/app'

could not install

I got an error when I tried to npm install the package. Is there something I should do ?