I’m not very skilled at modern Web design, but I’m trying to think through how to put a large graphic (5000 x 3000 pixels) on a webpage and have hotspots on that graphic (when zoomed in) be clickable links. As it happens, the graphic is a map of North America—but don’t get distracted and suggest that I put dots on Google Maps or use Leaflet and MapBox tiles. This map is already drawn, in a conic projection, so probably best to just think of it as a large graphic.
The map is sprinkled with about 200 small ovals containing a number, and I want to make the ovals clickable so they’ll bring up name and facility info. I thought maybe I should focus on zooming technologies like Open Seadragon or Zoomify—but those don’t seem to offer a way to make part of the image clickable links. Is there some term for “clickable link” or “hotspot” that I’m not thinking of?
I could do it with calling up a quarter or ninth of the continent at a time as a dumb JPEG, and then putting a usemap on top, but that wouldn’t be pannable. If you were looking at New England, you wouldn’t be able to pan over to California; you’d have to go back to the continental index or click on a marginal link to the next section over, the way I did with this map.
I thought maybe jumping straight to SVG would be they way to go, but even a small simple map produced a 2MB SVG file, and I never got it to display in my browser.
I’d love to hear thoughts about this challenge. Maybe just thinking of the right buzzwords to search will allow me to find that this problem has already been solved.
Oops; I see that you mentioned the usemap technique. But I’m not sure why that wouldn’t work for a pannable map. It should work just as well embedded in a large, scrollable page with a giant image.
I’d use canvas and a little js. It could get a bit complex depending on how nice you want to make things look and how optimized you want it, but the basics should be straight forward. In fact I wouldn’t be surprised if there are js solutions out there ready to use.
I’d grab the highest resolution version of the image I have. Cut it into chunks using some free utility (just search for image splitter/slicer), use the HTML5 canvas tag, and grab a reference in js.
Then it’s a matter of building a model that is made up of the zoom level, the size of the canvas window, the size of the complete image, and write a function that tells you what images to load and where to put them in the canvas at any one moment. Tie mouse events (mouse down + move say) to transformations on the x-y axis and rerun that function when that happens.
You’d also need a hotspots model - probably an array of them with location data so you know to trigger whatever action you want triggered when clicking on a hot spot.
Yes, this is probably over your head, but if you know a little js, you cna probably piece together a solution. A quick search gave me this:
For example, something you can build on.
Again, I wouldn’t be surprised to see someone’s made a module you can drop into your webpage, but my google is failing me.