leaflet maps

config/webpack.common.js

@@ -230,6 +230,7 @@ module.exports = {
       "Tether": 'tether',
       "window.Tether": "tether",
       "GoogleMapsLoader": "google-maps",
+      "L": "leaflet"
     })
   ],
 

package.json

@@ -62,6 +62,7 @@
     "font-awesome-sass-loader": "^1.0.1",
     "google-maps": "^3.2.1",
     "jquery": "^2.2.3",
+    "leaflet-map": "^0.2.1",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.2",
     "tether": "^1.2.4",

src/app/pages/maps/components/googleMaps/googleMaps.component.ts

@@ -15,12 +15,11 @@ export class GoogleMaps {
   constructor(private _elementRef:ElementRef) {
   }
 
-  ngOnInit() {
-  }
-
   ngAfterViewInit() {
+    let el = DOM.querySelector(this._elementRef.nativeElement, '.google-maps');
+
     GoogleMapsLoader.load((google) => {
-      new google.maps.Map(DOM.querySelector(this._elementRef.nativeElement, '.google-maps'), {
+      new google.maps.Map(el, {
         center: new google.maps.LatLng(44.5403, -78.5463),
         zoom: 8,
         mapTypeId: google.maps.MapTypeId.ROADMAP

src/app/pages/maps/components/leafletMaps/index.ts

@@ -0,0 +1 @@
+export * from './leafletMaps.component';

src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts

@@ -0,0 +1,33 @@
+import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
+import {BaCard} from '../../../../theme';
+import {DOM} from "angular2/src/platform/dom/dom_adapter";
+
+@Component({
+  selector: 'google-maps',
+  pipes: [],
+  providers: [],
+  // otherwise maps won't work
+  encapsulation: ViewEncapsulation.None,
+  styles: [require('leaflet/dist/leaflet.css'), require('./leafletMaps.scss')],
+  directives: [BaCard],
+  template: require('./leafletMaps.html'),
+})
+export class LeafletMaps {
+
+  constructor(private _elementRef:ElementRef) {
+  }
+
+  ngAfterViewInit() {
+    let el = DOM.querySelector(this._elementRef.nativeElement, '.leaflet-maps');
+
+    L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet';
+    var map = L.map(el).setView([51.505, -0.09], 13);
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    L.marker([51.5, -0.09]).addTo(map)
+      .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
+      .openPopup();
+  }
+}

src/app/pages/maps/components/leafletMaps/leafletMaps.html

@@ -0,0 +1,3 @@
+<ba-card title="Leaflet Maps" baCardClass="popular-app medium-card" class="viewport100">
+  <div class="leaflet-maps"></div>
+</ba-card>

src/app/pages/maps/components/leafletMaps/leafletMaps.scss

@@ -0,0 +1,4 @@
+.leaflet-maps {
+   //TODO: hotfix
+  height: 320px;
+}

src/app/pages/maps/maps.component.ts

@@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig} from 'angular2/router';
 
 import {GoogleMaps} from './components/googleMaps';
+import {LeafletMaps} from "./components/leafletMaps";
 
 @Component({
   selector: 'maps',
@@ -17,6 +18,11 @@ import {GoogleMaps} from './components/googleMaps';
     path: '/google-maps',
     useAsDefault: true
   },
+  {
+    name: 'LeafletMaps',
+    component: LeafletMaps,
+    path: '/leaflet-maps',
+  },
 ])
 export class Maps {
 

src/app/theme/sidebar/sidebar.service.ts

@@ -31,6 +31,10 @@ export class SidebarService {
         {
           title: 'Google Maps',
           name: 'GoogleMaps',
+        },
+        {
+          title: 'Leaflet Maps',
+          name: 'LeafletMaps',
         }
       ]
     },

src/custom-typings.d.ts

@@ -31,6 +31,7 @@ import * as _ from 'lodash'
 
 declare var $:any;
 declare var GoogleMapsLoader:any;
+declare var L:any;
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;