Tiling contiguous polygons in Google Maps

Question

I'm trying to draw a hexagonal grid in Google Maps. I've come up with a solution based off this answer which looks fine at higher zooms, but when zoomed further out I find that the classic "orange-peel" problem occurs: The hexagons no longer fit together like they should:

I'm using this rather cool geodesy library to calculate hexagon centers based on an ellipsoidal model (since a 2d model clearly doesn't work on a real-world map) but it's still looking pretty bad when zoomed out.

Preferably, I'd like to draw the hexagons in such a way that they are exactly the same shape and size on screen.

Here's the code I've been working with, also available as a Plunker here. I've tried calculating the vertices of each polygon using the same geodesy library that I'm using to calculate the polygon centers, but it still doesn't look right when zoomed out.

  var hexgrid = [];

  function initialize(){
    // Create the map.

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 51.5, lng: 0},
      scrollwheel: true,
      zoom: 8
    });


    // This listener waits until the map is done zooming or panning,
    // Then clears all existing polygons and re-draws them.
    map.addListener('idle', function() {

        // Figure out how big our grid needs to be
        var spherical = google.maps.geometry.spherical, 
        bounds = map.getBounds(), 
        cor1 = bounds.getNorthEast(), 
        cor2 = bounds.getSouthWest(), 
        cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), 
        cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), 
        diagonal = spherical.computeDistanceBetween(cor1,cor2), 
        gridSize = diagonal / 20;

      // Determine the actual distance between tiles
        var d = 2 * gridSize * Math.cos(Math.PI / 6);

        // Clear all the old tiles
        hexgrid.forEach(function(hexagon){
            hexagon.setMap(null);
        });
        hexgrid = [];

        // Determine where the upper left-hand corner is.
            bounds = map.getBounds();
            ne = bounds.getNorthEast();
            sw = bounds.getSouthWest();

            var point = new LatLon(ne.lat(), sw.lng());

            // ... Until we're at the bottom of the screen...
        while(point.lat > sw.lat()){
        // Keep this so that we know where to return to when we're done moving across to the right
            leftPoint =  new LatLon(point.lat, point.lon).destinationPoint(d, 150).destinationPoint(d, 210).destinationPoint(d, 270).destinationPoint(d, 90)

            step = 1;

            while(point.lon < ne.lng()){
              // Use the modulus of step to determing if we want to angle up or down
                if (step % 2 === 0){
                    point = new LatLon(point.lat, point.lon).destinationPoint(d, 30);
                } else {
                    point = new LatLon(point.lat, point.lon).destinationPoint(d, 150);
                }

                step++; // Increment the step

                // Draw the hexagon!
                // First, come up with the corners.
                vertices = [];
                for(v = 1; v < 7; v++){
                    angle = v * 60;
                    vertex = point.destinationPoint(d / Math.sqrt(3), angle);
                    vertices.push({lat: vertex.lat, lng: vertex.lon});
                }

          // Create the shape
                hexagon = new google.maps.Polygon({
                    map: map,
                    paths: vertices,
                    strokeColor: '#090',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#090',
                    fillOpacity: 0.1,
                    draggable: false,
                });

                // Push it to hexgrid so we can delete it later
                hexgrid.push(hexagon)
            }

            // Return to the left.
            point = leftPoint;
        }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

Tiling contiguous polygons in Google Maps

Answers (1)

Related Questions