I've created a tool based on the Google overlay tiler. This allows our users to upload a floor plan, adjust the position etc. using Google maps. Nothing fancy.

We have a server-side job which creates the geo-referenced image using gdal_translate. The job then slices it up using gdal2tiles.py and then saves to s3.

This all works nicely. The idea is that they can use this to correctly position their wireless access points etc. The user can zoom in and out. Again, all is well. Something like this:

enter image description here

The problem I have is that they actually need to see the floor plan in it's original format - in full screen. Not rotated as the image shows.

I don't really need the map at this point - I just the image with the markers in an overlay as so:

enter image description here

I obviously need to rotate the map so the floor-plan is aligned correctly horizontally.

How I can use the data in the geo-referenced image etc. to calculate the scale for the map and the rotation I need?

  • 2
    Will attaching a thumbnail of the plan to that object at the same time as geo-processing to align the building be easier than back processing the geo-processed image?
    – yanes
    Nov 30, 2015 at 22:07
  • @yanes We can do that - we already store the original with the request so we can display that on the screen in the right format. We'd then need to position the markers somehow. Looking at it Google maps won't even scale that big in most cases. Nov 30, 2015 at 22:13
  • gotcha! one more question, is automating is worth saving them the time to box zoom on the feature (the plan with the markers) and use the rotate tool that comes with the map server? If yes, my suggestion is along the lines of first finding out the angle between 180 and the line that goes through the center of the image and subtracting/adding that to 180 or -180 to find the angle you need to rotate the image. Also beware with angle calculation as different software calculate it differently. ArcGIS starts counting degrees from North (0, Azimuthal), rather than from east. i'll look 4 a link
    – yanes
    Nov 30, 2015 at 22:28
  • @yanes This is all v. new to me :) We kind of need to automate since we have about 3500 customers each uploading 1-30+ plans eeek. Plus, the access points are already in the system with geodata. However, we can probably do away with tiles or not create in the first place since we're just interested in the rotation and scale I guess. Nov 30, 2015 at 22:32
  • where does the original data for access points come from? how is it given to the system? Dec 7, 2015 at 3:45

1 Answer 1


My //TOTAL HACK answer is (only tested on chrome, so YMMV):

  • Calculate the rotation of each stores floor pan and store it somewhere you can get to it.
  • Call map.panToBounds() to the floorplan's bounding box (which it looks like you already have).
  • Append a CSS3 rotation transform to your #map div equal to the rotation of the floorplan.
  • Lockdown the UI so that a lot of interaction doesn't break.
  • Workaround all the stuff that goes wrong.

Rotation support is almost complete among browsers, but the gmaps js api doesn't like being tossed around like that. Some stuff appears to work fine, and it doesn't completely crash so that's a plus. All the onscreen stuff rotates fine, but it appears that rotating the div breaks click events on markers, so if you want them to do much more that view the zoomed in floorplans, you'll have to find a workaround for that.

The only other big downside I can think of would be if, when georeferenced, the floorplans appear skewed, then user will be looking at a full screen view of a skewed floorplan.

Upside is that it'd all be client side, with no need for additional server processing, storing and using the original, or doing anything weird with passing coordinates between the original and gmaps.

  • Thanks for the reply :) Sorry for the total noobie question but could you include some information about how I can calculate the rotation of the image from what I have? I have the bounds but wasn't sure it'd work since Google doesn't seem to like the zoom I need. Dec 7, 2015 at 15:11
  • If you add the geometry library to your gmaps api, you can use the computeHeading(fromLatLng, toLatLng) on the spherical functions from here: developers.google.com/maps/documentation/javascript/… . Then you just need to feed in the correct points to get the heading back.
    – DPierce
    Dec 9, 2015 at 1:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.