code.nosvamosdetapas.com

Some days ago, Palako wrote an interesting post about drawing polygons with your mouse so we’re able to change the size of our “typical” circle. I’ve developed another way to do this: the circle has an icon which can modify its radius using the drag’n'drop feature of the GMarker.

When the circle is drawn, we put a marker on the circumference setting listeners for drag and drop events. But, we have the first problem because we have the central point of the circle, defined by its longitude and latitude, and the radius in kilometers. So, we need to know a point of the circumference in longitude and latitude:

var p1 = new GLatLng(actualPoint.lat()+0.1, actualPoint.lng());
var p2 = new GLatLng(actualPoint.lat(), actualPoint.lng()+0.1);
var latConv = actualPoint.distanceFrom(p1)/100;
var lngConv = actualPoint.distanceFrom(p2)/100;
var pint = new GLatLng(actualPoint.lat() + (newRadius/latConv *
  Math.cos(0 * Math.PI/180)), actualPoint.lng() + 
  (newRadius/lngConv * Math.sin(0 * Math.PI/180)));

So, we put the marker in that point adding the dragstart (for drag events) and the dragend (for drop events) listeners and they set a flag if the user is dragging the marker.

var markerOptions = { draggable: true };

marker=new GMarker(pint,markerOptions);
GEvent.addListener(marker, "dragstart", function() {
	document.getElementById("dragstart").innerHTML = "Drag start Coords: "
   + marker.getPoint().lat() + ", "+marker.getPoint().lng();
	drag=true;
});
GEvent.addListener(marker, "dragend", function() {
	checkDraggedMark();
	drag=false;
});
map.addOverlay(marker);

If the dragend listener is called or this flag is active and moving the marker (dragging the marker) the circle and contained PoIs are updated:

if (drag==true) {
  var newRadius=(actualPoint.distanceFrom(marker.getPoint())/1000);
  document.getElementById("dragend").innerHTML = "Radius: "+newRadius+" km";
  if (overlay)
   map.removeOverlay(overlay);
  overlay = drawCircle(actualPoint, newRadius, 30);
  showSelectedPois();
}

Of course, you can try this example or download the code!

Bookmark It