Activate your free membership today | Log-in

Thursday, December 13th, 2007

Unobtrusively Mapping Microformats with jQuery

Category: Articles, Mapping, Microformat, jQuery

Simon Willison just doesn't stop. This time he has added a way that details the technique of unobtrusively mapping microformats with jQuery.

Simon puts together jQuery, microformats, and the Google Maps API to grok hCard and show maps of any hCard data that is found, ending up with:

JAVASCRIPT:
  1.  
  2. jQuery(function() {
  3.         // First create a div to host the map
  4.         var themap = jQuery('<div id="themap"></div>').css({
  5.                 'width': '90%',
  6.                 'height': '400px'
  7.         }).insertBefore('ul.restaurants');
  8.  
  9.         // Now initialise the map
  10.         var mapstraction = new Mapstraction('themap','google');
  11.         mapstraction.addControls({
  12.                 zoom: 'large',
  13.                 map_type: true
  14.         });
  15.  
  16.         // Show map centred on Brighton
  17.         mapstraction.setCenterAndZoom(
  18.                 new LatLonPoint(50.82423734980143, -0.14007568359375),
  19.                 15 // Zoom level appropriate for Brighton city centre
  20.         );
  21.  
  22.         // Geocode each hcard and add a marker
  23.         jQuery('.vcard').each(function() {
  24.                 var hcard = jQuery(this);
  25.        
  26.                 var streetaddress = hcard.find('.street-address').text();
  27.                 var postcode = hcard.find('.postal-code').text();
  28.        
  29.                 var geocoder = new MapstractionGeocoder(function(result) {
  30.                         var marker = new Marker(result.point);
  31.                         marker.setInfoBubble(
  32.                                 '<div class="bubble">' + hcard.html() + '</div>'
  33.                         );
  34.                         mapstraction.addMarker(marker);
  35.                 }, 'google');   
  36.                 geocoder.geocode({'address': streetaddress + ', ' + postcode});
  37.         });
  38. });
  39.  

You see the finished code at work.

Posted by Dion Almaer at 7:01 am
2 Comments

+++--
3.7 rating from 26 votes

Friday, November 30th, 2007

Placeshout: New Rails based Geo-cool site

Category: Mapping, Ruby, Showcase

Andre Lewis has a new site out there, Placeshout which offers a way to quickly call out your favourites place in various locations.

You could argue that we have other places for this... Yelp for example, or My Maps themselves. So, why Placeshout?

Sometimes, you just want a quick suggestion

When Andre and I are looking for a hole-in-the-wall Mexican restaurant or a park with a softball field, we usually just want a quick suggestion, not a lengthy review. We want to know if a place is worth visiting in 30 seconds.

Placeshout isn't about volume - it's about trying to express the positives and negatives of a destination in as few of words as possible. If people agree, that "shoutout" moves up...if they don't, the shoutout moves down and begins to disappear.

We hope Placeshout makes it easier for you to find local destinations.

There are some interesting features in this, very Web 2.0-looking, site. One that stands out is the enhanced mapping experience on top of Google Maps. As you move around, directional arrows tell you how far various other cities are away. It is kinda fun to watch:

Posted by Dion Almaer at 10:05 am
3 Comments

++---
2.9 rating from 17 votes

Thursday, October 4th, 2007

Craigslist Tibco GI Remix

Category: Dojo, Google, Mapping, Offline, TIBCO

Luke Birdeau has remixed Craigslist to produce a desktop-esque Ajax application view on the data that adds features such as being able to save your favorites, add notes to them, and even use the app offline (e.g. take your laptop on the road to go see the stuff for sale of meet that blind date). The app combines aspects of 3 libraries – TIBCO GI 3.5 for the interface, plus Dojo (for offline) and Google Maps.

To get started you first pick a locale, then a category, then do a search. You can also add multiple regions and categories too.

Here is a quick demonstration of the app in action:

Posted by Dion Almaer at 4:02 am
18 Comments

+++--
3.9 rating from 34 votes

Friday, July 20th, 2007

Prague 360: Maps with quality

Category: Mapping, Showcase

I don't normally post many "mashups" but Prague 360 is to beautiful to pass up.

Jeffrey Martin and his brother David have created some high quality views on some of the cities, and they use the Google Maps API as the platform to show the content.

If you head over to Prague, you will see that along with the usual normal map, satellite, and hybrid options, there are gigapixel versions for Winter and Spring. Jeffrey finds a high spot where he sets up his camera and takes lots of photos of the area. These pictures are with a very nice, zoomed in lens, and then he stitches them together to make one REALLY large photo.

