Javascript Google Earth path editor - javascript

What I am trying to do is create a embedded javascript application where the google earth plugin is embedded in a webpage with various paths drawn on. Here is an example of what I am trying to achieve.
The catch is that the lines need to be editable, with each joint having a handle where the user can click and drag. I have looked high and low on Googles api documentation and I cannot find anything even close to this. If anyone can point me in the right direction it would be much appreciated.

You want each 'joint' to be a dragable placemark so that when you drag it the line geometry is updated.
For reference check out the Google Earth API Samples - Draggable Placemark:
http://earth-api-samples.googlecode.com/svn/trunk/examples/placemark-dragdrop.html
And possibly James Stafford's polyplot:
http://www.barnabu.co.uk/geapi/polyplot/
Together they should help you achieve what you want.

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 fetch data about road vectors to overlay direction arrows in camera view

I am trying to create a prototype of augmented reality app using html5 and javascript for smartphones. The goal is to show 3d arrows to users on live camera view from source till destination as a route guidance.
I am not clear on how to fetch data about road vectors from either Google Maps or OpenStreetMaps to use in overlaying the arrow. Has anyone done it or tried it ?
https://stackoverflow.com/questions/11453682/a-method-to-detect-road-vectors-from-maps is very relevant to my question but it is already closed without any relevant solution. Do i really need vector data or some other technique is also useful ?
Regards,
Wahib
What have you tried so far? There are several possibilities of getting road data from OpenStreetMap. If you want to retrieve data for a specific region on the fly the Overpass API might be useful.
A road in OpenStreetMap consists of one or multiple ways which are described by nodes. But not every way is a road, only those which have the highway tag.

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.

Write a Google Earth in browser with webgl(three.js) and maps api, where to start?

I'm learning three.js, now I can write demos like a cube which could be moved by the mouse.
What I'd like to do next is a Google Earth in browser which will use Google Maps API to get the images and render them on an earth in the browser.
But I don't know where to start, I've seen the document of three.js but it just list the API names and parameters, without explain of what they do...
My question is, which part of three.js should I learn to accomplish what I want?
I know it's been a while, but were you looking into doing something like Panedia where the images update depending on user's location on the map?

Google Maps Points do not appear until low zoom levels

I'm working on a (Perl) program that uses the Google Maps API and a KML file to pull data from a database that creates points on the map. I have that much done, but the points only appear after I zoom pretty much all the way in, to a zoom level where only one point is showing.
The default zoom only shows my small city (3-5 miles) so I thought all the points would be able to show. Does anybody know how to get all of the points to show up at city-wide level as opposed to only showing up when zoomed all the way in?
Any help is greatly appreciated. Thanks!
Edit: Added a JavaScript tag because I've seen a lot of work done with Google Maps using JS, and considering the problem really isn't language-specific, I figured some of those developers might be able to offer some insight.
Try to incorporate the <Lod> tag in your KML, which is child of a <Region>. You can define this once per placemark you get from your DB. or only once per query (defined by minLat, maxLat, minLong, maxLong). In the first case the LodPixels is a constant whereas in the latter case you must calculate it as a function of the region size. It sure works in Google Earth and may work as well in Maps. Look here to see it work in Earth API (JS)
....
<Region>
<LatLonAltBox>
<north>###</north>
<south>###</south>
<east>###</east>
<west>###</west>
<minAltitude>###</minAltitude>
<maxAltitude>###</maxAltitude>
</LatLonAltBox>
<Lod>
<minLodPixels>###</minLodPixels>
<maxLodPixels>###</maxLodPixels>
<minFadeExtent>###</minFadeExtent>
<maxFadeExtent>###</maxFadeExtent>
</Lod>
</Region>
....

Categories