angular2.leaflet.component's Introduction

Angular2.leaflet.component

my own attemp on creating an Angular 2 leaflet v1.x component

Live examples

base example https://elasticrash.github.io/Angular.io.MapViewer/example/
multi-map example https://elasticrash.github.io/Angular.io.MapViewer/example/#/mm-map
star map using L.CRS.Simple https://elasticrash.github.io/Angular.io.MapViewer/example/#/simple
custom CRS using leaflet https://elasticrash.github.io/Angular.io.MapViewer/example/#/prj
a simple genetic algorithm trying to solve the Travelling salesman problem https://elasticrash.github.io/Angular.io.MapViewer/example/#/random

all examples sources code can be found here

Bare in mind that I just started developing this and I don't have much time to plan things ahead mainly due to not enough free time, so I am making changes as I go

Install

npm install angular2.leaflet.components

in SystemJs use the following configuration

    transpiler: 'typescript',
    map: {
        'angular2.leaflet.components': 'npm:angular2.leaflet.components',
    },
    packages: {
              'angular2.leaflet.components': {
        main: './index',
        defaultExtension: 'js',
        meta: {
          "format": "register"
        }
      }
    },
    "ts": {
        "main": "plugin.js"
      },
      "typescript": {
        "main": "typescript.js",
        "meta": {
          "lib/typescript.js": {
            "exports": "ts"
          }
        }
      }

I haven't tested it with other transpilers save for typescript, thats why I am including it on the SystemJs config

then on you app module include this

import { CandTLeafletComponent  } from 'angular2.leaflet.components';
import { CandTLeafletService } from 'angular2.leaflet.components';
import { AppComponent } from './components/app.component';

@NgModule({
  imports: [... ],
  declarations: [..., CandTLeafletComponent],
  providers: [CandTLeafletService],
  bootstrap: [AppComponent]
})