http://www.wolfpil.de/v3/map-in-a-box.html
Wolfgang Pichler has made a map canvas that is draggable and resizable. Cursor movement is detected and drag or resize is implemented depending on where the click originated.
Archive for the ‘stu’ Category
Google maps v3 – a nice resizable draggable map canvas
Thursday, September 23rd, 2010
Google maps api v3 – add getBounds to polylines
Thursday, September 16th, 2010In v2, polylines had a getBounds() method, but (currently – Sept 2010) that doesn’t exist for v3 polylines. Similarly for polygons.
Fortunately there is code in the extensions library to add the method to polygons by prototyping.
see http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
Pretty simple – it just creates a new bounds object, gets the paths for the polygon, and iterates through those to get each path (in case its a complex polygon). At each point in each path, it extends the bounds.
For some reason, they didn’t also write the code for polylines. Its similar, but polylines don’t have multiple paths so its easier. Here’s my adaption:
// polyline getBounds extension – adapted from: google-maps-extensions by stu sontier
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polyline.prototype.getBounds) {
google.maps.Polyline.prototype.getBounds = function(latLng) {
var bounds = new google.maps.LatLngBounds();
var path = this.getPath();
for (var i = 0; i < path.getLength(); i++) {
bounds.extend(path.getAt(i));
}
return bounds;
}
}
Route Boxer – A way to search along a given route for points nearby?
Monday, September 13th, 2010Route boxer is a class in Googles utility library, that “generates a set of LatLngBounds objects that are guaranteed to cover every point within a specified distance of a path”.
The documentation includes a good example and a great overview of the way it works.
The source code is well documented too.
For a current project, I need to take a journey, plotted with DirectionsResult, and find out if any parts of that journey intersect with one or more (previously inputted and stored) routes.
Detecting this intersection may be a job for RouteBoxer, or for parts of it. RouteBoxer starts by creating a grid of cells across the bounds of the given polyline, and then determines which cell each vertex is in. This gives a cell mapping of the polyline. RouteBoxer goes on to further analyse the cells, ending up with a series of boxes outlining the line by up to ~3x the given distance.
Using the example, but changing the ‘box within’ distance from the default 20 miles, to 0.1 miles, RouteBoxer took a pretty long time to complete. But on the short journeys that I’ll be analysing, RouteBoxer handled 0.01 miles (16 metres) fairly well.
But in my project, it may be enough to do the first steps, create an array of cells of a given size that contain the journey, and compare that array against a similarly derived array for the stored routes. Any cells that appear in both arrays are indications of intersection (as long as the given distance is small enough for the result to be a good approximation.)
Will report back after experimentation.
Navigating the directionsService results – route; leg; step; path
Friday, September 10th, 2010http://www.geocodezip.com/v3_directions_custom_iconsC.html
Larrys example shows how to iterate through the DirectionsResult legs and steps. He does this so that he can go through what is returned from a DirectionsRequest, and use his own start and end markers. If he went with the default google markers he could get away with using DirectionsRenderer to show the route and the instructions.
This code is a good intro to understanding the inner contents of the DirectionsResult, right down to the points in the path of a step.
Point within circle detection in api v3
Thursday, September 9th, 2010maps api v3 has introduced circle and rectangle overlay objects which make it easy to create circle and simple polygons.
Detecting a point within a standard google.maps.Polygon can be done by analysing the points with the Ray Cast Algorithm (see blog item Point in Polygon checking … ), but there doesn’t seem to be any way to access points directly with the overlay objects, so detecting a point within circle and rectangle overlays doesn’t seem to be possible.
As far as I can see, the best way to have a circle drawn on the map and then do point detection within, is to fake a circle with google.maps.Polygon so that matt williamsons containsLatLng method can be used.
And the following page shows how to draw a circle with 100 points and google.maps.Polygon
Editing polylines/polygons in maps api v3
Thursday, September 9th, 2010In maps api v2 we had the ability to enable editing on polylines and polygons. This allowed points on the object to be dragged, deleted etc, and also put draggable mid-points on the line, allowing entry of additional midpoints (and dragging of these).
The best simple example of this [v2] was the mymapstoolbar (emulating mymaps functionality)
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html
So far, api v3 does not have enable editing method on any objects, but several people have had a go at replicating the functionality:
http://www.shanetomlinson.com/static/gmapV3EditablePolys/html/test.html
By Shane Tomlinson. Simple v3 version that allows markers on an existing polyline to be dragged, new points to be added, and line colour changed. Code posted in github
http://gmaps-samples-v3.googlecode.com/svn/trunk/poly/poly_edit.html
This one is for polygons only and allows point-drag and new points to be added, removed. It works by using an MVCarray to hold each point, and creates marker click listeners for click (remove point) and dragend (at point at this position), and map click listener to add a point.
http://nettique.free.fr/gmap/toolbar.html
An api v3 implementation of mymapstoolbar giving very similar look and usage
http://nettique.free.fr/maps/OpenLayersEditingToolbar.html
Similar edit toolbar for OpenLayers
http://ekelschot.eu/maps/enableEditing.html
And another, from peckham. code posted in snipplr
Point in Polygon Checking With Google Maps
Wednesday, September 8th, 2010http://appdelegateinc.com/blog/2010/05/16/point-in-polygon-checking/
App Delegate ( mattwilliamson) adds the method containsLatLng to polygon object. Properly done, with Ray Cast Algorithm.
Note that this will not work on the Circle and Rectangle objects, only if circles/rectangles are drawn as polygon objects
Google Maps API v3 Drawing Tool / digitiser
Wednesday, September 8th, 2010http://www.birdtheme.org/useful/v3tool.html
Implements drawing of polylines, polygons, polygons with holes etc on the map. Coordinates are given so they can be used to draw the shapes on other maps. Also will output javascript or Bing code
Borrows/implements an ‘edit polyline’ for API v3 (as this is not available directly in v3 as it was in v2)
Driving directions with nearby points of interest
Wednesday, September 8th, 2010http://maps.forum.nu/gm_texas.html
Google Maps API v2 example by Marcelo
Implements a bunch of nice features – does get directions between two points (with optional waypoint). Shows line on map, distance and travel time. Has 5 selectable points-of-interest categories; each selected will show up along route if they are within the given distance-from-line (“search radius”).
Also uses the js library parallel_lines.js to add shading at the radius distance all along the route, and uses a ‘loading…” overlay when the poi category is clicked. Nice!
Distance from mouse to line
Wednesday, September 8th, 2010http://maps.forum.nu/gm_mouse_dist_to_line.html
Google maps API v2 example by Marcelo
Implements extendable polyline draw and then shows distance from current mouse position to each segment of line. If mouse gets closer than 15? miles? an infowindow pops up with ‘proximity alert’.
Bill Chadwick provides a similar example on his map demos page: Look for the one headed “DISTANCE POINT TO POLYLINE OR POLYGON”. His source code is here
Bill also provides a link to a further example, which snaps a marker to the nearest point on a polyline set.
All of these are api v2 implementations.