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)!
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.
If you are interested in the code for this project you can get it on github: https://github.com/wijmo/WijMap