Google Maps API ImageMap Coordinate Limit - javascript

I have a Map (Google Maps API 3) that uses purely coordinates, as the world it shows is flat, there is no lat/lng. However, when I scroll down on the map, I reach the limit of what it shows before my images stop. Also the starting point of what it shows is far to the topleft, not centered at all.
I've seen the boundary and center commands, but they're for lat/lng and I have no idea how to make that work.
Here's my current .html:
http://pastebin.com/8KTu7Sii
It gets tiles from /tiles/, which has these contents:
http://pastebin.com/VHHn7rrZ
Unfortunately that folder is 1.7 GB, which would take me days to upload.
So the question is, how do I set the proper XY boundaries and how do I set a XY based Center?

Related

Get compass orientation of wgs84 coordinates or polygon

I got a set of wgs84 coordinates to place a polygon on Google Maps. I am wondering if i can use the same coordinates to get a compass direction of the coordinates. I don't need a solution specific for Google Maps, javascript or php. I am just wondering what the right approche would be.
Something like this would be the end result. I understand it needs some sort of algorithm in the background
I found Geolib and the 'getCompassDirection' function but this function only allows 2 points to create a line and get the bearing(angle) of that line.
You can't get any direction information out of a single position coordinate.
Position coordinates don't represent any knowledge about the orientation of an object. Therefore you need something that has direction (i.e. a vector between two coordinates) to calculate compass direction. That's exactly why the function you mentioned asks for two points.
This means you can get a compass direction for any edge of a polygon (by using its two end points), but not for its vertices.
Hope this helps!

Google maps: get real width/height

I am using google maps api to insert a map in my page and inside of it I insert a rectangle. Everything works fine but I have this question: if the users zooms in or zooms out, I would like to "capture" the real width/height of the map (latitude/longitude left top and latitude/longitude bottom right) so I can select the points in my database that should be inside the viewport of the map.
I can easily select from my databas all the points that are inside a well defined rectangle, so how do I know the real with/height of the map that is being displayed (considering always the zoom applied)?
You're not looking for width and height, you're looking to get the bounds of the map which, conveniently enough is available via the [getBounds][1] method on the map object.
You probably want to do something like this:
google.maps.event.addListener(map,'idle',function() {
//make some ajax request with map.getBounds()
});
Every time the user moves the map (pans/zooms) you can use the getBounds() method to get the lat/lng at the corners of the map.

How can I rotate an overlay image on Google Maps?

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.

copy & stretch part of canvas

I use three canvas' over each other to draw a map for a robot application. The map gets constantly updated (on pixel level) based on the robots sensor results.
I now want a part of this map to be displayed in a zoomed way at a diffent place on the page.
Aim is to have a zoomed view of the robots actual position drawn above the complete map.
What is the best/easiest approach for this?
Thanks
Robert

BingMap get polygons in view

I have map with 30-50 polygons on it. There are like 4000 points in every polygon but they are hidden at beginning. I want to disply the point only when zoom is <=6 but not all of the point but only ones related to the currently displayed polygon(s). So I need to get the polygons in view (displayed in this moment on the screen).
Do you know how to get the polys in view ?
ps.Im working with javascript
Wont be quick if you have complex or lots of polygons but works (assumes v7 api):
https://gist.github.com/1704172

Categories

Resources