4

We have done a piece of offline activity that is basically a large folded, printed map with some featured elements and content around it relating to the map.

I am working on putting this map online. I keep getting told 'put it online as a PDF' which I find ridiculous (it's A2 at original size and will be tiny if printed on a standard printer).

I'd rather turn the print price into a proper mobile-first webpage. However, what I can't figure out is to present the original illustrated map at a size that is legible and navigable given the constraints of a typical 4-inch portrait mobile device.

My first instinct is to have some sort of DIV with responsive max-width which the map is contained within and can be dragged around within for navigation.

I'd love to hear or see some real world experiences or best practices. I want to use the map we've had illustrated rather than another generic embedded google map or something.

Improve this question
6
  • Just wondering...can you just use the Google Maps API to display your own image instead? No need to re-invent the wheel. Or maybe something like PanoJS
    – Roger Attrill
    Jun 27, 2014 at 22:45
  • The requirement is to use the illustrated map that we've had produced.
    – Dan
    Jun 28, 2014 at 9:17
  • That being said, PanoJS looks like it'd suit the requirement well, except for having interactive (clickable) areas actually on the map.
    – Dan
    Jun 28, 2014 at 9:19
  • 1
    That's what I mean - you can use your own illustrated map using the Google Maps API. No google data needs to show - only your own map. Essentially you use Google Maps as an image viewer. example
    – Roger Attrill
    Jun 28, 2014 at 10:04
  • 1
    @RogerAttrill that's awesome, never knew it was even possible. Does this technique provide some way to map real locations - lat, long - to points in your custom images?
    – Dan
    Jun 28, 2014 at 11:16

1 Answer 1

Reset to default
1

First is to make sure leverage the strengths of the platform. Touch interaction and the default iOS/Android gestures are great for quickly panning and zooming in/out if you just treat the map as a scalable image.

However if the fully zoomed out map has no discernible features, then user will not know where to start, nor how to orientate when zoomed in, and it will be frustrating. If this is the case you will then need one or more overlays or alternate "feature guide" maps for the further zoomed-out views.

Improve this answer
1
  • 1
    Agreed, it's not a static map like in real-world, it can be fully dynamic. You should use all the benefits of a touch device and give the user the opportunity to zoom and pan, but you should also consider to adapt the map itself based on zoom level. You may organize additional information in layers in a way, that the user can switch between them, or put clickable markers on the map to bring up more details, so there's never too much information on screen (which is tiny) at the same time.
    – CodeManX
    Oct 17, 2014 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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