Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 16, 2014, 10:52 AM   #1
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Interactive map done in Adobe Edge...looking for an easier way

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!
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Jan 16, 2014, 06:43 PM   #2
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
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!
__________________
figdigital | @figdigital | dribbble

Last edited by fig; Jan 16, 2014 at 06:48 PM.
fig is offline   0 Reply With Quote
Old Jan 17, 2014, 07:46 AM   #3
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
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.
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote
Old Jan 17, 2014, 11:03 AM   #4
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
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.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Jan 17, 2014, 01:49 PM   #5
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
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.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Adobe® Edge Web Fonts pelsar1 Web Design and Development 4 Mar 21, 2014 02:11 AM
New Map App BLANK in Map View MagnusVonMagnum OS X Mavericks (10.9) 6 Nov 8, 2013 04:43 PM
Interactive Map Showing Smartphone Platform Usage kas23 iPhone 1 Jun 23, 2013 07:12 PM
Map Speedo, A cool map + speedometer askpi iPhone and iPod touch Apps 0 Jun 15, 2012 08:33 PM

Forum Jump

All times are GMT -5. The time now is 07:21 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC