I am using Google Earth Plugin api to display large images as photo overlay (using image pyramid: https://developers.google.com/kml/documentation/photos). That works just fine.
However, now I need to add a user ability to mark a point on the image.
My questions:
1) Is it possible?
2) If not, are there other methods to display large images (vertical/diagonal) in google earth which allow this ability?
Yes it is possible, if the image is an overlay on the earth then each point of the image must correspond to a point on the earth.
It would simply be a case of allowing the user to put placemarks via clicking on the image.
There are a couple of tools that allow you to slice up large photos into image pyramids.
The first one "GMap Image Cutter"actually shows an example of the 'placemark for an image' idea in the output.
GMap Image Cutter - http://www.bartlett.ucl.ac.uk/casa/latest/software/gmap-image-cutter
MapTiler - http://www.maptiler.org/
Related
What I'm trying to achieve is to map icons, labels, polygons to raster images.
And to have an ability to zoom.
I.e. to map furniture to offices / buildings.
Also it's needed to be said that user should work with it through API (through web site interface).
Recently I've spot Mapbox.
While Mapbox is awesome and seems to be a good fit to achieve my goal, I find it hard to find docs for implementing it.
What I've found so far is:
I can use mapbox-gl-draw to draw polygons
I can upload datasets. Which consist of position, data. With that I can upload icons, labels and probably polygons.
The missing puzzle is: How I can work with raster images?
and
Should I position (edit) icons, labels on my own and later save to dataset? Or there already exist a functionality drag-drop out-of-box?
One idea is to use Mapbox with transparent background and to zoom raster image separately. Kind of synchronizing it with the map.
Any help would be appreciated
I believe this example from the mapboxGL examples shows what you're looking for: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/.
Note that the radar layer, while it looks like a layer constructed in data, is simply a gif added as an image layer, with a bounding box of of four lngLat coordinates. https://www.mapbox.com/mapbox-gl-js/assets/radar.gif
I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.
So here's a possible use case. I'm building a website to help city planners test parking availability.
The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
The website script tests the selected polygon area for parking availability.
When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)
(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)
All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.
Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.
I would draw and rotate in a <canvas> and then out that on.
EDIT:
place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.
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 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.
I'm looking for a google maps like js library just for a image. The features i need are simple: Drag, Scroll, Zoom and most important are markers (eventually vectors). But instead of a map I want to have one picture in the background.
Description of what the library should do: Think as it would be a map-similar situation. In this web app I want to have a image (e.g. a treasure map, map of a building) like the tiles in google maps. The image should be moveable and zoomable. Overlayed over the pictures should be markers. Markers can be as simple as letters (a,b,c), symbols, pointers, div elements... The markers are fixed to the image, positioned relative to its size (zoom) and position like on google maps. drag n drop support is needed for user interaction. While editing the resource a user may drop a new marker onto the map or move/delete an existing one. If the user is not in the editing mode the markers may funktion as tooltips or links. Also if clicking an link outside the "image", the image should scroll to the right position, to show the searched result on the "image"-map. The App should also work on mobile devices.
Has anyone already seen such a tool or is interessted in helping to develop it?
Regards Manuel
How about openlayers?
It has a similar interface to google maps but allows you to customize the tiles/map and markers and doesn't rely on google's servers.
You can use custom layers with Google Maps - so you could replace the entire map with your own tiles (image). Simple example is here: http://code.google.com/apis/maps/documentation/javascript/examples/groundoverlay-simple.html or something more complicated http://mapwow.com/