Then David takes the image over to matlab world and cuts it up into tiles for the various zoom levels on the map. Now, on the map, when you click on one of the gigapixel options the new tiles are overlayed.

You will also notice that on the various mapping views not all of the points of interest are shown. Instead, they use the MarkerManager component to package items that are close together as one point on the map.

You will also notice that the right hand side has 360 closeup views of the given areas. We all remember the original "VR" versions of this with poor quality. These are definitely a 2007 version. One of the use cases for the site is for people to check out real estate. With this level of quality, you really can get a good view of the property, easily enough to narrow it down.

Prague 360

Posted by Dion Almaer at 9:06 am
7 Comments

++++-
4.4 rating from 31 votes

Tuesday, May 29th, 2007

Google Maps: Street View and Mapplets

Category: Google, Mapping, Showcase

When I first saw the new Street View functionality that has appeared in the Google Maps preview I was obviously impressed.

We have seen other companies taking photos of the content, but being able to walk around the Map was very cool. If I am visiting a new building, or area, I find myself checking out the area before I drive there, as it is a lot easier to find the end point if you have seen it, and walked around the outside.

Google Maps Street View

There was also a release of Mapplets, which are embeddable Google Maps mashups. You are able to overlay multiple mashups onto the one map, which means that you can combine the old favourites: HousingMaps.com and ChicagoCrime.org to make sure you get your new home in a decent area!

What is exciting about these new features is that we have more tools to play with (writting Mapplets), and a nice showcase of using Flash within an Ajax application (Maps).

Posted by Dion Almaer at 11:30 am
22 Comments

++++-
4.6 rating from 37 votes

Thursday, May 10th, 2007

Overlay Pictures on Yahoo! Travel Maps

Category: Mapping, Showcase

Yahoo! Travel has added a new Map on Map feature which allows you to overlay maps, and set the opacity.

For example, this example has the forum in Rome overlayed on top of the city.

You can also check out the Grand Canyon and the National Mall.

Yahoo! Travel Map

Posted by Dion Almaer at 9:17 am
Comment here

+++--
3.7 rating from 19 votes

Friday, March 30th, 2007

InfiView: Interactive Ajax Graphical Maps and Diagrams

Category: Mapping, Toolkit

InfiView is a mapping development tool that empowers engineers to build infinite-sized Web 2.0 mind maps, network topologies, organization charts, LDAP tools and technical diagrams.

InfiView uses Ajax technology and its own unique dynamic memory management to enable developers to systematically create graphical web applications using any amount of data (from very small all the way to infinite). With InfiView-built web-applications, end-users seamlessly interact (pan, zoom, right-click for actions…) with all types of graphical data - such as network topologies, DNA sequences or genealogy charts - oblivious to the vast amounts of data available.

100% built in Bindows (www.bindows.net), InfiView is built on top of the Bindows framework which is back-end/server agnostic, and provides best-in-industry support for section-508 accessibility compliance, internationalization and localization.

Try the demos and watch the screencasts

InfiView

Posted by Dion Almaer at 6:47 am
16 Comments

++++-
4.5 rating from 116 votes

Monday, March 26th, 2007

Click2Map: Ajax Map Editor

Category: Mapping, Showcase

Antony Zanetti of HylioSoft have created Click2Map, an Ajax map editor.

The application is based on Bindows, the .NET Ajax framework, and it allows you to create maps, add markers, and build out the Google Map.

I was a bit surprised at the startup time (loading X/Y), but to be fair this is an early beta.

Click2Map

Posted by Dion Almaer at 8:54 am
8 Comments

+++--
3.8 rating from 27 votes

Friday, February 9th, 2007

GPlotter 0.9: Prototype and Google Maps v2 update

Category: JavaScript, Library, Mapping

Brennan Stehling has updated his GPlotter project "to make use of the revised Google Maps API. I also completely restructured the Javascript to a much more object oriented coding style. I am using the latest release of Prototype, which recently moved to a new location as well as posted a great deal of new documentation. I am using Prototype for the object inheritance and AJAX functionality."

GPlotter Example

JAVASCRIPT:
  1.  
  2. var plotter = new GPlotter();
  3. plotter.setColor(plotter.BLUE);
  4. plotter.setIconUrl("http://gplotter.offwhite.net/maps/icons/");
  5. plotter.plot("map", "labels", "milwaukee.xml?version=0.9.0");
  6.  

Extending GPlotter

