Last active
August 27, 2018 18:52
-
-
Save razzius/71bcf613c038371766a256900ff84967 to your computer and use it in GitHub Desktop.
In google maps, drag one polygon, synchronizing another with it
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>Draggable Polygons</title> | |
<style> | |
/* Always set the map height explicitly to define the size of the div | |
* element that contains the map. */ | |
#map { | |
height: 100%; | |
} | |
/* Optional: Makes the sample page fill the window. */ | |
html, body { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
// This example creates draggable triangles on the map. | |
// Note also that the red triangle is geodesic, so its shape changes | |
// as you drag it north or south. | |
function initMap() { | |
var map = new google.maps.Map(document.getElementById('map'), { | |
zoom: 5, | |
center: {lat: 24.886, lng: -70.268}, | |
mapTypeId: 'terrain' | |
}); | |
var blueCoords = [ | |
{lat: 25.774, lng: -60.190}, | |
{lat: 18.466, lng: -46.118}, | |
{lat: 32.321, lng: -44.757} | |
]; | |
var redCoords = [ | |
{lat: 25.774, lng: -80.190}, | |
{lat: 18.466, lng: -66.118}, | |
{lat: 32.321, lng: -64.757} | |
]; | |
// Construct a draggable red triangle with geodesic set to true. | |
window.red = new google.maps.Polygon({ | |
map: map, | |
paths: redCoords, | |
strokeColor: '#FF0000', | |
strokeOpacity: 0.8, | |
strokeWeight: 2, | |
fillColor: '#FF0000', | |
fillOpacity: 0.35, | |
draggable: true, | |
geodesic: true | |
}); | |
// Construct a draggable blue triangle with geodesic set to false. | |
blue = new google.maps.Polygon({ | |
map: map, | |
paths: blueCoords, | |
strokeColor: '#0000FF', | |
strokeOpacity: 0.8, | |
strokeWeight: 2, | |
fillColor: '#0000FF', | |
fillOpacity: 0.35, | |
draggable: true, | |
geodesic: false | |
}); | |
function getPolygonCenter(polygon) { | |
var bounds = new google.maps.LatLngBounds(); | |
polygon.getPath().getArray().forEach(p => bounds.extend(p)) | |
return bounds.getCenter() | |
} | |
function movePolygon(polygon, newCenter) { | |
const center = getPolygonCenter(polygon) | |
const dlat = newCenter.lat() - center.lat() | |
const dlng = newCenter.lng() - center.lng() | |
const points = polygon.getPath().getArray() | |
const updated = points.map(point => new google.maps.LatLng(point.lat() + dlat, point.lng() + dlng)) | |
polygon.setPath(updated) | |
} | |
red.addListener('dragstart', () => { | |
start = getPolygonCenter(red) | |
blueCenter = getPolygonCenter(blue) | |
}) | |
red.addListener('drag', () => { | |
const center = getPolygonCenter(red) | |
console.log(start.lng(), start.lat(), center.lng(), center.lat()) | |
const dlat = center.lat() - start.lat() | |
const dlng = center.lng() - start.lng() | |
const newlat = blueCenter.lat() + dlat | |
const newlng = blueCenter.lng() + dlng | |
const newCenter = new google.maps.LatLng(newlat, newlng) | |
movePolygon(blue, newCenter) | |
}) | |
} | |
</script> | |
<script async defer | |
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAy-jGmWYsIo0ufT8BsC5z1KBPKd8sXGHA&callback=initMap"> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment