2

I have map images of my local ward (Areas geo-referenced and drawn using QGIS and Adobe illustrator. Now these maps are in .png format (Raster images). It's not a tile linked to some mapserver such as OSM or Google Maps, but plain vector images which have routes "drawn" out.

I want to be able to link these routes to independent pages (Each route has a set of data stored in a mysql db). I want people to be able to hover over these routes on the vector image with a highlight effect for the route (routes can be curved or straight). And when they click on a particular route, it opens a popup which gives details about the route pulled from the db.

I understand that the PHP GD library can be used for this purpose, but how do i highlight/link routes using this library? If anyone can point me to specific functions from this library, that would help.

Help would be greatly appreciated.

Improve this question
2
  • 1
    Your question conflicts with itself. I was going to edit it but can't be sure what you mean - PNG images are rasters, however you keep referencing vectors. A vector format would be SVG. Which are you using?
    – GIS-Jonathan
    Apr 16, 2012 at 9:48
  • Sorry about that. What I mean is, i export the images using Illustrator (which is used to create vector imagery). So the SVG format is available. I assumed png would be the ideal format to create dynamic images. But depending on which is feasible, that format would be used. So I'm wrong in stating png as vector images. Question is, which format is most feasible to do what I'm asking for? And how?
    – KaushikTD
    Apr 16, 2012 at 9:54

2 Answers 2

Reset to default
2

There are quite a few ways to do this, it really depends what sort of user-interaction you want.

The simplest option would be to use the HTML <map> element. There are lots of online tutorials on it, but a couple results (including examples) to get you started:

Simply put, the way it works is that you create your image and place it into your web-page (the image can be either SVG or PNG, doesn't matter). You then set up areas which when clicked will take the user to the relevant page for that area.

There's a online tool to allow easy generation of the image map areas (it'll give you the HTML): http://www.image-maps.com/

The advantage of this method is that its dead simple (there's no need for any PHP) and it doesn't require anything fancy in the browser (not even JavaScript!).

There are probably JavaScript libraries out there that allow you to give you a "popup" when clicked instead of taking you to the page itself.

Improve this answer
2
  • I guess this would work, but I've been recently reading about the power of SVG mapping and how many features (Like navigation tools, zooming etc) can be integrated into a single SVG file. But ofcourse, your solution seems to be the easy way. Just one question, effects like highlighting a route and making popup boxes can be added with javascript right? To the same HTML map elements?
    – KaushikTD
    Apr 16, 2012 at 11:37
  • I imagine you could do all of this with SVG or JavaScript or HTML5 or Flash or Silverlight or... you get the idea, there's a lot of ways to do it. All of those will likely be flashier (i.e. highlighting, popups etc) than my solution but much more effort to implement too. If you want to explore the options further I'd suggest you ask this question at stackoverflow.com as its more programmatical.
    – GIS-Jonathan
    Apr 16, 2012 at 11:46
0

keep in mind that there is an awsome plugin for qgis http://planet.qgis.org/plugins/imagemap_plugin/, which allows you to create imageimaps from vectordata direct "out of the box directly" - painless:-) Of course you can have underlaying raster-layers too, but you need a vector-layer (e.g. a shapefile) to create the html-imagemap

Improve this answer
1
  • That's awesome. Will check it out.
    – KaushikTD
    Apr 16, 2012 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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