105 lines
4.0 KiB
HTML
Executable File
105 lines
4.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html ng-app="myApp">
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
|
|
<!-- build:js scripts/ng-map.min.js -->
|
|
<script src="../app/scripts/app.js"></script>
|
|
<script src="../app/scripts/directives/map_controller.js"></script>
|
|
<script src="../app/scripts/directives/map.js"></script>
|
|
<script src="../app/scripts/directives/marker.js"></script>
|
|
<script src="../app/scripts/directives/shape.js"></script>
|
|
<script src="../app/scripts/directives/info-window.js"></script>
|
|
<script src="../app/scripts/services/geo_coder.js"></script>
|
|
<script src="../app/scripts/services/navigator_geolocation.js"></script>
|
|
<script src="../app/scripts/services/attr2_options.js"></script>
|
|
<!-- endbuild -->
|
|
<script>
|
|
var app = angular.module('myApp', ['ngMap']);
|
|
app.controller('BasicCtrl1', function($scope, $compile) {
|
|
var TILE_SIZE = 256;
|
|
|
|
function bound(value, opt_min, opt_max) {
|
|
if (opt_min != null) value = Math.max(value, opt_min);
|
|
if (opt_max != null) value = Math.min(value, opt_max);
|
|
return value;
|
|
}
|
|
|
|
function degreesToRadians(deg) {
|
|
return deg * (Math.PI / 180);
|
|
}
|
|
|
|
function radiansToDegrees(rad) {
|
|
return rad / (Math.PI / 180);
|
|
}
|
|
|
|
function MercatorProjection() {
|
|
this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2);
|
|
this.pixelsPerLonDegree_ = TILE_SIZE / 360;
|
|
this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
|
|
}
|
|
|
|
MercatorProjection.prototype.fromLatLngToPoint = function(latLng,
|
|
opt_point) {
|
|
var me = this;
|
|
var point = opt_point || new google.maps.Point(0, 0);
|
|
var origin = me.pixelOrigin_;
|
|
|
|
point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
|
|
|
|
// Truncating to 0.9999 effectively limits latitude to 89.189. This is
|
|
// about a third of a tile past the edge of the world tile.
|
|
var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999,
|
|
0.9999);
|
|
point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *
|
|
-me.pixelsPerLonRadian_;
|
|
return point;
|
|
};
|
|
|
|
MercatorProjection.prototype.fromPointToLatLng = function(point) {
|
|
var me = this;
|
|
var origin = me.pixelOrigin_;
|
|
var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
|
|
var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
|
|
var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) -
|
|
Math.PI / 2);
|
|
return new google.maps.LatLng(lat, lng);
|
|
};
|
|
|
|
$scope.$on('mapInitialized', function(event, map) {
|
|
var numTiles = 1 << map.getZoom();
|
|
var projection = new MercatorProjection();
|
|
$scope.chicago = map.getCenter();
|
|
$scope.map = map;
|
|
$scope.worldCoordinate = projection.fromLatLngToPoint($scope.chicago);
|
|
$scope.pixelCoordinate = new google.maps.Point(
|
|
$scope.worldCoordinate.x * numTiles,
|
|
$scope.worldCoordinate.y * numTiles);
|
|
$scope.tileCoordinate = new google.maps.Point(
|
|
Math.floor($scope.pixelCoordinate.x / TILE_SIZE),
|
|
Math.floor($scope.pixelCoordinate.y / TILE_SIZE));
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div ng-controller="BasicCtrl1">
|
|
Showing static coordinates of Chicago
|
|
<br/>
|
|
<map center="41.850033,-87.6500523" zoom="3">
|
|
<info-window id="1" position="41.850033,-87.6500523" visible="true">
|
|
<div ng-non-bindable>
|
|
Chicago, IL<br/>
|
|
LatLng: {{chicago.lat()}}, {{chicago.lng()}}, <br/>
|
|
World Coordinate: {{worldCoordinate.x}}, {{worldCoordinate.y}}, <br/>
|
|
Pixel Coordinate: {{pixelCoordinate.x}}, {{pixelCoordinate.y}}, <br/>
|
|
Tile Coordinate: {{tileCoordinate.x}}, {{tileCoordinate.y}} at Zoom Level {{map.getZoom()}}
|
|
</div>
|
|
</info-window>
|
|
</map>
|
|
</div>
|
|
</body>
|
|
</html>
|