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.
Related
Is it possible to highlight rivers in Mapbox?
I would like to look at the world and see a list of specific rivers standing out as if highlighted with a yellow marker on a paper map. As I zoom in, the highlights would get more precise and ultimately coincide with the actual geometry of the rivers, or at least follow a line equidistant to their banks…
Is this at all possible?
I understand I can draw anything I want at specific geographic coordinates, but I can't figure out how to extract the river geometry from Mapbox to compute the paths for my highlighter strokes…
Or perhaps this kind of thing would be easier with another provider? How do people usually handle this kind of thing?
As far as I know there is not a way to highlight specific rivers in Mapbox's water related layers by an attribute like name. However, if you are looking to filter features based on size/prominence it is possible to filter features using the "class" or "type" property on the Mapbox waterway layer. This will at least allow you to filter/style features based on their type (i.e. river, stream, canal, etc...).
An alternative approach would be to pull together spatial data outside of the Mapbox platform and then bring it into Mapbox as your own tilset or dataset. I have done this before using the National Hydrography Dataset (this is just for the US) when I wanted to highlight specific rivers (i.e. only show the Rio Grande, Arkansas, and Colorado Rivers). I brought the NHD into my desktop GIS application (QGIS), filtered the features to just those rivers, exported the filtered features as GeoJSON and then uploaded to Mapbox and did all the desired styling in Mapbox Studio.
Hope this helps! I have been writing a series of guides for Mapbox that you might be interested in too. Here are some links:
The Mapbox Developer's Handbook
A Complete Guide to Sources and Layers in React and Mapbox GL JS
Here's something you can try:
Use the waterway line layer in the Mapbox Streets vector tileset and set a filter to show only the river feature type. This will show all rivers at low zoom levels, but because this is a line layer, it will not show the rivers' widths at high (close to the ground) zoom levels. Set the layer to 0 opacity at higher zoom levels so it disappears.
At higher zoom levels, you can use the water polygon layer in the Mapbox Streets vector tileset, but it includes oceans, rivers, lakes, ponds, reservoirs, and fountains all smashed into a simple polygon layer of undifferentiated, merged shapes:
there is no way to filter out or highlight specific water bodies or a partial subset of them.
If you want to isolate one specific waterway (like only the Rio Grande), you will need to import that data yourself as #tylerben suggests.
If you feel adventurous, you could try using mask in Turf.js to hide features in the water layer that are more than, say, ten miles from the centerline of a river from the waterway layer.
You can learn more about Mapbox map data in the core tilesets documentation.
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.
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).
From the google map v3 javascript api,I found this:
Overlay Map Types
Some map types are designed to work on top of existing map types. Such
map types may have transparent layers indicating points of interest,
or showing additional data to the user. (Google's traffic layer is an
example of such a map type.)
Which say that Google's traffic layer is an example of such a map type.
But the traffic layer is intance of Layer in google map.
So I am confused with the concept.
Since we are build our own map library for offline use,so I want to refer google's concept and their idea.
Any one can give me more details?
Layers and Overlays are not of the same type.
Layers can only be manipulated as a whole object. I guess google dont want you to mess with the information.
Layers thought of as a type of map type for selection, and are transparent. They are also sort of like the concept of an overlay as they are made of geometric shapes.
i think the concept is confusing because overlays, layers and the underlying map type are all things that in other systems (photoshop for example) would just be layers (that might be of different type (ie vector or raster).
Hope this helps.
I'm trying to find an effective way to visualise feedback from some real-world sensors measuring wind speeds at various heights. Does anyone know if it's feasible to display 3D data in google maps?
I was imagining 3D arrows indicating direction and wind speed. If it's possible to load a model and position it to a particular GPS position / elevation and then change its orientation to point to a particular azimuth / elevation what could work.
Another alternative I was considering would be to create an image for each height and display the arrow by scaling / rotating the disk. The documentation suggests you could do a single layer at ground level with an overlay but doesn't make any mention of pulling those images up into the air.
I've played with google maps before, but not Google earth. Just trying to get a feel for what might be possible here. Has anyone tried anything like this?
Google maps is 2d and as such does not support 3d objects, things are located via a latitude and longitude only. However, you could easily create a '3d looking' image and incorporate it in to a map using the maps Api.
Google earth is 3d (latitude, longitude, altitude) and supports models and geometries loaded via kmz archives or constructed via the Api. It is fairly trivial to include using either method.
The reason you see no mention of 'pulling those images up into the air' in the doc you reference is because the document covers 'ground overlays' - so they are fixed to the ground...
Anyhow, take a look at the geometries and models section in the google earth api - should be exactly what you need.
http://code.google.com/apis/earth/documentation/geometries.html
http://earth-api-samples.googlecode.com/svn/trunk/examples/model.html