I want to add a 3D layer showing cloud location and elevation on a Google Maps.
The idea is that when you tilt the map (ctrl+drag in Earth mode) you could see how high each cloud is.
I found this article which explains how to add 3D buildings but it's "fakes", cheating with the latitudes to get some height effect:
http://johndyer.name/drawing-3d-objects-and-building-on-google-maps/
I couldn't find anything up to date in the doc.
Google seems to be silent about 3D features in Javascript API. Closest I can get to this are Styled Maps but nowhere does it specifically indicate 3D. Only Android implementations are available as of now.
I did some research and found this library which help you build 2D and 3D: https://github.com/OSMBuildings/OSMBuildings
Another option is Cesium JS:
An open-source JavaScript library for world-class 3D globes and maps
https://cesiumjs.org/
Related
I want to make an interactive map web application for a game that I play. Basically I want it to be a kind of Google maps clone, where I have a vector-based graphic of the region area and I can zoom in and out to reveal certain level of detail.
My research into map APIs has returned little results. OpenStreetMaps and Google Maps only allow custom maps with real geolocation data. My project requires the creation of a map with nonexistent locations. Does anyone have a suggestion on how to approach this? Thanks.
I think you can use "real" GPS coordinates and then customise the base layer beneath. The GPS Lat Long coordinates (between -90 and +90 each) offer as good a scale as any to then locate your fictional positions.
Google Maps has an API that allows putting custom layers and base maps here:
https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes
OpenStreetMaps will also allow this. Some recommended guides available here:
https://switch2osm.org/serving-tiles/
Good luck!
Google Maps give opportunity to user to look on
Earth from space.
But Google Maps Javascript API 'Satellite' version allows to you zoom only to
this version
How can I get view from Google Maps like at first screenshot? Thank you for help.
You are talking about loading a web-gl rendered globe instead of imagery map tiles. This functionality has not been released to the javascript API. Google has started releasing some of their web gl functionality such as being able to toggle 3d mode in bigger cities but the "earth global view" web-gl functionality are lacking.
I am trying to use the 3D View / 3D perspective in a project. I can't find any tutorial, sample or documentation for this feature.
Expected View
PS: There are a few question about showing 3D Buildings from SketchUp, that is not what I am asking.
I know this isn't exactly what you're looking for but cesium.js is a pretty awesome (and I'd say more powerful) library for 3d mapping which can use the google satellite basemaps. It supports 3d terrain but I'm having trouble finding the demo at the moment.
https://cesiumjs.org/
In my Meteor/Cordova/famo.us App I need a map that can be rotated with two fingers, zoomed in and out and (ideally) the names (street, city etc.) should stay horizontally aligned.
The reason is that I haven't found a (free) map like leaflet.js, Google Maps etc. that can rotate in JS. Google Maps SDK for Android and iOS respectively can do this, but the corresponding plugin (plugin.google.maps) led to trouble with famo.us.
The rotation could be done with a famo.us Surface, and I've been told that in leaflet one could pull separately the map tiles and the names (vector/jpeg?).
I apprechiate your help.
Map rotation isn't possible in Leaflet. Read this answer: https://stackoverflow.com/a/22938733/2019281. However, it is possible in openlayers but it would also rotate the labels since they are embedded in the maptiles. See this example: http://openlayers.org/en/master/examples/rotation.html. You could use a tilelayer without labels and add create your own separate layer with vectorlabels and counterrotate those. This would be a very complex solution and i guess will put an enormous strain on your performance since you're talking about a mobile solution. I would rethink the concept.
Using the google maps v3 javascript API, it's possible to add 'GroundOverlays' as a picture. Have a look here:
http://jsfiddle.net/9YYJB/1/
However, I'm working on a project where I'm trying to add a texture to the whole world map. Obviously I can add a single, absolutely massive gif/png overlay but I'd rather add a tiling texture. I've been digging around in the API and can't find any way to do this.
Anyone have any ideas on how this could be done?
Thanks very much
Yes, what you want to use is an image map type. This allows you to add tiles on top of the regular Google Base Map. If you want to completely replace the Google tiles, you would need to implement a Custom Map Type. My favorite example of that is the Liberty City Map.