Created
March 1, 2016 16:25
-
-
Save dvas0004/fd541a0502528ebfb825 to your computer and use it in GitHub Desktop.
polygon tiling google maps example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
<meta charset="utf-8"> | |
<title>Circles</title> | |
<style> | |
html, body { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
#map { | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div><hr></div> | |
<div id="map"></div> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> | |
<script> | |
var number_of_poly = 0; | |
function initialize() { | |
var mapOptions = { | |
zoom: 14 | |
}; | |
var map = new google.maps.Map(document.getElementById('map'),mapOptions); | |
//35.918981, 14.489933 | |
var startPosition = new google.maps.LatLng(35.918981, 14.489933); //Sliema, MT | |
var radius = 50; //radius in meters | |
drawHorizontalHexagonGrid(map,startPosition,radius,24,9); | |
map.setCenter(startPosition); | |
} | |
function SE_heading(startPosition, radius){ | |
var curPos = startPosition; | |
var width = radius * 2 * Math.sqrt(3)/2 ; | |
var new_pos = google.maps.geometry.spherical.computeOffset(curPos, width,135); | |
return new_pos; | |
} | |
function S_heading(startPosition, radius){ | |
var curPos = startPosition; | |
var width = radius * 2 * Math.sqrt(3)/2 ; | |
var new_pos = google.maps.geometry.spherical.computeOffset(curPos, width,180); | |
return new_pos; | |
} | |
function drawHorizontalHexagonGrid(map,startPosition,radius,count, row_count){ | |
var curPos = startPosition; | |
var width = radius * 2 * Math.sqrt(3)/2 ; | |
for(var j = 0;j < row_count; j++){ | |
for(var i = 0;i < count; i++){ | |
displayLocationElevation(map,curPos,radius); | |
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,90); | |
} | |
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,180); | |
curPos = google.maps.geometry.spherical.computeOffset(curPos, width*1.5,270); | |
for(var i = 0;i < count; i++){ | |
displayLocationElevation(map,curPos,radius); | |
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,270); | |
} | |
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,180); | |
curPos = google.maps.geometry.spherical.computeOffset(curPos, width*1.5,90) | |
} | |
} | |
function displayLocationElevation(map,position,radius) { | |
var elevator = new google.maps.ElevationService; | |
// Initiate the location request | |
elevator.getElevationForLocations({ | |
'locations': [position] | |
}, function(results, status) { | |
if (status === google.maps.ElevationStatus.OK) { | |
// Retrieve the first result | |
if (results[0].elevation > 8) { | |
number_of_poly += 1; | |
//alert (results[0].elevation + ' meters.'); | |
var coordinates = []; | |
for(var angle= 0;angle < 360; angle+=60) { | |
coordinates.push(google.maps.geometry.spherical.computeOffset(position, radius, angle)); | |
} | |
// Construct the polygon. | |
var polygon = new google.maps.Polygon({ | |
paths: coordinates, | |
strokeColor: '#FF0000', | |
strokeOpacity: 0.8, | |
strokeWeight: 2, | |
fillColor: '#FF0000', | |
fillOpacity: 0.35 | |
}); | |
polygon.setMap(map); | |
map.setCenter(position); | |
} | |
} | |
}); | |
} | |
function drawHorizontalHexagon(map,position,radius){ | |
var coordinates = []; | |
for(var angle= 0;angle < 360; angle+=60) { | |
coordinates.push(google.maps.geometry.spherical.computeOffset(position, radius, angle)); | |
} | |
// Construct the polygon. | |
var polygon = new google.maps.Polygon({ | |
paths: coordinates, | |
strokeColor: '#FF0000', | |
strokeOpacity: 0.8, | |
strokeWeight: 2, | |
fillColor: '#FF0000', | |
fillOpacity: 0.35 | |
}); | |
polygon.setMap(map); | |
map.setCenter(position); | |
} | |
</script> | |
<script async defer | |
src="https://maps.googleapis.com/maps/api/js?keyYOUR_API_KEY&callback=initialize&libraries=geometry"> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment