I guess that Leaflet has a projection bug. I'm trying to display a image over the Leaflet map using the "ImageOverlay" layer, but it's not fit well such as in Google Maps. We have a Python script that generate temperature graphs using latitude and longitude coordinates as y and x axis. Does anyone know if there is any solution to this trouble?
Leaflet Projection
Google Maps Projection
I think you should post this as a Leaflet issue (https://github.com/Leaflet/Leaflet/issues) if you haven't already done so.
Also, it would be great if you could post a JSFiddle or similar with an example of the code you're using to spot any problems.
I'm pretty sure there's nothing wrong with Leaflet's projection code, but there might well be some issues with the ImageOverlay or how you're using it.
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 have been trying for some weeks to come up with a price map. My inspiration is the heatmap found on the website of Housing.com . The link to the map is:
https://housing.com/dsl/heatmaps/mumbai/buy
I have tried:
Google maps Javascript API 3
heatmap,js library
and many other websites.
The resulting map that I am getting is visually less appealing.
Have they defined boundaries for very small regions and then introduced the gradient(which, again I am unaware how to implement.)
Any thoughts on how it might have been implemented are welcomed.
They don't use Google Maps Heatmaps Layer in the application, or any other library for creating heatmaps. You can see that between the requests the webpage makes are images like this, this and also more for bigger zoom levels. They just render these images over custom styled google maps as tiles.
More on how to render custom tiles over google maps, check this part of docs. For more information how to style the map below the heatmap to look like in the example, check this parts of docs.
Creating tiles images to render over your google maps can be troublesome, there are some tools, like this one which should be able to help you, but is paid. I don't know of any free solutions, you can create it manually although it might take some time.
Hope this helps you to better understand the implementation techniques behind the referenced map.
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.
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 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