Static 2GIS maps API

jackkum · Jul 28, 2013 · 58437eb · 58437eb
1 parent 1336fcc
commit 58437eb
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,2 @@
 bower_components
 node_modules
-build
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 [Angular 2GIS Maps](http://burivuhster.github.io/angular-dg-maps)
 ===============
 
-Angular-dg-maps is a directive that enables seamless integration of [2GIS Maps API](http://api.2gis.ru/doc/maps/info/) into your [AngularJS](https://github.com/angular/angular.js) app.
+Angular-dg-maps is a set of directives that enables seamless integration of [2GIS Maps API](http://api.2gis.ru/doc/maps/info/) into your [AngularJS](https://github.com/angular/angular.js) app.
 
 Check out docs here: http://burivuhster.github.io/angular-dg-maps
 
@@ -35,3 +35,15 @@ Now, include the `<dg-map>` element in your template:
 <dg-map latitude="lat" longitude="lon" zoom="zoom" style="height: 500px; width: 500px;"></dg-map>
 ```
 
+## Static Maps API
+You can also use [Static 2GIS Maps API](http://api.2gis.ru/doc/maps/static/) in your angular application.
+To insert static map into your page simply include the `dg-static-map` element in your template:
+```html
+<dg-static-map
+        latitude="55.058883"
+        longitude="82.911182"
+        zoom="15"
+        width="500"
+        height="500"></dg-static-map>
+```
+Please note, all attributes above are required.
diff --git a/build/angular-dg-maps.min.js b/build/angular-dg-maps.min.js
diff --git a/example/example.html b/example/example.html
@@ -15,6 +15,13 @@
         latitude="lat"
         longitude="lon"
         zoom="zoom"
-        style="height: 700px; "></dg-map>
+        style="height: 500px; "></dg-map>
+<br/>
+<dg-static-map
+        latitude="55.058883"
+        longitude="82.911182"
+        zoom="15"
+        width="500"
+        height="500"></dg-static-map>
 </body>
 </html>
diff --git a/src/angular-dg-maps.js b/src/angular-dg-maps.js
@@ -16,13 +16,14 @@
             template: "<div class='angular-dg-map' ng-transclude></div>",
             replace: true,
             scope: {
-                latitude: "=latitude", // required
-                longitude: "=longitude", // required
-                zoom: "=zoom", // required
-                markers: "=markers", // optional
-                zoomControls: "=zoomControls",
-                fullscreenControls: "=fullscreenControls",
-                fitToMarkers: "=fitToMarkers"
+                latitude: "=", // required
+                longitude: "=", // required
+                zoom: "=", // required
+                markers: "=", // optional
+                zoomControls: "=",
+                fullscreenControls: "=",
+                fitToMarkers: "=",
+                draggable: "="
             },
             controller: controller,
             link: function(scope, element, attrs, ctrl) {
@@ -60,6 +61,10 @@
                     _m.fullscreen.disable();
                 }
 
+                if(angular.isDefined(scope.draggable) && !scope.draggable) {
+                    _m.disableDragging();
+                }
+
                 // Add marker utility function
                 scope.addMarker = function(markerConfig) {
                     if (markerConfig.latitude && markerConfig.longitude) {
@@ -80,10 +85,12 @@
                         if (markerConfig.draggable) {
                             markerDGConfig.dragStopCallback = function(evt) {
                                 var pos = evt.getPosition();
-                                scope.$apply(function() {
-                                    markerConfig.latitude = pos.lat;
-                                    markerConfig.longitude = pos.lon;
-                                });
+                                if(pos) {
+                                    scope.$apply(function() {
+                                        markerConfig.latitude = pos.lat;
+                                        markerConfig.longitude = pos.lon;
+                                    });
+                                }
 
                                 if (markerConfig.dragStop && typeof markerConfig.dragStop === "function") {
                                     markerConfig.dragStop.apply(this, arguments);
@@ -127,7 +134,7 @@
 
                 // Update map zoom when it changes
                 scope.$watch("zoom", function(newValue, oldValue) {
-                    if (newValue === oldValue) {
+                    if (newValue === oldValue || dragging) {
                         return;
                     }
 
@@ -161,6 +168,10 @@
                 });
 
                 scope.$watch('markers', function(markers) {
+                    if(dragging) {
+                        return;
+                    }
+
                     if(markers) {
                         _m.markers.removeAll();
                         angular.forEach(scope.markers, function(markerConfig) {
@@ -181,25 +192,22 @@
                             scope.zoom = evt.getZoom();
                         });
                     } else {
-                        scope.$eval(function() {
-                            scope.zoom = evt.getZoom();
-                        });
+                        scope.zoom = evt.getZoom();
                     }
                 });
 
                 _m.addEventListener(_m.getContainerId(), 'DgMapMove', function(evt) {
-                    if (!$rootScope.$root.$$phase) {
-                        scope.$apply(function() {
-                            var pos = evt.getCenter();
+                    var pos = evt.getCenter();
+                    if(pos) {
+                        if (!$rootScope.$root.$$phase) {
+                            scope.$apply(function() {
+                                scope.latitude = pos.lat;
+                                scope.longitude = pos.lon;
+                            });
+                        } else {
                             scope.latitude = pos.lat;
                             scope.longitude = pos.lon;
-                        });
-                    } else {
-                        scope.$eval(function() {
-                            var pos = evt.getCenter();
-                            scope.latitude = pos.lat;
-                            scope.longitude = pos.lon;
-                        });
+                        }
                     }
                 });
 
@@ -215,6 +223,53 @@
 
     }]);
 
+    dgMapsModule.directive('dgStaticMap', ['$log', function($log) {
+        return {
+            restrict: "ECA",
+            priority: 100,
+            template: "<img class='angular-dg-static-map' ng-src='{{ mapSrc }}'>",
+            replace: true,
+            scope: {
+                latitude: "=", // required
+                longitude: "=", // required
+                zoom: "=", // required
+                width: "=", //required
+                height: "=", // required
+                markers: "=" // optional
+            },
+            link: function(scope, element, attrs, ctrl) {
+                if(!angular.isDefined(scope.latitude)) {
+                    $log.error("angular-dg-static-maps: map latitude property not set");
+                    return;
+                }
+
+                if(!angular.isDefined(scope.longitude)) {
+                    $log.error("angular-dg-static-maps: map longitude property not set");
+                    return;
+                }
+
+                if(!angular.isDefined(scope.markers) && !angular.isDefined(scope.zoom)) {
+                    $log.error("angular-dg-static-maps: map zoom property not set");
+                    return;
+                }
+
+                if(!angular.isDefined(scope.width) || !angular.isDefined(scope.height)) {
+                    $log.error("angular-dg-static-maps: width and height properties should be set");
+                    return;
+                }
+
+                angular.element(element).addClass("angular-dg-static-map");
+
+                var src = 'http://static.maps.api.2gis.ru/1.0?';
+                src += 'center=' + scope.longitude + ',' + scope.latitude;
+                src += '&zoom=' + scope.zoom;
+                src += '&size=' + scope.width + ',' + scope.height;
+
+                scope.mapSrc = src;
+            }
+        };
+    }]);
+
     dgMapsModule.service('geocoder', function() {
         return {
             get: function(query, options) {