Jump to content

 
Photo

putting a simple interactive map on the web

- - - - -

  • Please log in to reply
6 replies to this topic

#1
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,084 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

I'd like to set up a website with a GIF map of my neighborhood and short blurbs about each of the buildings, which you'd see on rollover or click. I also like to keep websites as simple and browser-neutral as possible (my business site is straight HTML by deliberate choice). I'm thinking that it might be side-by-side frames so that clicking in a place on the map GIF changes the info in the small frame.

What sorts of techniques should I be looking into to do something like this?
Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#2
Hans van der Maarel

Hans van der Maarel

    CartoTalk Editor-in-Chief

  • Admin
  • PipPipPipPipPipPipPip
  • 3,889 posts
  • Gender:Male
  • Location:The Netherlands
  • Interests:Cartography, GIS, history, popular science, music.
  • Netherlands

Dennis,

I've done something like this with Illustrator. Check out the segments option to get an idea of what's possible. Illy will generate all the necessary html, all you have to do is connect segments in your map to a url.
Hans van der Maarel - Cartotalk Editor
Red Geographics
Email: hans@redgeographics.com / Twitter: @redgeographics

#3
JB Krygier

JB Krygier

    Key Contributor

  • Validated Member
  • PipPipPip
  • 52 posts
  • Location:Columbus OH
  • United States

I'd like to set up a website with a GIF map of my neighborhood and short blurbs about each of the buildings, which you'd see on rollover or click. I also like to keep websites as simple and browser-neutral as possible (my business site is straight HTML by deliberate choice).

<{POST_SNAPBACK}>



Why not consider a simple GoogleMaps mashup? If you set it up with the "hybrid"
or "Satellite" view you can see the buildings. Locations are relatively easy to
set (I get the lat/long from Google Earth), and as far as I know GoogleMaps is
very browser-neutral. It is also easy to do - I can send along an HTML template
if you are interested.

John K.

#4
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,084 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

Google Maps is not very suitable for the kind of large-scale mapping I have in mind. One of the main points of my project is to show buildings and streets built since 2002 (date of the Chicago aerials used by Google). The "building lean" in those aerials would also be very distracting. Besides, I already have the map drawn, I just want to link some building descriptions to it.

Also, "browser-neutral" is not a characteristic I would associate with Google Maps. They're painfully slow and I don't have much luck getting them to display on a Mac no matter what browser I try.
Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#5
Nick Springer

Nick Springer

    CartoTalk Founder Emeritus

  • Moderator
  • PipPipPipPipPipPip
  • 939 posts
  • Gender:Male
  • Location:Crosswicks, NJ
  • Interests:Cartographic Design, Print Maps, Graphic Design, Web Development, Ultimate Frisbee
  • United States

There are any number of elegant ways to do this using HTML and CSS. I wouldn't recommend using frames. Contact me offline and I would be happy to get you set up with some template code.

Nick Springer

Director of Design and Web Applications: ALK Technologies Inc.
Owner: Springer Cartographics LLC


#6
ajturner

ajturner

    Newbie

  • Validated Member
  • Pip
  • 5 posts
  • Location:Northville, Michigan
  • United States
Check out this tutorial by A List Apart, More Accessible CSS Maps.

#7
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

Check out this tutorial by A List Apart, More Accessible CSS Maps.


Agreed, an excellent resource. I've been practicing with that technique on some disc golf mapping efforts, and will eventually be doing a LOT more of this in the future. To see my first "baby steps" in this direction, you can visit: http://www.mapformat...moundcreek9.htm

One other nice "perk" is that the author of the article is very friendly and personable...and has taken the time to exchange 2-3 email messages with me to talk about the coding of that type of map presentation. B)

Derek
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->