Google Maps as texture map - google-maps

Hasn't anybody thought about creating dynamic texture of Google Maps? So for instance, we create a simple plane and apply a texture to it that is going to be an actual map of Google (with all of it properties, like drag, zoom, etc.).
Would be nice to somehow deploy google map to a canvas element, grab it as a map for Object3D texture, hide it and listen to its changes (mousemove, etc.) and update the texture map again as it’s being changed.
Hasn’t anybody implement this already? Or maybe at least somebody has some thoughts on how to do this implementation??? May be some alternative that I don’t know about?
Correct me if I’m wrong, but I think that it would be nice to have Google Maps inside of THREE.js as a plugin or even as a part of library.

I have definitely thought about this and I'm not alone. You should be verrrrry prudent if you choose to do so, however: https://developers.google.com/maps/licensing
For student-ish projects you may be okay but don't be surprised if your game or real estate company gets a C&D letter in like 2 hours after release :)

Seems like this has already been done.
The Google Maps team joined with B-Reel to make the Google Maps Cube
Game, where you help a small blue ball navigate the streets of New
York, Tokyo, Paris and San Francisco (among others). As you move your
mouse the cube rotates and the ball rolls down the streets, bouncing
off buildings and making its way towards the goal.
No discussion on WebGL is complete without mentioning Mr. doob's
Three.js library at some point, and this is no exception: the Maps
Cube game makes use of Three.js for its gorgeous rendering. If you're
considering doing some WebGL work in a commercial setting, Three.js is
a really good place to start; it's a very nice library that will save
you a lot of headaches.
http://www.playmapscube.com/ (requires chrome).

Related

How to start an embedded kml tour?

