touch or click/drag to draw arbitrary area on Google Maps - javascript

I am familiar with how to draw circles and polygons on a Google Map using the javascript API. However, I've been looking at some android apps that allow you to "touch and draw" a freehand area on a map, not a collection of polyline/points or geometric shapes.
Is this functionality accessible to the js API? If so, how? I only find documentation on the polygons etc.
Note: this type of functionality is not what I'm looking for! Clicking at multiple points to define an area is fine, but I'm trying to do a real "drawing" style.
Thanks

Related

Javascript polygon selector, polygon brush

I need a 'polygon' selector type functionality. Basically, the ability to drag lines to form multiple polygons; pref with the ability to edit the 'points' of the polygon after the shape has been 'closed' (but that's secondary) and/or move the polygons...
I generally dislike 'reinventing the wheel' and I figured I'd find tons of examples to work with, but I was wrong...
The polygon tool in Google Maps is just about perfect, but has anyone utilized it outside of GMaps? (I recall it required a GMap as an attribute from my work with Google Maps). Before I roll up my sleeves, I just want to ensure there isn't something already made (this is a very small part) - so if (a) Google Maps Polygon object is usable without a map, or (b) there's another library/project I'm missing please let me know.
Fabricjs is an option you can check.
Have a look at D3.js which has a great api for visualizing data and geo information. Besides the standard one-/two-dimensional brush there are plugins for more advanced types of brushes:
Polybrush. Providing a polygon brush.
lasso. Lassoing a selection by freely drawing a line path.

How to select a polygon covered by another polygon using Google Maps API V3

I am using Overlay Shapes with Google Maps API V3 using Google’s Drawing Manager. I basically allow the user to draw a polygon and save it to a database. They can then edit these polygons at will or create new ones.
The issue I am having is that often new polygons will completely cover existing polygons. Then the user cannot select the polygon beneath the latest one.
I wondered if anyone had managed to devise a script that enabled a user to cycle through the selection of every polygon in a potential stack under the mouse cursor (or pointer/finger...)
The attached image illustrates the predicament. Ideally I'd like something like CTRL+Click to select the polygon beneath the currently selected polygon.
No idea how to even approach this and I could not fine any examples in existence.
Thanks in advance.
You can try using control click to change the z order.

Drag multiple polygons at once in Google Maps Javascript API v3

It is extremely easy to make a polygon draggable in the Google Maps API v3 with the 'draggable' option.
How could I go about dragging multiple polygons at once, however?
The idea is that the user selects some polygons somehow (not the issue here: could be by clicking, drawing a bigger polygon, etc.), and then is able to drag any one of them and see them all move together to the destination.
Thank you.
The easiest approach would be to create a single polygon instead of multiple polygons. Polygons may have multiple paths, so you could merge all polygons into 1.

Drawing routes on google maps

Is it possible to draw routes with google maps or any other map api? Like when you're looking for direction from point a to point b on google map with Get Directions button.
I'd like to draw a line that follows certain road but without the directions I don't need those. And if I can draw multiple lines between multiple points on the map that would be awesome.
Has anyone had experience with this before?
You can either use the Directions API or, if you really prefer to ignore the directions Google generates, you can use the maps API drawing functions to draw your own lines on the map.
You can also employ "drawing library"
https://developers.google.com/maps/documentation/javascript/drawing
But,this experimental tool cant specify colors nor line-thick via GUI.
My enhanced example is at:
http://members.jcom.home.ne.jp/tcltk-d/ge-navi.html
(select "Drawing" view to draw)

Javascript plugin to draw markers, lines, and shapes on a latitude/longitude grid for offline use?

I am attempting to make a simple PhoneGap app that will allow a user to input lat/long points and bearings and calculate their estimated intersection, along with a measure of error. I would like to display the lines, intersection, and an error elipsoid on a map or at least a grid of latitude and longitude lines, so the user can visualize the accuracy of the point. The tricky part is that this will be used for wildlife tracking in areas where the user may not have cell service. Is there some sort of Javascript plugin that will make a lat/long grid available for me to draw georeferenced lines and shapes on? I would love to use something like the Google Maps API, but that clearly won't work for offline use. I've Googled quite a bit, but I'm not sure where to start with this or if it's even feasible at all.
This program is similar to what I'm trying to achieve: http://www.locateiii.com/
Any ideas are greatly appreciated.
I'd use d3.js and http://code.google.com/p/gmapcatcher/ something like this where you can keep the google maps offline. If that's not feasible you can always us D3 with a svg of the map.
I ended up using OpenLayers with OpenStreetMap tiles prepared by Maperitive. Simple and works well with PhoneGap.

Categories