Interactive map done in Adobe Edge...looking for an easier way

[fig]

Hey guys, been working on a map using my limited HTML5/jquery skills. I've done this map in Adobe Edge which works but is an obviously ineffective way of doing it. Clicking any of the boxes next to "Click to View" on the top left nav will bring up a list of amenities at left and data points on the map at right. Clicking any of the data points pops up an info box with more detail on the amenity.

I'm going to have a ton more amenities to add on the live map so I'd like to do something I can more easily update, ideally in a text editor. I don't do a ton of jquery but I'm pretty sure this can be done with some show/hide functionality. I could code that part of it reasonably easily, but my biggest challenge would be how to place the data points on the map itself. I'd also need to figure out how to switch between the different amenity lists and data point groups on the map, which I'm guessing could be done again with show/hide?

If anyone has any tips or code bits to help get going on this I'm all ears. Thanks!

 

[fig]

Ok, made tons of progress, this map is all jquery.

It's pretty close to functional, only the red number 1 on the first Restaurant map is working at this point. A couple questions for any code monkeys who might be around:

- how can I get the box to appear over the red number when the number is clicked? I've tried a variety of z-index values and can't find anything that works.

- is there a way to semi-dynamically populate that box with text when a number is clicked? The idea is that when a number is clicked the box will pop up with the business name, address, and contact info, if I could find a way to code that into the number click it would be a lot easier than having to show/hide 100 different info boxes.

Thanks!

 

[960design]

Yes everything you want is easily possible.

Read up on HTML5, CSS3, image maps ( probably the opposite of what you are trying ), transitions, :hover, absolute/relative positioning.

There are literally dozens of ways to get the results you are looking for. I'm lazy and would generate the code from a database using php. Build a backend so that I could quickly add coordinates and business information and have the web page populate based on a loop through the data points.

 

[fig]

Thanks, but been reading up on those for quite a while and if you check the second link I'm actually 90% of the way there and just had a few leftover questions

I fixed the z-index issue (z-indexed elements have to have a position type applied to them, for anyone wondering) and now just trying to find an easier way to work with the text boxes rather than creating a new infobox element for each data point.

Doing something database driven is well beyond my expertise and not something I'll have time to learn for this project, I'm ideally trying to find a solution where I could have one textbox element that loads in a value stored in the click action of the number all done in the HTML.

 

[fig]

And got it working.

The text in the infobox is now being populated via an .appendTo jQuery call in the action on the 01 button.