Update map directive and MapConfig service

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .tmp
 .sass-cache
 bower_components
+.DS_Store

README.markdown

@@ -2,7 +2,7 @@
 
 > AngularJS directives for Nokia Here Maps
 
-For pull requests please see branching strategy below! 
+For pull requests please see branching strategy below!
 
 Master (1.2.6): [![Build Status](https://travis-ci.org/lukemarsh/angular-here-maps.svg?branch=master)](https://travis-ci.org/lukemarsh/angular-here-maps)
 
@@ -60,7 +60,10 @@ Add some configuration settings:
         appCode: 'your Here Maps app code',
         libraries: 'ui,mapevents,pano',
         pixelRatio: 2, // Optional (Default: 1)
-        pixelPerInch: 320 // Optional (Default: 72)
+        pixelPerInch: 320, // Optional (Default: 72)
+        useHTTPS: true,
+        zoomMax: 16,
+        zoomMin: 13
     });
 })
 ```
@@ -74,17 +77,116 @@ default center and zoom for the maps:
 ```js
 $scope.map = {
   zoom : 14,
-  center : { 
+  center : {
     lng: -0.135559,
     lat: 51.513872
   }
 };
 ```
 
+You can choose the map type: default `normal` and `satellite`:
+
+```html
+<map zoom="map.zoom" center="map.center" type="map.type"></map>
+```
+
+```js
+$scope.map = {
+  zoom : 14,
+  center : {
+    lng: -0.135559,
+    lat: 51.513872
+  },
+  type: 'satellite'
+};
+```
+
+### Map Events
+
+#### onLoad Map
+
+```html
+<map center="map.center" on-load="mapOnLoad"></map>
+```
+
+```js
+$scope.mapOnLoad = function(platform, map){
+  var center = map.getCenter();
+};
+```
+
+#### onTap Map
+
+```html
+<map center="map.center" on-tap="mapEventOnTap"></map>
+```
+
+```js
+$scope.mapEventOnTap = function(event, platform, map){
+  // center map on tap
+  var coord = map.screenToGeo(event.currentPointer.viewportX, event.currentPointer.viewportY);
+  $scope.$apply(function(){
+    $scope.map.center = coord;
+  });
+};
+```
+
+#### onDoubleTap Map
+
+```html
+<map center="map.center" on-double-tap="mapEventOnDoubleTap"></map>
+```
+
+```js
+$scope.mapEventOnDoubleTap = function(event, platform, map){
+  // center map on double tap
+  var coord = map.screenToGeo(event.currentPointer.viewportX, event.currentPointer.viewportY);
+  $scope.$apply(function(){
+    $scope.map.center = coord;
+  });
+};
+```
+
+#### onDragStart Map
+
+```html
+<map center="map.center" on-drag-start="mapEventOnDragStart"></map>
+```
+
+```js
+$scope.mapEventOnDragStart = function(event, platform, map){
+
+};
+```
+
+#### onDrag Map
+
+```html
+<map center="map.center" on-drag="mapEventOnDrag"></map>
+```
+
+```js
+$scope.mapEventOnDrag = function(event, platform, map){
+
+};
+```
+
+#### onDragEnd Map
+
+```html
+<map center="map.center" on-drag-end="mapEventOnDragEnd"></map>
+```
+
+```js
+$scope.mapEventOnDragEnd = function(event, platform, map){
+
+};
+```
+
 If you plan to hack on the directives or want to run the example, first thing to do is to install NPM dependencies:
 
 ```shell
-npm install #note bower install is run on post install 
+npm install #note bower install is run on post install
 ```
 
 ### Building
@@ -117,13 +219,13 @@ The various directives are documented at [official site](http://lukemarsh.github
 
 ### Contributing
 
-Filing issues: 
+Filing issues:
  Prior to submiting an issue:
 - Search open/**closed** issues, src examples (./examples), and gitter! **Again please search!**
 - issues w/ plnkrs get attention quicker
 
-Pull requests more than welcome! If you're adding new features, it would be appreciated if you would provide some docs about the feature. 
-This can be done either by adding a card to our [Waffle.io board](https://waffle.io/lukemarsh/angular-here-maps), forking the website 
+Pull requests more than welcome! If you're adding new features, it would be appreciated if you would provide some docs about the feature.
+This can be done either by adding a card to our [Waffle.io board](https://waffle.io/lukemarsh/angular-here-maps), forking the website
 branch and issuing a PR with the updated documentation page, or by opening an issue for us to add the documentation to the site.
 
 ### Branching Scheme

app/development/app.js

@@ -10,6 +10,9 @@ angular
     appCode: 'WT6i13vXvx1JbFky92wqjg',
     libraries: 'ui,mapevents,pano',
     pixelRatio: 2,
-    pixelPerInch: 320
+    pixelPerInch: 320,
+    useHTTPS: true,
+    zoomMax: 16,
+    zoomMin: 13
   });
 });

app/development/controllers/MapController.js

@@ -7,18 +7,20 @@ angular.module('angular-here-maps-development')
     $scope.windowContent = 'DEF';
     $scope.map = {
       zoom : 14,
-      center : { 
+      center : {
         lng: -0.135559,
         lat: 51.513872
-      }
+      },
+      animation: true,
+      typeMap: 'normal' // normal || satellite
     };
     $scope.marker = {
       coordinates : {
-        lng: -0.14,
+        lng: -0.15,
         lat: 51.513872
       },
       icon: {
-        templateUrl: 'development/templates/icon test.html',
+        templateUrl: 'development/templates/icon.html',
         window: {
           template: 'hello'
         },
@@ -48,7 +50,7 @@ angular.module('angular-here-maps-development')
             lat: 51.513872
           },
           icon: {
-            template: '<div>new icon</div>'
+            template: '<div class="icon">new icon</div>'
           },
           id: 1
         },
@@ -71,4 +73,52 @@ angular.module('angular-here-maps-development')
         }
       }
     };
-  });
+
+    $scope.moveCenter = function(){
+      $scope.map.center = {
+        lng: $scope.map.center.lng + (Math.random() / 100),
+        lat: $scope.map.center.lat + (Math.random() / 100)
+      };
+    };
+
+    $scope.mapOnLoad = function(platform, map){
+      $scope.platform = platform;
+      $scope.mapObj = map;
+    };
+
+    /**
+    * Example Center Map on Tap
+    */
+    $scope.mapEventOnTap = function(event, platform, map){
+      console.log('mapEventOnTap event', event, platform, map);
+      var coord = map.screenToGeo(event.currentPointer.viewportX, event.currentPointer.viewportY);
+      $scope.$apply(function(){
+        $scope.map.center = coord;
+      });
+    };
+
+    $scope.mapEventOnDoubleTap = function(event, platform, map){
+      console.log('mapEventOnDoubleTap event', event, platform, map);
+    };
+
+    $scope.mapEventOnDragStart = function(event, platform, map){
+      console.log('mapEventOnDragStart event', event, platform, map);
+    };
+
+    $scope.mapEventOnDrag = function(event, platform, map){
+      console.log('mapEventOnDrag event', event, platform, map);
+    };
+
+    $scope.mapEventOnDragEnd = function(event, platform, map){
+      console.log('mapEventOnDragEnd event', event, platform, map);
+    };
+
+    $scope.plusZoom = function(){
+      $scope.map.zoom++;
+    };
+
+    $scope.minusZoom = function(){
+      $scope.map.zoom--;
+    };
+
+  });

app/development/templates/icon.html

@@ -1 +1 @@
-<div>this is the icon {{id}} {{number}}</div>
+<div class="icon">this is the icon {{id}} {{number}}</div>

app/index.html

@@ -15,24 +15,49 @@
     <style type="text/css">
     .here-map, body, html {
       width: 100%;
-      height: 100%;
+      height: 80%;
     }
     body {
       margin: 0;
       padding: 0;
     }
+    .icon{
+      background-color: #FFF;
+      border: 1px solid #FF0000;
+    }
     </style>
   </head>
   <body ng-controller="MapController">
 
     <!--[if lt IE 7]>
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
-
-    <map zoom="map.zoom" center="map.center">
+    <map
+      zoom="map.zoom"
+      center="map.center"
+      animation="map.animation"
+      on-load="mapOnLoad"
+      on-tap="mapEventOnTap"
+      on-double-tap="mapEventOnDoubleTap"
+      on-drag-start="mapEventOnDragStart"
+      on-drag-end="mapEventOnDragEnd"
+      on-drag="mapEventOnDrag"
+      type="map.typeMap">
       <marker coordinates="marker.coordinates" icon="marker.icon"></marker>
       <markers locations="markers.locations" icon="markers.icon"></markers>
     </map>
+    <h3>Custom Buttons</h3>
+
+    Map Type:
+    <button ng-click="map.typeMap='satellite'">Satellite</button>
+    <button ng-click="map.typeMap='normal'">Normal</button><br>
+
+    Zoom:
+    <button ng-click="plusZoom()">+</button>
+    <button ng-click="minusZoom()">-</button><br>
+
+    Move Center:
+    <button ng-click="moveCenter()">Random</button><br>
 
     <!-- bower:js -->
     <script src="bower_components/angular/angular.js"></script>