#120 added Angular 2 Wrapper

.gitignore

@@ -1,2 +1,3 @@
 node_modules
+.idea
 .idea

Gruntfile.js

@@ -57,13 +57,22 @@ module.exports = function (grunt) {
                     '<%= appConfig.dist %>/angularLocationpicker.jquery.js': ['<%= appConfig.app %>/angularLocationpicker.jquery.js']
                 }
             }
+        },
+        copy: {
+            main: {
+                expand: true,
+                cwd: 'src/ngLocationpicker/',
+                src: '**',
+                dest: 'dist/ngLocationpicker',
+            }
         }
     });
 
     grunt.registerTask('build', [
         'clean:dist',
         'uglify:minimize',
-        'uglify:beautify'
+        'uglify:beautify',
+        'copy'
     ]);
 
 };

dist/angularLocationpicker.jquery.js

@@ -1,4 +1,4 @@
-/*! jquery-locationpicker - v0.1.15 - 2016-09-26 */
+/*! jquery-locationpicker - v0.1.16 - 2017-10-02 */
 "use strict";
 
 angular.module("angular-jquery-locationpicker", []).constant("angularJQueryLocationpickerDefaultValue", {

dist/locationpicker.jquery.js

@@ -1,4 +1,4 @@
-/*! jquery-locationpicker - v0.1.15 - 2016-09-26 */
+/*! jquery-locationpicker - v0.1.16 - 2017-10-02 */
 (function($) {
     function GMapContext(domElement, options) {
         var _map = new google.maps.Map(domElement, options);
@@ -313,7 +313,7 @@
                 return;
             }
             var settings = $.extend({}, $.fn.locationpicker.defaults, options);
-            var gmapContext = new GMapContext(this, $.extend({}, settings.mapOptions, {
+            var gmapContext = new GMapContext(this, $.extend({}, {
                 zoom: settings.zoom,
                 center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude),
                 mapTypeId: settings.mapTypeId,
@@ -331,7 +331,7 @@
                 markerIcon: settings.markerIcon,
                 markerDraggable: settings.markerDraggable,
                 markerVisible: settings.markerVisible
-            }));
+            }, settings.mapOptions));
             $target.data("locationpicker", gmapContext);
             function displayMarkerWithSelectedArea() {
                 GmUtility.setPosition(gmapContext, gmapContext.marker.position, function(context) {

dist/ngLocationpicker/locationpicker.ts

@@ -0,0 +1,72 @@
+import {Component, ElementRef, Input, NgModule, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+declare var $: any;
+declare var require: any;
+
+@Component({
+  selector: 'l-locationpicker',
+  styles: [`
+    .l-locationpicker-class {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      width: 700px;
+      height: 500px;
+    }
+  `],
+  template: `
+    <div #locationpickerEl>
+      <div class="locationpicker-loading">Loading</div>
+    </div>
+  `
+})
+export class LocationpickerComponent implements OnInit {
+
+  @Input() lSettings: object = {};
+
+  @Input() lClass: string = 'l-locationpicker-class';
+
+  @ViewChild('locationpickerEl') locationpickerEl: ElementRef;
+
+  $picker: any;
+
+  constructor(private rd: Renderer2) {
+  }
+
+  ngOnInit() {
+    require.ensure(['./../locationpicker.jquery.js'], require => {
+      require('./../locationpicker.jquery.js');
+      this.$picker = $(this.locationpickerEl.nativeElement).locationpicker(this.lSettings);
+      this.rd.addClass(this.locationpickerEl.nativeElement, this.lClass)
+    });
+  }
+
+  getLocation() {
+    return this.$picker.locationpicker('location');
+  }
+
+  setPosition(position: { radius?: number, latitude: number, longitude: number }) {
+    this.$picker.locationpicker('location', position);
+  }
+
+  subscribeEvent(event: string, callback: () => void) {
+    this.$picker.locationpicker('subscribe', {event, callback})
+  }
+
+  getMap() {
+    return this.$picker.locationpicker('map');
+  }
+
+  autosize() {
+    this.$picker.locationpicker('autosize');
+  }
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [LocationpickerComponent],
+  exports: [LocationpickerComponent]
+})
+export class LocationpickerModule {
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-locationpicker",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "keywords": [
     "jquery-plugin",
     "googlemap",
@@ -27,6 +27,7 @@
     "grunt": "~0.4.5",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-uglify": "^0.8.0",
     "load-grunt-tasks": "^3.1.0"
   }

src/ngLocationpicker/locationpicker.ts

@@ -0,0 +1,72 @@
+import {Component, ElementRef, Input, NgModule, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+declare var $: any;
+declare var require: any;
+
+@Component({
+  selector: 'l-locationpicker',
+  styles: [`
+    .l-locationpicker-class {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      width: 700px;
+      height: 500px;
+    }
+  `],
+  template: `
+    <div #locationpickerEl>
+      <div class="locationpicker-loading">Loading</div>
+    </div>
+  `
+})
+export class LocationpickerComponent implements OnInit {
+
+  @Input() lSettings: object = {};
+
+  @Input() lClass: string = 'l-locationpicker-class';
+
+  @ViewChild('locationpickerEl') locationpickerEl: ElementRef;
+
+  $picker: any;
+
+  constructor(private rd: Renderer2) {
+  }
+
+  ngOnInit() {
+    require.ensure(['./../locationpicker.jquery.js'], require => {
+      require('./../locationpicker.jquery.js');
+      this.$picker = $(this.locationpickerEl.nativeElement).locationpicker(this.lSettings);
+      this.rd.addClass(this.locationpickerEl.nativeElement, this.lClass)
+    });
+  }
+
+  getLocation() {
+    return this.$picker.locationpicker('location');
+  }
+
+  setPosition(position: { radius?: number, latitude: number, longitude: number }) {
+    this.$picker.locationpicker('location', position);
+  }
+
+  subscribeEvent(event: string, callback: () => void) {
+    this.$picker.locationpicker('subscribe', {event, callback})
+  }
+
+  getMap() {
+    return this.$picker.locationpicker('map');
+  }
+
+  autosize() {
+    this.$picker.locationpicker('autosize');
+  }
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [LocationpickerComponent],
+  exports: [LocationpickerComponent]
+})
+export class LocationpickerModule {
+}