code.nosvamosdetapas.com

Again with google maps, now we are going to talk about the bounding box problem.

The google api provides the function containsBounds:

The problem is very simple, we wanna check points of interest inside the polygon, not the rectangular area that includes it.

We have solved this problem learning how to extend the GPolygon class with a method Contains that does what we want. You can see more examples of extending this class from this link.

Here is the code we used:

GPolygon.prototype.contains = function(point) { var j=0;

var oddNodes = false;

var x = point.lng();

var y = point.lat();

for (var i=0; i < this.getVertexCount(); i++) {

   j++;

   if (j == this.getVertexCount()) {j = 0;}   if (((this.getVertex(i).lat() < y)
         && (this.getVertex(j).lat() >= y))

         || ((this.getVertex(j).lat() < y) && (this.getVertex(i).lat() >= y))) {

              if ( this.getVertex(i).lng() + (y - this.getVertex(i).lat())

                   / (this.getVertex(j).lat()-this.getVertex(i).lat())

                  * (this.getVertex(j).lng() - this.getVertex(i).lng())>x){>

                       oddNodes = !oddNodes;

              }

    }

}

return oddNodes;

}

Of course you can test this code here and download it here.

Bookmark It

Hi all,

this is the first example from a serie of tests written to probe the googlemaps capabilities.

This example is quite simple, to draw a circunference in the map, with a center point and a radius:

Well, first of all, the google maps api does not draw circles, so, how is it that we see that circle on the map?

We are using here the solution provided by Esa from Helsinki. He has written a function that draws a polygon simulating a circunference, you can specify the number of polygon edges, better accuracy with more edges. Here is code:

function drawCircle(center, radius, nodes, liColor,
                           liWidth, liOpa, fillColor, fillOpa){

//http://esa.ilmari.googlepages.com/circle.htm

//calculating km/degree

var latConv = center.distanceFrom(new GLatLng(center.lat()
                                               +0.1, center.lng()))/100;

var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng()
                                               +0.1))/100;

//Loop

var points = [];

var step = parseInt(360/nodes)||10;

for(var i=0; i<=360; i+=step) {

  var pint = new GLatLng(center.lat() + (radius/latConv *
                   Math.cos(i * Math.PI/180)), center.lng() +
                   (radius/lngConv * Math.sin(i * Math.PI/180)));

  points.push(pint);

  //bounds.extend(pint); //this is for fit function

}

fillColor = fillColor||liColor||"#2b82bd";

liWidth = liWidth||2;

var poly = new GPolygon(points,liColor,liWidth,liOpa,fillColor,fillOpa);

map.addOverlay(poly);

return poly;

}

Now adding some more functionality to the example from Esa, let´s draw a animation of an circunference growing until it reaches the whole area.

function drawAnimation(distance){

 timerStep = 0;

 timerId = setTimeout("drawAnimationAux("+distance+")",100);

}

function drawAnimationAux(distance){

 if (overlay)

   map.removeOverlay(overlay);

 var newRadius = distance/10.0 * (timerStep +1);

 overlay = drawCircle(actualPoint, newRadius, 30);

 timerStep++;

 if(timerStep<10)

    timerId = setTimeout("drawAnimationAux("+distance+")",100);

}

You can see this example working here, or download it.

Bookmark It