Wasn't it mahmudmia who wrote:
>
>I saw this property search sample in web -
>
>http://listings.myrealpage.com/wps/recip/9846/
>
>I am interested in the selection methods (rectangle, circle & poltgon)
>at the right side of the map control. I looked in this newsgroup and
>found dragzoom, selection zoom box etc...but could not find one which
>is nearly as complete as this one. Also, I could not get to find the
>javascript page where they implemented these methods (so I get to
>learn).
I've no idea how they hide their code from "View Source", but Web
Developer can see it. It's rather complicated. Here's the code that they
use to handle circles. There's a similar amount of code for each of the
other options:
var mrpGCircle = Class.create();
mrpGCircle.emptyVertexIconUrl = "polyvertex-empty.png";
mrpGCircle.vertexIconUrl = "polyvertex.png";
mrpGCircle.crosshairsCursor = "crosshairs.cur";
mrpGCircle.prototype.initialize = function( arg )
{
if( arg["map"] == null ) {
alert( "Must pass map to area in constructor" );
return;
}
this.emptyVertexIconUrl = arg["emptyVertexIconUrl"] == null ?
mrpGCircle.emptyVertexIconUrl :
arg["emptyVertexIconUrl"];
this.vertexIconUrl = arg["vertexIconUrl"] == null ?
mrpGCircle.vertexIconUrl :
arg["vertexIconUrl"];
this.crosshairsCursor = arg["crosshairsCursor"] == null ?
mrpGCircle.crosshairsCursor :
arg["crosshairsCursor"];
this.closed = false;
this.editing = false;
this.map = arg["map"];
this.normalProj = G_NORMAL_MAP.getProjection();
this.vertices = new Array();
this.points = new Array();
this.editable = arg["editable"] == null ? false :
arg["editable"];
this.strokeColor = arg["strokeColor"] == null ? "#C602C8" :
arg["strokeColor"];
this.fillColor = arg["fillColor"] == null ? "#C602C8" :
arg["fillColor"];
this.strokeWidth = arg["strokeWidth"] == null ? 5 :
arg["strokeWidth"];
this.strokeOpacity = arg["strokeOpacity"] == null ? 0.8 :
arg["strokeOpacity"];
this.fillOpacity = arg["fillOpacity"] == null ? 0.3 :
arg["fillOpacity"];
this.centerLatLng = arg["centerLatLng"] == null ? null :
arg["centerLatLng"];
this.radiusLatLng = arg["radiusLatLng"] == null ? null :
arg["radiusLatLng"];
this.clickable = arg["clickable"] == null ? false :
arg["clickable"];
if( arg["spec"] ) {
var pts = arg["spec"].split( "," );
for( var i=0; i<pts.length; ++i ) {
pts[i] = parseFloat( pts[i] );
}
this.centerLatLng = new GLatLng( pts[0], pts[1] );
this.radiusLatLng = new GLatLng( pts[2], pts[3] );
}
this.tooltipsOn = arg["tooltipsOn"] == null ? false :
arg["tooltipsOn"];
this.tooltip = null;
this.feedbackLineWidth = 2;
this.overlay = null;
this.verticesOn = true;
this.feedbackLine = null;
var self = this;
if( this.centerLatLng && this.radiusLatLng ) {
this.closed = true;
this.render();
this.showVertices( true );
}
else if( this.editable ) {
this.startEditing();
}
mrpGSnapHelper.addSnapArea(this);
};
mrpGCircle.prototype.showTooltip = function( latlng )
{
if( !this.tooltipsOn && this.tooltip ) {
this.tooltip.remove();
this.tooltip = null;
}
if( !this.tooltipsOn ) {
return;
}
if( !this.centerLatLng && !this.radiusLatLng ) {
this.setTooltipText( "- Click on the map to create the
<span class='keyword'>CENTER</span> of the circle" );
}
else if( this.centerLatLng && !this.radiusLatLng ){
this.setTooltipText( "- Move the mouse and click to
create the <span class='keyword'>EDGE</span> of the circle" );
}
this.tooltip.setPosition( latlng );
}
mrpGCircle.prototype.setTooltipText = function( text )
{
if( this.tooltip == null ) {
this.tooltip = new mrpGMouseTooltip( {
"text" : text,
"map" : this.map
} );
}
else {
this.tooltip.setText( text );
}
}
mrpGCircle.prototype.getSnappablePoints = function()
{
if( this.centerLatLng && this.radiusLatLng ) {
return [ this.centerLatLng, this.radiusLatLng ];
}
else {
return [];
}
}
mrpGCircle.prototype.getCurrentPolygon = function()
{
if( this.closed ) {
return this.overlay;
}
else {
return null;
}
};
mrpGCircle.prototype.setOnPolygonCloseCallback = function( callback )
{
this.polygonCloseCallback = callback;
};
mrpGCircle.prototype.setOnPolygonEditedCallback = function( callback )
{
this.polygonEditedCallback = callback;
};
mrpGCircle.prototype.startEditing = function()
{
if( !this.editable ) {
return;
}
this.stopEditing();
this.editing = true;
var self = this;
this.clickListener = GEvent.addListener( this.map, "click",
function( marker, point ) {
self.processClick( marker, point );
} );
if( !this.closed ) {
this.mouseListener = new GEvent.addListener( this.map,
"mousemove",
function( latlng ) {
self.showTooltip( latlng );
self.renderFeedbackLine( latlng );
} );
}
this.map.disableDoubleClickZoom();
if( !this.closed ) {
this.map.getDragObject().setDraggableCursor( 'url(' +
this.crosshairsCursor + '),crosshair' );
}
if( this.closed && this.radiusLatLng ) {
this.renderFeedbackLine( this.radiusLatLng );
}
};
mrpGCircle.prototype.stopEditing = function()
{
if( !this.editable ) {
return;
}
if( this.clickListener ) {
GEvent.removeListener( this.clickListener );
this.clickListener = null;
}
if( this.mouseListener ) {
GEvent.removeListener( this.mouseListener );
this.mouseListener = null;
}
if( this.feedbackLine ) {
this.map.removeOverlay( this.feedbackLine );
this.feedbackLine = null;
}
if( this.tooltip ) {
this.tooltip.remove();
this.tooltip = null;
}
this.editing = false;
this.map.getDragObject().setDraggableCursor( 'default' );
};
mrpGCircle.prototype.renderFeedbackLine = function( mousePoint )
{
if( this.centerLatLng == null ) {
return;
}
if( this.feedbackLine != null ) {
this.map.removeOverlay( this.feedbackLine );
this.feedbackLine = null;
}
this.feedbackLine = new GPolyline( [ this.centerLatLng,
mousePoint ], "#000000", this.feedbackLineWidth, 1.0,
{ "clickable" : false } );
this.map.addOverlay( this.feedbackLine );
};
mrpGCircle.prototype.processClick = function( marker, point )
{
if( !this.editable ) {
return;
}
var wasClosed = this.closed;
if( !this.closed ) {
if( marker ) {
point = marker.getLatLng();
}
if( this.centerLatLng == null ) {
this.centerLatLng = point;
this.createVertex( this.centerLatLng, true );
}
else {
this.radiusLatLng = point;
this.createVertex( this.radiusLatLng, false );
this.closed = true;
if( this.mouseListener ) {
GEvent.removeListener(
this.mouseListener );
this.mouseListener = null;
}
if( this.feedbackLine && !this.verticesOn ) {
this.map.removeOverlay(
this.feedbackLine );
this.feedbackLine = null;
}
if( this.tooltip ) {
this.tooltip.remove();
this.tooltip = null;
}
this.createCircle();
this.map.getDragObject().setDraggableCursor(
'default' );
}
this.render();
}
if( wasClosed != this.closed && this.polygonCloseCallback ) {
this.polygonCloseCallback( this );
}
};
mrpGCircle.prototype.createCircle = function()
{
var zoom = this.map.getZoom();
var centerPt =
this.normalProj.fromLatLngToPixel(this.centerLatLng, zoom);
var radiusPt =
this.normalProj.fromLatLngToPixel(this.radiusLatLng, zoom);
var circlePoints = new Array();
var radius =
Math.floor(Math.sqrt(Math.pow((centerPt.x-radiusPt.x),2) +
Math.pow((centerPt.y-radiusPt.y),2)));
for (var a = 0 ; a < 361 ; a+=10 ) {
var aRad = a*(Math.PI/180);
var y = centerPt.y + radius * Math.sin(aRad);
var x = centerPt.x + radius * Math.cos(aRad);
var p = new GPoint(x,y);
circlePoints.push( this.normalProj.fromPixelToLatLng(p,
zoom) );
}
this.points = circlePoints;
}
mrpGCircle.prototype.getEndVertexIcon = function()
{
var icon = new GIcon();
icon.image = this.vertexIconUrl;
icon.iconSize = new GSize(10, 10);
icon.iconAnchor = new GPoint(5, 5);
return icon;
};
mrpGCircle.prototype.getVertexIcon = function()
{
var icon = new GIcon();
icon.image = this.emptyVertexIconUrl;
icon.iconSize = new GSize(10, 10);
icon.iconAnchor = new GPoint(5, 5);
return icon;
};
mrpGCircle.prototype.createVertex = function( point, isOpen )
{
if( !this.verticesOn ) {
return null;
}
var vertex = null;
if( isOpen ) {
vertex = new GMarker( point, {
"icon" : this.getEndVertexIcon(),
"draggable" : this.editable,
"bounceGravity" : 0,
"dragCrossMove" : 1,
"bouncy" : false
} );
}
else {
vertex = new GMarker( point, {
"icon" : this.getVertexIcon(),
"draggable" : this.editable,
"dragCrossMove" : 1,
"bounceGravity" : 0,
"bouncy" : false
} )
}
var self = this;
if( this.editable ) {
GEvent.addListener( vertex, "dragstart", function() {
self.onVertexDragStart( vertex );
});
GEvent.addListener( vertex, "drag", function() {
self.onVertexDrag( vertex );
});
GEvent.addListener( vertex, "dragend", function() {
self.onVertexDragEnd( vertex );
});
}
this.map.addOverlay( vertex );
this.vertices.push( vertex );;
return vertex;
};
mrpGCircle.prototype.showVertices = function( flag )
{
this.verticesOn = flag;
for( var i=0; i<this.vertices.length; ++i ) {
this.map.removeOverlay( this.vertices[i] );
}
this.vertices = new Array();
if( this.feedbackLine ) {
this.map.removeOverlay( this.feedbackLine );
this.feedbackLine = null;
}
if( flag ) {
this.createVertex( this.centerLatLng, true );
this.createVertex( this.radiusLatLng, false );
this.renderFeedbackLine( this.radiusLatLng );
}
};
mrpGCircle.prototype.render = function()
{
this.destroyOverlay();
if( this.radiusLatLng && this.centerLatLng ) {
this.points = new Array();
this.createCircle();
}
if( this.points.length > 2 ) {
this.overlay = new GPolygon( this.points,
this.strokeColor, this.strokeWidth,
this.strokeOpacity,
this.fillColor, this.fillOpacity,
{ "clickable" : this.clickable }
);
this.map.addOverlay( this.overlay );
}
};
mrpGCircle.prototype.destroyOverlay = function()
{
if( this.overlay != null ) {
this.map.removeOverlay( this.overlay );
this.overlay = null;
}
};
mrpGCircle.prototype.onVertexDragStart = function( marker )
{
};
mrpGCircle.prototype.onVertexDrag = function( marker )
{
if( this.feedbackLine != null ) {
this.map.removeOverlay( this.feedbackLine );
this.feedbackLine = null;
}
if( !this.closed ) {
return;
}
if( marker == this.vertices[0] ) {
this.feedbackLine = new GPolyline( [ marker.getLatLng(),
this.radiusLatLng ], "#000000", this.feedbackLineWidth, 1.0 );
}
else {
this.feedbackLine = new GPolyline( [ this.centerLatLng,
marker.getLatLng() ], "#000000", this.feedbackLineWidth, 1.0 );
}
this.map.addOverlay( this.feedbackLine );
};
mrpGCircle.prototype.onVertexDragEnd = function( marker )
{
this.destroyOverlay();
var thePoint = marker.getLatLng();
var closestPoint = mrpGSnapHelper.findSnapPoint( this, this.map,
thePoint, 5.0 );
if( closestPoint ) {
thePoint = closestPoint;
marker.setLatLng( thePoint );
}
if( marker == this.vertices[0] ) {
this.centerLatLng = thePoint;
}
else {
this.radiusLatLng = thePoint;
}
this.render();
if( this.feedbackLine ) {
this.map.removeOverlay( this.feedbackLine );
this.feedbackLine = null;
}
this.feedbackLine = new GPolyline( [ this.centerLatLng,
this.radiusLatLng ], "#000000", this.feedbackLineWidth, 1.0 );
this.map.addOverlay( this.feedbackLine );
if( this.polygonEditedCallback ) {
this.polygonEditedCallback( this );
}
};
mrpGCircle.prototype.destroy = function()
{
//GEvent.removeListener( mrpGArea.clickListener );
this.destroyOverlay();
for( var i=0; this.vertices && i<this.vertices.length; ++i ) {
this.map.removeOverlay( this.vertices[i] );
this.vertices[i] = null;
}
this.vertices = new Array();
this.overlay = null;
this.stopEditing();
if( this.feedbackLine ) {
this.map.removeOverlay( this.feedbackLine );
this.feedbackLine = null;
}
if( this.tooltip ) {
this.tooltip.remove();
this.tooltip = null;
}
mrpGSnapHelper.removeSnapArea(this);
this.map.getDragObject().setDraggableCursor( 'default' );
};
--
http://econym.org.uk/gmap
The Blackpool Community Church Javascript Team
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to Google-Maps-API@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
