4 ms·

Building an interactive map with jQuery instead of Flash

24 points by mixmax 18y ago

andrewljohnson 18y ago
I'm wondering - why didn't you use Google Maps and perhaps create custom tiles? It doesn't seem like I can pan on the map? I recently founded a start-up focused on mapping, and we use Google Maps API, along with YUI for ajax - www.trailbehind.com Basically, while Google is fetching and rendering the map tiles, we fetch up "overlays" in parallel, using YUI async requests. Overlays are the waypoints and trails on the map, along with metatdata about the places. To make the maps snappy, we cache various map views in static files as JSON. I don't know that you want to reinvent the wheel, especially when you don't have the resources to make it feature complete (panning and zooming the map).
- mark_h 18y ago
  I can recommend OpenLayers as well -- a very clean codebase too, in my experience to date. It can combine multiple different data sources (including google maps), as well as having a wealth of controls and hooks available. It doesn't seem like that's quite the use-case required here though.
  - wensing 18y ago
    I like OpenLayers, but JS maps have always seemed a bit slow and clunky to me. What's the most graphically intensive use of OpenLayers you know of?
- axod 18y ago
  I agree. Google maps is built for this sort of thing. People know how to use google maps, panning, zooming, etc.
- JoelSutherland 18y ago
  Andrew, here is the response to the very same comment you left on the blog: I've used the Google Maps API before (it was actually marine science related! I worked with a professor to track Sea Turtle migration in the Atlantic) but it wasn't a good fit for the project. We have a very limited dataset and the panning of Google Maps would have been more distracting than anything else. By doing things this way, users wouldn't find themselves somewhere without interesting data.
  - andrewljohnson 18y ago
    You can turn panning off, and Google maps still might have been better for your purposes. It has many nice features such as an Event library, customizable overlays, and the ability to draw polylines and polygons. And you could have easily sliced up your artist's images into tiles. I think it would have saved you time, and probably left your client with more maintainable and extendable code. A lot of people know the Google Maps API.
codeview 18y ago
Very impressive work. But the only thing 'flashy' about this is the zoom and fade in effect. I don't think this is worthy of being promoted as a great example for "jQuery instead of Flash " app.
- JoelSutherland 18y ago
  Hi, I'm the author. I agree it isn't an ideal example, but my primary audience for this was our clients. Not a week goes by that we don't hear 'Can you do flash?' Typically the client is not interested in flash as much as they are in a specific result that could much better be accomplished in jQuery.
morbidkk 18y ago
jquery also has http://code.google.com/p/jmaps/ http://code.google.com/p/jmaps/ plugin. example:http://ketan.khairnar.googlepages.com/map.html http://ketan.khairnar.googlepages.com/map.html
triptomaine2 18y ago
Instead of focusing why Joel should have used Google Maps, I think the real focus should be that Flash-type interactivity is not limited to Flash. I think the map created by Joel is a great work of ingenuity and thinking outside the box. Also in regards to Google maps, you can't customize the look of the map, not to mention you're at the mercy of Google to display the map properly and exactly as you wish. Doing it the way Joel did you have complete control over the whole project, not limited to a borrowed graphic.

24 points by mixmax 18y ago

I'm wondering - why didn't you use Google Maps and perhaps create custom tiles? It doesn't seem like I can pan on the map? I recently founded a start-up focused on mapping, and we use Google Maps API, along with YUI for ajax - www.trailbehind.com Basically, while Google is fetching and rendering the map tiles, we fetch up "overlays" in parallel, using YUI async requests. Overlays are the waypoints and trails on the map, along with metatdata about the places. To make the maps snappy, we cache various map views in static files as JSON. I don't know that you want to reinvent the wheel, especially when you don't have the resources to make it feature complete (panning and zooming the map).

mark_h 18y ago
I can recommend OpenLayers as well -- a very clean codebase too, in my experience to date. It can combine multiple different data sources (including google maps), as well as having a wealth of controls and hooks available. It doesn't seem like that's quite the use-case required here though.
- wensing 18y ago
  I like OpenLayers, but JS maps have always seemed a bit slow and clunky to me. What's the most graphically intensive use of OpenLayers you know of?
axod 18y ago
I agree. Google maps is built for this sort of thing. People know how to use google maps, panning, zooming, etc.
JoelSutherland 18y ago
Andrew, here is the response to the very same comment you left on the blog: I've used the Google Maps API before (it was actually marine science related! I worked with a professor to track Sea Turtle migration in the Atlantic) but it wasn't a good fit for the project. We have a very limited dataset and the panning of Google Maps would have been more distracting than anything else. By doing things this way, users wouldn't find themselves somewhere without interesting data.
- andrewljohnson 18y ago
  You can turn panning off, and Google maps still might have been better for your purposes. It has many nice features such as an Event library, customizable overlays, and the ability to draw polylines and polygons. And you could have easily sliced up your artist's images into tiles. I think it would have saved you time, and probably left your client with more maintainable and extendable code. A lot of people know the Google Maps API.

codeview 18y ago

Very impressive work. But the only thing 'flashy' about this is the zoom and fade in effect. I don't think this is worthy of being promoted as a great example for "jQuery instead of Flash " app.

JoelSutherland 18y ago
Hi, I'm the author. I agree it isn't an ideal example, but my primary audience for this was our clients. Not a week goes by that we don't hear 'Can you do flash?' Typically the client is not interested in flash as much as they are in a specific result that could much better be accomplished in jQuery.

morbidkk 18y ago

jquery also has http://code.google.com/p/jmaps/ http://code.google.com/p/jmaps/ plugin. example:http://ketan.khairnar.googlepages.com/map.html http://ketan.khairnar.googlepages.com/map.html

triptomaine2 18y ago

Instead of focusing why Joel should have used Google Maps, I think the real focus should be that Flash-type interactivity is not limited to Flash. I think the map created by Joel is a great work of ingenuity and thinking outside the box. Also in regards to Google maps, you can't customize the look of the map, not to mention you're at the mercy of Google to display the map properly and exactly as you wish. Doing it the way Joel did you have complete control over the whole project, not limited to a borrowed graphic.