We have been experimenting with Maps here at Wijmo HQ and thought it would be fun to make a few mapping apps using Wijmo. What better place to start than mapping our trip to jQuery Conference in Boston!
The Epic Roadtrip Map
Check out our Epic Roadtrip Map online! This map plots our actual course from Pittsburgh to Boston including fun stops we made along the way. The map also shows photos from along the route. As you click the quick navigation the photos will be filtered based on location.
How We Did It
Something interesting to note: This project is a mashup of technologies (that all played nice)!
To build this map, we started with a basic ESRI map. ESRI is a company completely dedicated to the Geo space. They have everything from free map API's to commercial mapping components/data services. I highly recommend spending some time using their samples for cool mapping ideas. The ArcGIS maps use Dojo for the core JavaScript framework and Dijit for the UI tools. I have to say, that I really enjoyed working with Dojo on this project too. One of my favorite features is the dojo.require() method for loading in dependencies in JavaScript. Can't wait to see dependency management in jQuery too (hint hint)! Next added data points to the map. To add the stops along the way we used the ArcGIS web services to do address look-ups and get Geolocations for each point. It was easy to do since I referenced their online samples for help. After adding stops to a route, the API can solve the route automatically, which is pretty cool. You can also add barriers to a route (for example we didn't want to drive through NYC) that will be avoided when solving the route. After we had a functioning route, I started adding some Wijmo UI to control the Map. I added a Wijmo slider to control zoom. I added an accordion as a layout system for actions. I put a menu in one of the accordion panes and parsed each step in the routes directions as a menu item. I then added superpanel with an array of photos from the trip and a dialog to display the full photo in a lightbox. Lastly, I added a tooltip to display the status of the Map while it is calling the ArcGIS API.
A US Demographix Map
Check out the US Demographics by County Map online! I had so much fun making the roadtrip map that I had to make another! So I got an idea from one of ESRI's samples: Querying Demographic Data and Display in Chart. This sample looked like it needed some Wijmo love. So I went ahead and added a little Wijmo to it. I added the Wijmo slider and tooltip first which was just copy and paste from the roadtrip app. The big addition to this map was the Wijmo pie chart. The ESRI sample used Google Chart API and displayed a static imagine in a tooltip. That wasn't good enough for me. So I added our pie chart in an overlay that displays demographic data as a county is clicked on the map. It was very easy to take the ESRI sample and change the function that gets a Google chart and draws a Wijmo chart instead. The Wijmo chart adds interaction to the data. Each pie slice can be hovered over and displays a tooltip with data in it. The pie chart also redraws itself with new data when a different county is clicked and doesn't have to wait for an HTTP request for an image. That is one of the major benefits of drawing charts on the client-side. Our chart uses the Raphael JavaScript library. This allows us to draw charts in SVG on the client and it even adds support for IE using VML. They are true JavaScript charts that do not require any server component or browser plugin (like flash).
Good Times
We had such an awesome time at jQCon in Boston and I had a really good time building an interactive map of our journey. So if you get a chance, definitely go to a jQuery conference or at least a local meetup! And if you are jQuery developer, take a little time to play around with other frameworks like Dojo too. There is great stuff in and outside of jQuery to add to your arsenal. And if you are looking to map some data, check out ESRI's ArcGIS API. It is easy to use, completely JavaScript-based and very powerful. Go out and explore the web, but don't forget a map (it's easy to get lost out there)!
Fork It
If you are interested in the code for this project you can get it on github: /wijmo
