double click coordinate example

http://angularjs.org/

by anushamc

HTML

<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.css">
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="https://rawgit.com/tombatossals/angular-openlayers-directive/latest/dist/angular-openlayers-directive.min.js"></script>
<body ng-controller="DemoController">
  <openlayers ol-center="london" ol-defaults="defaults" height="400"></openlayers>
  <h1>Events defaults example</h1>
  <p>In this example we propagate two events in our map, the mouse position and the mouse click.</p>
  <p>Set desired projection:
    <input type="button" ng-click="projection='EPSG:3857'" value="EPSG:3857" />
    <input type="button" ng-click="projection='EPSG:4326'" value="EPSG:4326" />
  </p>
  <h3>Mouse position</h3>
  <pre ng-bind="mouseposition | json"></pre>
  <h3>Mouse click position</h3>
  <pre ng-bind="mouseclickposition | json"></pre>
  <h3>Mouse doubleclick position</h3>
  <pre ng-bind="mousedoubleclickposition | json"></pre>
</body>

JavaScript

var app = angular.module('demoapp', ['openlayers-directive']);
app.controller('DemoController', ['$scope', function($scope) {
  angular.extend($scope, {
    london: {
      lat: 51.505,
      lon: -0.09,
      zoom: 4
    },
    defaults: {
      events: {
        map: ['singleclick', 'pointermove', 'dblclick']
      }
    },
    mouseposition: {},
    mouseclickposition: {},
    mousedoubleclickposition: {},
    projection: 'EPSG:3857'
  });

  $scope.$on('openlayers.map.pointermove', function(event, data) {
    $scope.$apply(function() {
      if ($scope.projection === data.projection) {
        $scope.mouseposition = data.coord;
      } else {
        var p = ol.proj.transform([data.coord[0], data.coord[1]], data.projection, $scope.projection);
        $scope.mouseposition = {
          lat: p[1],
          lon: p[0],
          projection: $scope.projection
        }
      }
    });
  });

  $scope.$on('openlayers.map.singleclick', function(event, data) {
    $scope.$apply(function() {
      if ($scope.projection === data.projection) {
        $scope.mouseclickposition = data.coord;
      } else {
        var p = ol.proj.transform([data.coord[0], data.coord[1]], data.projection, $scope.projection);
        $scope.mouseclickposition = {
          lat: p[1],
          lon: p[0],
          projection: $scope.projection
        }
      }
    });
  });


  $scope.$on('openlayers.map.dblclick', function(event, data) {
    $scope.$apply(function() {
      if ($scope.projection === data.projection) {
        $scope.mousedoubleclickposition = data.coord;
      } else {
        var p = ol.proj.transform([data.coord[0], data.coord[1]], data.projection, $scope.projection);
        $scope.mousedoubleclickposition = {
          lat: p[1],
          lon: p[0],
          projection: $scope.projection
        }
      }
    });
  });

}]);