diff --git a/config/webpack.common.js b/config/webpack.common.js index eac5c18e..22ce1eb5 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -230,6 +230,7 @@ module.exports = { "Tether": 'tether', "window.Tether": "tether", "GoogleMapsLoader": "google-maps", + "L": "leaflet" }) ], diff --git a/package.json b/package.json index 702d7512..1db9e048 100644 --- a/package.json +++ b/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", diff --git a/src/app/pages/maps/components/googleMaps/googleMaps.component.ts b/src/app/pages/maps/components/googleMaps/googleMaps.component.ts index e04e6e67..e1aaa904 100644 --- a/src/app/pages/maps/components/googleMaps/googleMaps.component.ts +++ b/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 diff --git a/src/app/pages/maps/components/googleMaps/googleMaps.html b/src/app/pages/maps/components/googleMaps/googleMaps.html index 2eb639e1..eccdc49f 100644 --- a/src/app/pages/maps/components/googleMaps/googleMaps.html +++ b/src/app/pages/maps/components/googleMaps/googleMaps.html @@ -1,3 +1,3 @@ - +
diff --git a/src/app/pages/maps/components/leafletMaps/index.ts b/src/app/pages/maps/components/leafletMaps/index.ts new file mode 100644 index 00000000..b187e3c6 --- /dev/null +++ b/src/app/pages/maps/components/leafletMaps/index.ts @@ -0,0 +1 @@ +export * from './leafletMaps.component'; diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts b/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts new file mode 100644 index 00000000..2832a98f --- /dev/null +++ b/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: '© OpenStreetMap contributors' + }).addTo(map); + + L.marker([51.5, -0.09]).addTo(map) + .bindPopup('A pretty CSS3 popup.
Easily customizable.') + .openPopup(); + } +} diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.html b/src/app/pages/maps/components/leafletMaps/leafletMaps.html new file mode 100644 index 00000000..116ed798 --- /dev/null +++ b/src/app/pages/maps/components/leafletMaps/leafletMaps.html @@ -0,0 +1,3 @@ + +
+ diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.scss b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss new file mode 100644 index 00000000..1c57a98f --- /dev/null +++ b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss @@ -0,0 +1,4 @@ +.leaflet-maps { + //TODO: hotfix + height: 320px; +} diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts index 5224b98e..5f6ee391 100644 --- a/src/app/pages/maps/maps.component.ts +++ b/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 { diff --git a/src/app/theme/sidebar/sidebar.service.ts b/src/app/theme/sidebar/sidebar.service.ts index 2bbdddac..e90444bf 100644 --- a/src/app/theme/sidebar/sidebar.service.ts +++ b/src/app/theme/sidebar/sidebar.service.ts @@ -31,6 +31,10 @@ export class SidebarService { { title: 'Google Maps', name: 'GoogleMaps', + }, + { + title: 'Leaflet Maps', + name: 'LeafletMaps', } ] }, diff --git a/src/assets/img/theme/vendor/leaflet/marker-icon-2x.png b/src/assets/img/theme/vendor/leaflet/marker-icon-2x.png new file mode 100644 index 00000000..0015b649 Binary files /dev/null and b/src/assets/img/theme/vendor/leaflet/marker-icon-2x.png differ diff --git a/src/assets/img/theme/vendor/leaflet/marker-icon.png b/src/assets/img/theme/vendor/leaflet/marker-icon.png new file mode 100644 index 00000000..e2e9f757 Binary files /dev/null and b/src/assets/img/theme/vendor/leaflet/marker-icon.png differ diff --git a/src/custom-typings.d.ts b/src/custom-typings.d.ts index 035c854b..de5e3777 100644 --- a/src/custom-typings.d.ts +++ b/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;