Объединение данных в гексагональную сетку в Google Maps

Я пытаюсь отобразить геопространственные данные в шестиугольной сетке на карте Google.

Для этого задан размер шестиугольной плитки.X Мне нужно уметь конвертировать ({lat, lng}) координаты в ({lat, lng}) центры плиток с шестигранной сеткой, которые их содержат.

В конце я хотел бы иметь возможность отображать данные на карте Google следующим образом:

Кто-нибудь знает, как это делается?

Я пытался портировать этот скрипт Python шестиугольника биннинга,binner.py в Javascript, но, похоже, он не работает должным образом - выходные значения все те же, что и входные.

Ради этого примера мне все равно, если в одном месте есть несколько полигонов, мне просто нужно выяснить, как связать их в правильные координаты.

Код ниже, (Плункер здесь!)

var map;
var pointCount = 0;
var locations = [];
var gridWidth = 200000; // hex tile size in meters
var bounds;

var places = [
  [44.13, -69.51],
  [45.23, -67.42],
  [46.33, -66.53],
  [44.43, -65.24],
  [46.53, -64.15],
  [44.63, -63.06],
  [44.73, -62.17],
  [43.83, -63.28],
  [44.93, -64.39],
  [44.13, -65.41],
  [41.23, -66.52],
  [44.33, -67.63],
  [42.43, -68.74],
  [44.53, -69.65],
  [40.63, -70.97],
]

var SQRT3 = 1.73205080756887729352744634150587236;

$(document).ready(function(){

  bounds = new google.maps.LatLngBounds();

  map = new google.maps.Map(document.getElementById("map_canvas"), {center: {lat: 0, lng: 0}, zoom: 2});

  // Adding a marker just so we can visualize where the actual data points are.
  // In the end, we want to see the hex tile that contain them
  places.forEach(function(place, p){

    latlng = new google.maps.LatLng({lat: place[0], lng: place[1]});
    marker = new google.maps.Marker({position: latlng, map: map})

    // Fitting to bounds so the map is zoomed to the right place
    bounds.extend(latlng);
  });

  map.fitBounds(bounds);

  // Now, we draw our hexagons! (or try to)
  locations = makeBins(places);

  locations.forEach(function(place, p){
    drawHorizontalHexagon(map, place, gridWidth);
  })


});


  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,
        position: position,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        geodesic: true
    });
    polygon.setMap(map);
}

// Below is my attempt at porting binner.py to Javascript.
// Source: https://github.com/coryfoo/hexbins/blob/master/hexbin/binner.py

function distance(x1, y1, x2, y2){
  console.log(x1, y1, x2, y2);
  result =  Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
  console.log("Distance: ", result);
  return result;
}

function nearestCenterPoint(value, scale){
    div = (value / (scale / 2));
    mod = value % (scale / 2);

    if(div % 2 == 1){
      increment = 1;
    } else {
      increment = 0;
    }

    rounded = (scale / 2) * (div + increment);

    if(div % 2 === 0){
      increment = 1;
    } else {
      increment = 0;
    }

    rounded_scaled = (scale / 2) * (div + increment)
    result = [rounded, rounded_scaled];

    return result;
}

function makeBins(data){
  bins = [];

  data.forEach(function(place, p){
    x = place[0];
    y = place[1];

    console.log("Original location:", x, y);

    px_nearest = nearestCenterPoint(x, gridWidth);

    py_nearest = nearestCenterPoint(y, gridWidth * SQRT3);

    z1 = distance(x, y, px_nearest[0], py_nearest[0]);

    z2 = distance(x, y, px_nearest[1], py_nearest[1]);

    console.log(z1, z2);

    if(z1 > z2){
      bin = new google.maps.LatLng({lat: px_nearest[0], lng: py_nearest[0]});
       console.log("Final location:", px_nearest[0], py_nearest[0]);
    } else {
      bin = new google.maps.LatLng({lat: px_nearest[1], lng: py_nearest[1]});
       console.log("Final location:", px_nearest[1], py_nearest[1]);
    }

    bins.push(bin);

  })
  return bins;
}   

Ответы на вопрос(1)

Ваш ответ на вопрос