JAVASCRIPT:
  1.  
  2. var MyMapper = Class.create();
  3. Object.extend(MyMapper.prototype, GPlotter.prototype);
  4. var mapper = new MyMapper();
  5. mapper.plot("map", "labels", "milwaukee.xml");
  6.  

Gplotter

Posted by Dion Almaer at 12:07 am
8 Comments

+++--
3.2 rating from 26 votes

Monday, January 15th, 2007

ShackPrices: Rails based Ajax real estate site

Category: Mapping, Ruby, Showcase

ShackPrices is a Seattle-area real estate Ajax application written using Rails by Galen Ward and team.

If you do real estate, you need to mashup to Google Maps, but this goes beyond that. It is highly interactive, with lots of live filters and tools, and the back button seems to be handled really well.

ShackPrices

Posted by Dion Almaer at 7:23 am
10 Comments

+++--
3.8 rating from 34 votes

Thursday, December 21st, 2006

New Mapping Mashups: Home Search and Weather

Category: Mapping, Showcase

A couple of new mapping mashup tools have been released: dsSearchAgent Home Search and WeatherBonk.

dsSearchAgent

Diverse Solutions created a new property search application that implements Prototype, the latest version of YUI, and MooFx v1 into our very own, and we think quite unique, home finder app.

dsSearchAgent

Weather Bonk

Weather Bonk mashes up weather onto a map, and also aggregates live traffic feeds, and data from other weather sites.

Weather Bonk

Do you have a mapping mashup that you can't live without?

Posted by Dion Almaer at 7:54 am
1 Comment

++++-
4.1 rating from 17 votes

Wednesday, November 29th, 2006

Beginning Google Maps Sample Chapters

Category: Books, Mapping

Beginning Google Maps Applications has a couple of sample chapters to peruse.

The sample chapters currently available cover:

  • Interaction: Now that you have your first interactive Google Maps web application, grab aGPS and start looking for geocaches to add to your map! Get your friends involved, too, and show off what you’ve learned.
  • Geocoding: This chapter covers using geocoding services with your maps. It’s safe to assume that you’ll be able to adapt the general ideas and examples here to use almost any web-based geocoding service that comes along in the future. From here on, we’ll assume that you know how to use these services (or ones like them) to geocode and cache your information efficiently.

Posted by Dion Almaer at 7:41 am
3 Comments

++++-
4 rating from 22 votes

Wednesday, November 15th, 2006

GeoJoey: Mashing up maps and experiences

Category: Mapping, Showcase

One of the keys to mashing up maps is the fact that our species gets to annotate the web. GeoJoey is an application that is trying to make this happening by mashing up places with experiences.

Find experiences and places, and vote on them. The front page looks like Digg, Delicious, and Google Maps combined.

Posted by Dion Almaer at 8:51 am
Comment here

+++--
3.8 rating from 16 votes

Friday, October 27th, 2006

Integrating Maps into Your Java Web Application with Google Maps and Ajax

Category: Articles, Google, Mapping

John Ferguson Smart has written a nice article on Integrating Maps into Your Java Web Application with Google Maps and Ajax.

The article focuses on the Google Maps API (the only server side piece is a simple Servlet), and takes you through learning the API, and then using more advanced techniques such as dynamic markers, and ondemand (via ajax) content inclusion:

JAVASCRIPT:
  1.  
  2. function fetchDetails(id) {
  3.       var req = GXmlHttp.create();
  4.       req.open("GET", "/maps/SiteDirectory?id="+id, true);
  5.       req.onreadystatechange = getCallbackFunction(req, displayDetails);
  6.       req.send(null);
  7. }
  8.  
  9. function displayDetails(siteDetailsXML) {
  10.       // Get the root "site" element from the document
  11.       var site = siteDetailsXML.getElementsByTagName("site")[0];
  12.       var name = getNodeValue(site.getElementsByTagName("name")[0]);
  13.       var id = getNodeValue(site.getElementsByTagName("id")[0]);
  14.       var symbol = getNodeValue(siteDetailsXML.getElementsByTagName("symbol")[0]);
  15.       var website = getNodeValue(siteDetailsXML.getElementsByTagName("website")[0]);
  16.       var address = site.getElementsByTagName("address")[0]
  17.       var address1 = getNodeValue(siteDetailsXML.getElementsByTagName("line1")[0]);
  18.       var address2 = getNodeValue(siteDetailsXML.getElementsByTagName("line2")[0]);
  19.       var city = getNodeValue(siteDetailsXML.getElementsByTagName("city")[0]);
  20.       var postcode = getNodeValue(siteDetailsXML.getElementsByTagName("postcode")[0]);
  21.