Is there any way to render image of imageviewer on google map ?

[ankit-vaghela]

I want to use image on google map using overlay. Right now it is render canvas so it is not worked as overlay image. Image show with boundary and I also want that on click of image I will get lat,long.

So if I render of imgviewer in overlay then I can get lat, long on click of image.

[waynegm]

This plugin uses the Leaflet map widget for rendering so I can't change how it is rendered. You could look try my imgViewer plugin which doesn't use the html canvas for display.

[ankit-vaghela]

In imgViewer I can't plot x and y marker. Is there any example. Actually I use imgViewer2 for plot position marker now I want to use same position to plot on google map. Is there any way to do that ? I have data of x and y which I store using imgViewer2, I want lat long of that x and y.

[waynegm]

There is a plugin derived from imgViewer called imgNotes that puts markers on the image. The coordinates from imgViewer2 will be relative image coordinates where 0,0 is the top left corner of the image and 1,1 the bottom right corner. To convert those to lat long you need to know the lat,long coordinates of the top left and bottom right corners of the image. Then is just some simple maths. imgViwer2 does have a method "relposToLatLng" but it doesn't generate a map lat,long it is provided to convert between the relative image coordinates and dummy display coordinates used by Leaflet for displaying the image.

[ankit-vaghela]

Ok I change self.bounds and set lat and long and getting perfect lat and long on click. I see that, but now marker plot get stop. So I need to convert x , y to lat long. How to do that ?

[waynegm]

You shouldn't be changing self.bounds as that will upset all the internal scaling used by the widget. I presume you are using a custom onClick callback. See below how to scale the relative image location to a lat long given the image boundaries.

var imageBounds = {
          north: 40.773941,
          south: 40.712216,
          east: -74.12544,
          west: -74.22655
};
var $img = $("#image1").imgViewer2({
    onReady: function() {
        $('.leaflet-grab').css('cursor','crosshair');
     },
    onClick: function( e, pos ) {
        lat = pos.y * (imageBounds.south - imageBounds.north) + imageBounds.north;
        long = pos.x * (imageBounds.east - imageBounds.west) + imageBounds.west;
     }
});

As you actually know the lat long boundaries of the image why not just display the image as a Ground Overlay in Google maps?

[ankit-vaghela]

I try solution which you gave me. It have little bit accuracy issue. On image corner little bit incorrect lat long goes outside. Do you have any suggestions to make it accurate. Thanks for help.

[waynegm]

Do you mean the lat long calculated is outside the image bounds?

[ankit-vaghela]

Yes. It is outside then bounds lat,long

[waynegm]

Can you provide a html page that I can observe the issue on?

[ankit-vaghela]

I can't share here due to security reason. Please share your email id. I will send html page on your email id.

[waynegm]

Send it to waynegm@internode.on.net

[ankit-vaghela]

today i try to send you email on above id but mail delivery fail. First time when sent you email before 5days ago it sent successfully.

[waynegm]

My email address is active. I tried to send you an email with an attachment but gmail rejected it for security reasons. I looked at your page and to be honest my plugin wasn't designed to do what you are trying to do. I'd also be concerned that with your solution you will end up having to hack your code for each new image. Previously I had suggested that you georeference the image first so it can be directly displayed on the map. The attached zip file shows this approach. I have georeferenced your image file and displayed it with the Leaflet map widget but Google Maps would work just the same. As you can see zooming and panning the image work perfectly. With additional code you would be able to pick locations on the georeferenced map and get location lats and longs directly. Georeferencing is relatively easy - you can do it in QGIS or there are online sites such as Georefenecer.com. Once the image is georeferenced you can display it in any mapping software online and offline as your need arises. map_test.zip

[ankit-vaghela]

I see zip file you sent. Main issue is to get lat and long from x and y. Because we use first imgViewer2 and store data for 20k records in x and y. So want to convert that any how in lat and long. Also we use image vertical and in map it is horizontal. this two is main issue. I am checking QGIS. I don't have any idea how it will be helpful to me.