Appending images to jQuery Geo

[boazsender]

Is there an API for overlaying or appending images to a jQuery Geo map?

[ryanttb]

Yeah, there are two ways to do it.

I don't have an example of the fastest way at the moment (a custom shingled service with a src function that draws images to a canvas using geomap's toPixel method and returning canvas's toDataURL).

There's an early version of the other way that requires less code here: http://jquerygeo.com/1.0b1/examples/marker.html The API will be more defined and slightly different in b2 so that's why it's not documented yet.

[ryanttb]

Actually, negative margins work fine on the existing .geo-label CSS class. Here's the correct way to do CSS markers in jQuery Geo b1:

http://jsfiddle.net/ryanttb/8qpG4/

I will still get a demo up showing the more advanced/faster way using a custom shingled service object.

[starfishmod]

+1 - I too would like to overlay several largish images (non-tiled) onto a map :)

[ryanttb]

I finally put up an example of the two different ways to put images onto a map in jQuery Geo 1.0b1, css labels and canvas services:

http://docs.jquerygeo.com/examples/markers.html

Please let me know if this answers your questions. Please note that in b2, the CSS label technique won't require the markers to disappear when the map moves.

starfishmod, you could use either of these for large images just as they are done for small marker images.

[horfic]

Hi,
i like the idea, but i got one issue with it. You can't have with the css technique multiple different images for a service.

e.g. You create a service called vehicles and you want to have seperate images for trucks, buses and cars.

This is currently not doable with the css method. I don't want to use the canvas method because its just to much code. I got around 30 services as base maps and around 3-4 services for each base map as informationlayers like vehicles, flags, paths, etc...

So is there a possibility to set in a class for a point in the src function, would make it easier. Or something with similar functionality.

[ryanttb]

That's a lot of services! If possible, I recommend merging some of the basemaps or resetting the services object to only have the ones of interest when the user wants to see something different.

Apart from that, the label argument to append takes any HTML, so you can do what you want with the CSS method by appending a label that's a div with a CSS class that has the background-image definition. Each marker type would get a different CSS class when you append. Your style sheet can handle it from there.

http://docs.jquerygeo.com/geomap/append.html

For example,

$("#map").geomap("append", geo, '<div class="truck" />');

.geo-label {
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
}

.truck { background-image: url('truck.png'); }

(apologies for the delayed response)

[marplx]

The first JSFiddle by ryanttb was a bit too much for me. So I shrinked it to a small example.
http://jsfiddle.net/EV6ME/

[ryanttb]

Heh, thanks! I should probably make a version of the markers example that's simpler but still shows switching between CSS markers and canvas markers.