By 'Tilted angle' I mean perspective, like a GPS Navigator app usually has.
If OpenLayers is capable then does it require a special/varied map service?
Question answered very nicely above in the comments by kryger.
Related
The goal is to display large amount of data on Google Maps. By large amount I mean around 10 millions of segments stored in PostgreSQL database. The segments represent some characteristics of roads, so segments should overlay the roads in base map. The segment properties may change over time.
The best technical solution for this problem is to use custom tile server (please correct if wrong).
According to Google Maps JS API, I found out two ways to draw over the map using custom tile server:
using GeoJson/KML data (https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson)
using PNG images (https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
I have tried both. The first one does not fit my needs because GeoJson appears too large, what results in performance issues. The second one is bad from UX point of view, because it is using raster tiles, whereas nowadays we should use vector tiles. I also looked at OpenLayers / Leaflet, but didn't find an official way to go with Google Maps (see https://github.com/mapbox/mapbox-gl-js/issues/1791).
The key here would be to use vector tiles, however I cannot manage to render vector tiles (MVT) on Google Maps.
Is there any ways at all to render vector tiles on Google Maps Platform?
I've reached Google Maps Platform support and they advised me to use a deck.gl.
It is a technology for displaying huge data sets on a map, including Google Maps. It uses official Google Maps API for rendering, especially OverlayView.
There is a good blog post about Google Maps & deck.gl here:
https://cloud.google.com/blog/products/maps-platform/high-performance-data-visualizations-google-maps-platform-and-deckgl
I've managed to display custom vector tiles on Google Maps using angular and here is the sample repo:
https://github.com/yterletskyi/deckgl-angular
BTW, thanks to LuisTavares solution about the https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer library which relies on OverlayView too. I have not tried it but the approach is the same as in deck.gl so there should not by any issues.
UPD:
After playing around with deck.gl, the problem turned to implement this on mobile iOS & Android platforms. After some research I had contacted Google Support but unfortunately there seems to be no solution to this. Google Support quote:
Hello Yura,
Unfortunately there is no way to render vector tiles with the mobile APIs. I also have no recommendations for services that allow you to do this with the Google Maps API.
My apologies,
Check this library to load vector tiles in Google Maps:
https://github.com/techjb/Vector-Tiles-Google-Maps
You just have to create an mbtiles file, then upload to Mapbox or another server, and finally connect to 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.
I am creating an app which mainly features a map and some special features. Because the map is the place where 90% of the interaction happens, I consider it as an important part of the app. Having watched Dave Crawford's design consultations, an essential part of making an app look good is to create a brand. Because there is pretty much nothing except the app bar, the map and some markers, I'm considering coloring the map itself.
But I've got two questions:
Will this have an positive affect on both the branding and the usability? I don't want the user to get a headache just because I prefer my color scheme, but I want my app to be unique
Will this be possible when using the phone built-in map control? This seems especially important to me as Windows Phone is capable of saving maps ofline and I want to have access to these maps
I would argue that should not adjust something like a map, for branding experiences.
Users have strict mental models of how maps should look and function. Deviating from the norm, only for brand, is not wise.
You might consider other ways to introduce your brand and value.
Perhaps through unique pins and markers, splash screens, additive menus, etc.
I'm assuming you mean the styling of the map itself (roads, parks, etc.)?
You would need to use your own custom map tiles, perhaps produced using a service such as Mapbox.
I use my own custom map tiles in NZ Topo Map, but I had to fallback to the older WP7 map control (Microsoft.Phone.Controls.Maps.Map) in order to use them. I couldn't find a way to base the map purely on my own tiles using the WP8 map control unfortunately (this answer has more detail).
I have a large high-resolution image that I am using for an overlay using Google Maps v3 API. This works fine for desktop and laptop computers with a reasonable network connection, but unsurprisingly it does not work so well for mobile users.
What's the best/easiest way to break the image up into 2D tiles at the various zoom levels so I can act as a tile server for Google Maps via the API?
Is there a program that will reliably generate the tiles for me and provide me with the necessary zoom and coordinates for each resulting tile and/or give me the correct tile if I provide the zoom and coordinates?
Is it pretty easy to write a tile server to do it on the fly once you gather the right info? Perhaps there's source code out there that I can use as a model? (I found a tile server at http://blog.gmapify.fr/a-map-tile-server-part-2-understanding-google-maps-tile-overlays-and-building-up-a-tile-server which is certainly helpful, but it doesn't serve tiles from a source image, so I'd have to at least figure that part out...)
Or perhaps there is step-by-step algorithm that I can manually follow if that's more straightforward? (Since it's only one image and it covers an area on the map of maybe a square mile, manually doing it like that is perhaps feasible if not preferable.)
you can check MapTiler http://code.google.com/p/maptiler/. It can generate the tiles you need.
Tile server is really easy to write. The easiest way is just to host static files (your tiles) in a directory structure. The directory structure is then usually servername/zoom/x/y.png (or zoom/y/x.png). Such structure is also produced by MapTiler. MapTiler also generates an example web page using the tiles (but I guess it uses Google Maps API v2).
Information about using your tiles in Google Maps API v3 can be found here: http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypese
You can do the entire thing clientside without tile pre-cutting
See https://github.com/Murtnowski/GMap-JSlicer
slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();
Very simple.
There's a really good video tutorial on making maps with maptiler, which can be found here:
Mobile Maps That Aren't Terrible
It focuses on mobile maps, but also covers maptiler and other basics. I found that very helpful.
I'm looking to add an map to my application, which would have a world map with different coloured countries, States (in the US) and Provinces (in Canada). The user should be able zoom in to see details, as the scale for seeing the whole world isn't suitable for seeing details in Europe say. The colours would need to be programmed from my application, so a simple image map isn't appropriate.
Obviously the first place to look was Google, but Google Maps doesn't seem to be able to colour code countries. Google Charts can, but produces a single image, which isn't zoomable.
Am I wrong about google, or is there another way that I can use to produce a suitable map? It's a ruby on rails app, so anything which is ruby specific is fine, but ideally not any other language though if it's the only way, then it's the only way.
I developed jVectorMap for such visualizations.
Django has geo-django; If you want to do feature rich GIS web apps with Rails, you’re gonna have to assemble the pieces yourself.
Google maps is a good client, you can use overlays. You need the GIS data to generate the overlay polygons.