-
-
Save kristiandelay/fc613105e6a574cc69027369e292ee53 to your computer and use it in GitHub Desktop.
polygon tiling google maps example
This file contains hidden or 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