javascript – How to distribute points evenly within a polygon?

Question:

Using the Google Maps API , I'm creating some random dots (custom markers) inside a polygon. At first I created a function in which I go through a loop of 100 positions and randomly distribute the points inside the polygon. If the generated coordinate falls outside the polygon, it is not even drawn on the map, meaning that it does not always generate 100 points within it. See the magic happening:

function initialize() {
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
    new google.maps.LatLng(-23.554548, -46.607911),
    new google.maps.LatLng(-23.556043, -46.595058),
    new google.maps.LatLng(-23.564403, -46.593942),
    new google.maps.LatLng(-23.567884, -46.604757)
  ];


  for (i = 0; i < polygonCoords.length; i++) {
    bounds.extend(polygonCoords[i]);
  }

  var map = new google.maps.Map(document.getElementById("map_canvas2"), {
    zoom: 14,
    center: bounds.getCenter(),
    mapTypeId: "roadmap"
  });

  var sp_mooca = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#000000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#000000',
    fillOpacity: 0.2
  });
  sp_mooca.setMap(map);

  gerarPontosAleatoriosNoPoligono(sp_mooca, map)
}

function gerarPontosAleatoriosNoPoligono(poli, map) {

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < poli.getPath().getLength(); i++) {
    bounds.extend(poli.getPath().getAt(i));
  }
  var sw = bounds.getSouthWest();
  var ne = bounds.getNorthEast();

  for (var i = 0; i <= 100; i++) {

    var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
    var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
    var point = new google.maps.LatLng(ptLat, ptLng);

    if (google.maps.geometry.poly.containsLocation(point, poli)) {

      var marker = new google.maps.Marker({
        position: point,
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: "#0000ff",
          fillOpacity: 0.8,
          strokeColor: 'white',
          strokeWeight: .5,
          scale: 4
        }
      });
    }
  }
}
#map {
  height: 100%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

<body onload="initialize()">
  <div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>

However, in reality I would like these points to be distributed evenly, evenly spaced, within this polygon, rather than randomly, like 50 meters apart. How could I do this? How can I distribute points (markers) evenly within a polygon?

Answer:

You can use the while function, instead of using the for , looking like this:

var contador = 0;

while(contador <= 100){

    var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
    var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
    var point = new google.maps.LatLng(ptLat, ptLng);

    if (google.maps.geometry.poly.containsLocation(point, poli)) {

      contador++;

      var marker = new google.maps.Marker({
        position: point,
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: "#0000ff",
          fillOpacity: 0.8,
          strokeColor: 'white',
          strokeWeight: .5,
          scale: 4
        }
      });
    }
  }

This way he will repeat the while until reaching 100 and will only be added one more to the counter variable if he enters the if and creates a marker.

Post Views: 10
Scroll to Top