I wanted to know how Google Maps was working in the browser and I saw that :
The map is divided in div's of 256x256 px's.
When moving on the map it is requesting png/images. Very little additional data is received in a separate response for each image. (I didn't saw anything missing in the images)
It is adding canvas elements for drawing markers, circle, lines,...
I thought Google Maps was only receiving data, that was then drawed with canvas in the browser.
Is it correct Maps is about png/images?
This would imply image they make available are rendered/updated upstream with the data they collect?
Related
I have a map created in My Maps, and I wand to embed it in a website, however I'd like to have InfoWindows on marker click instead of the default side panel, and change the description a bit.
From what I found, the only way to do so is to use a regular Google Maps API and add my data onto it with a KML layer. This is working, however, the icons (the pins) are highly pixelated and look terrible. When using the same map via embed (or simply opening it) they are OK.
Would really appreciate any help with the issue. Probably there is another way of adding a custom map to an API-powered map?
The answer I've come up with is: no way to achieve what I'm looking for.
When exporting KML layers, Google scales all icons to 32X32 px, and then scales them up (kml file contains scale 1.1 directive). Even if you change the scale, the files remain 32X32, so it does not help; you need to create another files, in other words: the kml exported from Google is not usable if you have custom png icons.
I ended up using regular markers instead of KML layer.
I am working on a project in which I need high resolution images from google maps to plug into a canvas as the background. I know that the static image api doesn't allow you to get the 45 degree aerial shots that are much higher fidelity than regular satellite images. I need high fidelity images, and thus I need the 45 degree aerial shots and the static image api is out. Are there other approaches to saving google maps images with javascript? I have about a 800X500 embedded map that users will use to find an exact location they want to isolate and then I need to grab an image of it.
In theory, you could use the canvas to rasterize the output of an embedded map out to a jpg, but it seems likely that this sort of thing would be forbidden by Google Maps' Terms of Service. To wit:
You may not access the maps or satellite images through any mechanism besides the Google Maps APIs (such as the creation of your own mapping API or the use of a bulk tile download script)
https://developers.google.com/maps/faq#tos_tiles
I am trying to setup an image viewer/server/tiler that will take a large (>~10gb) .tif file and tile it in an html5/js viewer.
Essentially, the application will:
Tile the image on the server - on-the-fly would be great since users will be uploading their own images
Display the tif image (full or tiled)
Zoom enabled
Pan enabled
Preferably javascript / html5
On click event, draw a marker
Return x,y (row,col) for that marker
So far I've looked at IIP Imager Server. But it doesn't seem to able to return an x,y (row, col) or draw a marker on a click event. Plus, the documentation appears poorly written and setting it up is incredibly difficult. So I want to make sure that it's even possible to do these actions with IIP Image Viewer, before going through hours of work setting up the server.
I've also looked at MapTiler. This works great on tiling a large image to place in the google maps api. The problems with this is that 1) you now have to pay for most of it unless you use the older version, and 2) you have to tile the images manually and place them on the server before you can use them. (unless their is a command line method that I don't know about??)
Users will be uploading their images individually, then view them in the viewer and be able to click the pixel and return the x,y.
Any tips or suggestions are appreciated!
I have made a custom map using the Google map API v.3. I am trying to reduce the blank squares that you see when panning or zooming by caching the images.
I am currently looping through all the images in JavaScript and loading them into image object before I load the map, but this hasn't really improved it at all. It seems when ever the map loads it still makes its own calls for those images and it is only after visiting that part of the map does the map run smoothly without any blank squares.
Does anyone know how to improve the performance of the image loading for Google maps?
I am fairly new to using the Google Maps API, but I have been playing around with getting an overlay of a gridded PNG image into Google Maps. Here is the url: http://www.nohrsc.noaa.gov/~lkarsten/Alaska_SWE.html.
Just a little background on the image being displayed. It's a gridded PNG file displaying snow water equivalent values at 0.01 degree lat/lon resolution with the bounds of the image being 48.0 - 72.0 degrees latitude and -126.0 to -168.0 degrees longitude.
When I use the ground overlay function (google.maps.GroundOverlay), the image is overlayed correctly. This url has the correct overlay positioning using google.maps.GroundOverlay: http://www.nohrsc.noaa.gov/~lkarsten/Alaska_SWE.html.20120312.
However, I wish to add features to the overlay, such as opacity, etc. You cannot do that with the GroundOverlay function, so I have been using the google.maps.OverlayView function, but I am getting some sort of weird distortion to the image. The extents seem to be fine, but it's as if the image has been stretched in the middle. The image was generated in lat/lon coordinates, so I am not quite sure why the image is being distorted in this manner. Perhaps it has to do with the Google Maps API Mercator projection?
Has anyone else encountered this issue before?
GroundOverlay support opacity, according to the API reference.
GroundOverlay class slides an image into multiple divs to minimize distortion for large areas. You need to implement similar logic if you want do a custom class.