Dear Mike, first of all thanks to you, I got a lot of help from your google map examples.
Thanks...for unmasking the code. Thats huge code for only a circle! Can you tell me one thing - can I use this code and the other client side code I find in other Google Map sites? Is it true that custom google map sites shuold have their code as open source so others can share? On Dec 10, 5:04 pm, Mike Williams <[email protected]> wrote: > 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 thecircle" ); > > } > > else if( this.centerLatLng && !this.radiusLatLng ){ > > this.setTooltipText( "- Move the mouse and click to > create the <span class='keyword'>EDGE</span> of thecircle" ); > > } > > 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 [email protected] 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 -~----------~----~----~----~------~----~------~--~---
