Web Mapping at the Northwest GIS Conference
For many extremely competent GIS professionals, the prospect of creating web mapping applications is extremely intimidating. It really does not have to be. Taking advantage of a number of freely avaiable web development tools can greatly streamline the point of entry for experimenting, learning and building web applications. At 10:30 on Thu 16 Oct in room 2A I will be demonstrating how to set up and use some of these tools to get started with the ArcGIS JavaScript API combined with the Twitter Boostrap front end framework at the Northwest GIS Conference in Lynwood, WA.
Frequently GIS professionals have a need or desire to create custom web mapping applicaition, but frequntly shy away due to not being familiar with and subsequently intimidated by web development. A little over a year ago, this very much described me and I decided to change this.
Many times the most difficult part of learning something new is figuring out how to get started. Learning web mapping development is no different. Web mapping combines a variety of technologies including hypertext markup (HTML), cascading style sheets (CSS), JavaScript and GIS. This is not even beginning to get into the nuances of all the components needed to make GIS work. It should come as little surprise there are precious few people who are zen masters at all of these.
Thankfully, for those of us who at least have the GIS part somewhat under control, the web deveopment world has been working to streamline much of the web development side, while also including a few handy tools to making their lives, and subsequently our lives, a little easier. These tools frameworks, templates and generators.
Frameworks are very similar to prefabricated housing. You are stil building the end result, but instead of creating every little piece from scratch, frameworks provide much larger building blocks to use. These building blocks, while they do not need to be customized, they can be. One of the more common frameworks is Twitter Bootstrap.
Twitter Bootstrap, typically just referred to as Bootstrap, is a framework for buildling websites. It is designed to, when implemented according to the directions in the documentation, to look good no matter how it is viewed...on smartphones, tablets and computers. Bootstrap takes care of most of the styling via a very well tested CSS and provides plentiful HTML samples for copying and pasting.
Bootstrap-Map-JS is a great project on GitHub with templates combining the ArcGIS Javascript API with the ease of layout provided by Bootstrap. When starting with these templates, I discovered every time I started with one of them, they needed some customization due to the way asyncronous module definition (AMD), a method of only including necessary requirements in JavaScript, works. Although not outrageously difficult to customize once I finally figured it out, it was daunting at first and redundant after I solved the issue.
Thankfully the web development world frequently must deal with redundant tasks associated with project setup and has created a solution for dealing with these redundant tasks...generators. Although the discussion of which generator is the best likely will never be finished, a very common generator is Yeoman.
Yeoman is a wrapper built on top of quite a few other tools including Node.js, Grunt and Bower. Individual generators can be developed and made available as GitHub repositories and following a naming convention, generator-generator-name.
After finally sorting all of this out and cramming for about a week to learn enough about all of these technologes to actually build something fuctioning, I built a generator to simplify both my life and those who also are trying to build and also learn how to build web mapping applications using Bootstrap and the ArcGIS JavaScript API...possibly including you.
Hence, getting started with putting maps on the web using quality styling now can be much easier using a generator I built using these technologies. You can get started using this generator by first installing Node.js. Then use the package manager in Node to install Bower, Yeoman and the generator I built. Finally, use the generator to quickly get started building a web mapping application using one of four templates.
My presentation at the conference will be demonstrating all of these steps from a clean install all the way up through a few tweaks on one of the templates modifing the presentation and interact with a dynamic feature layer.
For reference, here is the presentation and notes I will be using.