View Full Version : Map with click points

3 Nov 2011, 9:15 PM
Hi Everyone.

I'm starting an app with one part where I'm not sure how to do it. I've done some research, but wanted to see if anyone had done something similar and had any tips.

I need to have an image with an illustrated map of an area, not a Google Map. This map will have points of interest on it marked with a number. On click of one of the numbers, the app goes to the information page on that particular point of interest. As the map might be large, it has to be able to be zoomed in and panned around.

I'm assuming I'll have to put clickable areas on the map by some sort of coordinate system, but I see the difficulty being able to adjust these based on the size of the map and zoom level. Also, this has to work on iPhone 3gs, iPhone4 and 4s plus Android. The screen resolution on those phones is different, so obviously to get the map to fit to a page will make it different sizes, this also possibly changing the coordinates.

Any hints or tips?


4 Nov 2011, 1:10 AM

I'm looking to do the exact same thing, Ive been reading lots about how to get an offline map with points. At the moment most map solutions seem to only work online. Openstreetmap and openlayers looks promising, I think it might be possible to cache those from what I've been reading but need to look into it more. Google 'sencha openlayers' to find some interesting info. There is also ExtMap but it looks like the offline part is not working (it says in the notes).

My thoughts if we were to use a picture map that is semi-zoomable we would have to use a detailed vector map (maybe in SVG?). My map doesn't need to be particularly detailed but it needs to look pretty and would be nice if it could zoom a little bit.

I hope we can both help each other out in finding a solution I have been wanting to make something like this for some time!

EDIT: just found this, maybe we can use it as a starting point?


Also need to do some more reading on Polymaps, Tile5 and Leaflet - perhaps one of them do an offline solution...


5 Nov 2011, 1:06 AM
Interesting stuff there, thanks for the links. OpenLayers looks very interesting, I'm not sure if it is overkill for what I need though. I guess if it works then that is what matters. It looks as though it would do what I need, but again, I'm wondering if it is overkill and instead I should just try to remember all that math I learned in school and do the calculations myself. I only need a 2 or 3 levels of zoom on an image with clickable points. These won't be high detail maps of cities, countries, etc, just a line drawing of a singular place with points of interest.

Thanks a bunch for all the info though, and if I find anything myself I'll be sure to post it.


5 Nov 2011, 1:55 AM
Ive just been reading a bit more about mapbox, looks really nice. Take a look at their video:


They have a free iPad app and you can download tilemill (Mac and Linux, Windows users can download the virtual box image on their site that lets you run the Linux version) that lets you make your own maps that you can upload via iTunes to the app! Seems pretty cool...and might be the easiest solution for us as would not need any coding!

I'd like to try a proper offline web solution with mapbox though eventually so I can integrate it with sencha touch (my goal is to have a sidebar menu where the map stuff is one choice, and I have 2 more things in my menu that will be separate).


2 Dec 2011, 6:48 AM
..so I am still researching this, there seem to be so many solutions it's hard to know where to start!. Ideally I would love to use something like ExtMap (http://www.extmap.com/index.php?pid=2) that has the ability to store stuff offline.

This site seems quite helpful and begins to explain things in sightly easier language:

I am yet to test this yet, but apparently if you want to use HTML5 offline with Google Maps API 3, you need to add these files below in the NETWORK section of the cache manifest file:



5 Dec 2011, 2:48 PM
I've finally had some progress with this, an offline map based on GeoExt that zooms in smoothly and even zooms in when offline.

Would anyone be interested in helping with the next part, adding click points / icons that have popups? I think the next step is to dissect the openlayers sencha example which has popups working but a broken zoom (zoom appears jerky).


9 Dec 2011, 7:36 PM
Wow, looks like you have gone a long way with this.

I've setup the rest of my application and am moving on to this part now. I'm not sure I need such a complex solution, but at the same time, I don't want to have to re-invent the wheel.

Do you think OpenLayers is over the top for just a map of a small area, not very detailed, with a few markers? I do like how easy it is to zoom in and out though.

I'll have to have a closer look soon. Maybe I'll be able to help you with the markers as I'll have to do that as well.


12 Dec 2011, 1:28 AM
I did find this tutorial for creating a simple map with a marker: http://www.webdesignermag.co.uk/tutorials/build-mobile-apps-with-sencha-touch/

I think this will only work online though. Geoext seems to be better suited for offline use as it has a datastore already setup for storing things like tiles. Geo ext also appears to have no problems with slow zooming afte clicking a popup like the openlayers sencha example has.

I loaded the geo.ext sencha example, panned around the whole map and zoomed in 2 or 3 levels and saw safari loading all the tiles in activity monitor. I then saved all the loaded map tiles locally from the browser (alt-clicking on the tiles saves them, or I just saved the whole site in safari then used the safari unarchive tool you can find in google which extracts a safari archive). I then changed the links in the JavaScript file to the local file system and the map appears to load the tiles even when offline.

I will try and post something using the new sencha fiddle online editor...that way people can see the code and add to it.