This is my first post, wooohooo! I've been using stack exchange when I needed information but usually someone had the same problem as me and I didn't need to make a post. Which means this website is really good.
Now turns out I have a pretty unique problem.
Please check out http://gaia.tru.ca/birdMOVES/
You will see a website with a google map. It is connected to a db which will be automatically updated.
The purpose of this website is to track how birds feed. There is going to be bird feeders equipped with NFC all over the world to track birds equipped with RFID when they feed.
I am taking care of the front-end, the web app for visualizing.
This is a work in progress so try not to care about the looks of it.
Apparently everything was written in RApache because the person who made everything this far is a Geography teacher(Not a lot of programming background, I had to refactor his code and learn R because it wasn't in my array of known languages.)
My client asked me to add time animation to his map. Feasible with the help of Google Earth.
I made the existing R code generate a tour. It works perfectly and even shows on my map.
Here is the address of my dev server: http://thelab.dyndns.org:1080/birdmoves/
You can see that there is an extra check box for time animation. If you check it, the tour will appear as an object on the map (no way to use it whatsoever right now).
So what I'd like to know is how do I make it work? How do I make it autoplay when the submit button is pressed? With standard google earth controls for rewind, pause and fast-forward. And independently from the google maps without tour?
This is intense. I have the feeling google earth isn't going to work because they deprecated all their gadgets.
I'm on the clock and I need help.
In case you were wandering what eventually happened:
We ended up making a hybrid website where the static visualization is within Google maps using kml and the time animation is within CesiumJs using CZML.
CZML is based off JSON and can be used very similarly to kml.
The api is also very nice, it only takes one line of javascript code to get a map running on an existing server.
To implement time visualization CZML supports putting multiple consecutive values for almost any property(like position, to animate movement, or even color to change colors) and takes account of time.
Also very nice, CesiumJs supports animated 3d models!
If you're interested http://cesiumjs.org/
It also has a lot of support, documentation and tutorials... etc..
It's being maintained by professionals. I really recommend it.
The Google Earth API got deprecated and will not function by December this year which is not a viable option for a long term service. So cesium was the only option for this specific project.
Cheers

Using 3D in Google Maps

I would like to create a webapp where I can display my own geotiffs, with NDVI and other data layers, as well as 3D geometries, providing a seamless rendering of both 2D tiles and textured 3D shapes, exactly like maps.google.com achieves in switching from "map" to "earth" views.
After much research, the closest I came to a viable solution is to build the infrastructure from the ground up based on http://cesiumjs.org/, and while this seems doable, it is extremely low level, and will require an exotic cocktail of libraries and a buttload of man-hours.
Before going down that road, I want to make sure there isn't a cost effective alternative that takes all the heavy lifting out of my app's shoulders and gives me a friendly set of APIs to base my app on.
Mapbox comes close to perfection in this regard, but unfortunately, it only handles 2D.
On the other hand, on the Google side, amid Earth API and Maps Engine deprecation, it's hard to tell what exactly is currently possible and will remain available long term.
Bottom line, for a future-proof Google-centric solution built today, are there Google APIs in place that allow building a webapp that displays custom 2D and 3D data with a seamless rendering experience?
https://cesiumjs.org/ is a library very similar to google maps that provides support for 3d shapes on top of maps.

open earth map with irregular station measurement overlays

I would like to draw a map of current temperatures (or air pressures, etc.) from many weather stations, with the underlying map still recognizable. the problem is easiest to think of as follows:
I have an array of spot measurements from irregularly spaced dots---think triples of GPS coordinates with one temperature value each. my stations can be very close to or very far apart from one another, and a user may want to zoom in or out. cold should be blue, warm should be red. Ideally, I would like to just pass the array, the color range, and have the rest be taken care of. I would prefer everything to be inside a web browser. The user needs to be able to zoom in, zoom out, move around, and get back to his current location.
I do not even know how to think about this problem. If a user has zoomed out enough, non-transparent dots could be so close as to obscure the terrain. However, zooming in, it would be nice to recognize the dot that is the station itself. This presumably requires some intelligence that realizes how many dots there are, e.g., relative to the density of the display? not sure.
I believe google maps charges for many API calls, so I would prefer using an open map and/or open API that can use different underlying maps. It does not have to be fancy. I don't care about directions, etc.---just a map that is recognizable at most zoom settings, with landmark and street names, and my nice temperature station overlay coloring, so that a user can visualize where it is cold and where it is warm.
(Stations come online and offline, but I don't need to update this more than once an hour. I can place the map measurements into a file that is URL web-accessible.)
is this an easy or a hard problem for the high-level web programmer?
/iaw
after looking around for a long time, I think the best way to do this is with html5 openlayers nexrad.
alas, the docs seem to be a mess. half the examples that I found did not seem to work. it's pretty hit-or-miss. similarly, the openlayers cookbook also seems to be outdated and has incorrect examples, but they did have a reasonably short example of such a nexrad map overlaid on the U.S., that one can further study.

Dragging a 3D shape onto a Google Map?

I want to allow a user to drag a 3D shape onto a Google Map. Imagine a map, zoomed into a neighborhood in satellite view, and the user would be able to drag a shape (simulating a building) onto that map and get a sense of the impact of that building in that neighborhood. I have not found any examples of this online.
Why 3D? If you want to do this at "Street View" level, then this is much, much bigger in scope than a StackOverflow question -- it is basically a research project.
I would start by Googling the following terms:
relighting
re rendering
reprojection
proxy geometry
If it's a 2D map, then it's fairly easy to do and I'm not sure which part you need help with.

How do I obtain the coordinates along GMaps directions?

I want to create an online map for a hiking trail, and I have been using my smartphone to collect coordinates from it.
I have many questions regarding what's good practice when it comes to making such tracks, but for starters: it would look much neater if I could edit the readings so that they are right on top any roads in Google Maps. How can I achieve this?
EDIT: I want to find the coordinates that will make a track along a road look exactly as if I'm using snapping/directions even when I'm not.
I've tried tools such as QLandkarte GT and Viking, and with the latter I was able to manually remove excess coordinates and move the remaining ones so that they're exactly on top of roads (inside Viking, using OpenStreetMap). However when I load the edited .kml-file in Google Maps, the roads seem to be in slightly different places and the result is hardly better than before editing.
I tried using the hack that exports GMaps directions as .gpx, thinking I could insert Google's own coordinates along the roads. But the exported file only had coordinates at the turning points with straight lines between these.
QLandkarte GT supposedly has a snap-to-road feature (see answer in link), but I haven't found it and I also don't know how to obtain a vector map of the area.
Then there's Google Earth which people seem to use for this, but again I can't find any track editing features (in the free version).
In short:
How do I edit my existing tracks so that they match roads in GMaps...
OR
How can I obtain new tracks representing roads in GMaps...
...so that the resulting track is as smooth as Google's own directions or other professional GPS-data, when displayed in GMaps?
It seems like it's possible to get these coordinates from Google Maps after all, exporting the directions polyline. I'm not sure how, it seems to involve adding the parameter output=dragdir to the link.
Anyway there's a tool called GPS Visualizer that can create a .kml-file with the wanted coordinates.
Edit: Will accept my own answer as long as it's the only one, but I would still like to know more.