Skip to content

Instantly share code, notes, and snippets.

@daviosa
Created August 28, 2013 23:00
Show Gist options
  • Save daviosa/6372468 to your computer and use it in GitHub Desktop.
Save daviosa/6372468 to your computer and use it in GitHub Desktop.
Using the Javascript-Voronoi (https://github.com/daviosa/Javascript-Voronoi) to draw voronoi edges on google maps. It draw lines to overlap your screen size. If the bounds of the map change, recalculate is needed.
var voronoi = new Voronoi();
var bbox = {xl:-window.innerWidth,xr:window.innerWidth*2,yt:-window.innerHeight,yb:window.innerHeight*2};
var voronoiLines = [];
var sites = [];
function resetVoronoi(){
for(var vi in voronoiLines){
var line = voronoiLines[vi];
line.setMap(null);
}
voronoiLines = [];
sites = [];
}
function calculateVoronoiGMaps(markersArray,map,overlay){
resetVoronoi();
for(var i in markersArray){
var marker = markersArray[i];
var p = fromLatLngToPoint(marker.getPosition(),overlay);
sites.push({x:p.x, y:p.y});
}
var diagram = voronoi.compute(sites, bbox);
for(var j in diagram.cells){
var edges = [];
var cell = diagram.cells[j];
for(var hi in cell.halfedges){
var edge = cell.halfedges[hi];
var startPoint = fromPointToLatLng(new google.maps.Point(edge.getStartpoint().x,edge.getStartpoint().y),overlay);
var endPoint = fromPointToLatLng(new google.maps.Point(edge.getEndpoint().x,edge.getEndpoint().y),overlay);
var edgeLine = [startPoint,endPoint];
var lineMap = new google.maps.Polyline({
path: edgeLine,
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 2
});
lineMap.setMap(map);
voronoiLines.push(lineMap);
}
}
}
function fromLatLngToPoint(latLng,overlay) {
var p = overlay.getProjection().fromLatLngToContainerPixel(latLng);
return p;
}
function fromPointToLatLng(point,overlay) {
var coordinates = overlay.getProjection().fromContainerPixelToLatLng(point);
return coordinates;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment