allow a single image to be used as a virtual shingled service

[umbregachoong]

New at using this.

I did this:

$(function () {
  // create a map that replaces the default service with
  // one using a string for the src property instead of a function
  var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8,
    services: [ {
      id: "osm-string-src",
      type: "shingled",
      src: "myblahblahimage.png"
    } ]
  });
});  

However, the image is stretched, and the zoom function works briefly but does not stay zoomed.

1. How do I get the image to render correctly without stretching- do I set the image with a height and width in an inline map style?
2. How do I get the zoom to stay?

Thanks in advance for your help.

[ryanttb]

Unfortunately, if all you have is a single source image (as opposed to an image server*), you will currently have to do a lot of coding work yourself to display it in jQuery Geo. The best way would be to set axisLayout to image, then create a singled service with the src property set to a function that can draw the image to a canvas in parts. Your src function will get the bbox in pixels and have to draw pieces of the image to a canvas and return the result using canvas' toDataURL function.

I will attempt to get an example online for you.

• IIPImage is a good example but there are many others

[ryanttb]

I know this issue is super-old but I am planning to build this type of feature (using a single local image as src without requiring an image server) into jQuery Geo this summer.

[Kampii]

Hey Ryan,

Thank you for your email this morning..

I just wanted to let you know that I found a very nice source code/ demo here (http://webcodingstudio.com/blog/jquery-tilezoom-plugin ) for the tiled images. The problem with it though is that I don't know if it supports the measure distance and area measurement. It looks like it doesn't. I guess I am wondering if there is a way to merge these both tools together.

Here (http://labs.webcodingstudio.com/tilezoom/2dollars.html) is the direct link to the "dollar" demo.

[ryanttb]

It appears tilezoom requires that your source image be pre-chopped up into tiles. jQuery Geo can support that as well (plus you get measurement tools, annotation, touch support, etc.). The new feature I plan to add will allow you to give it a single large image to interact with so that you don't have to preprocess the image with server tools or run an image server.

[Kampii]

Yea.. This is exactly what I am trying to piece together from different sources. I am not a programmer so I am looking for examples/ source codes and then try to modify them.

[ryanttb]

Here's how it's done with jQuery Geo in its current state: http://jsbin.com/vunomi
I'm going to see about adding this as a new "image" service to make it a little simpler.