Dojo Bootstrap with ArcGIS JavaScript API
If you use the ArcGIS JavaScript API, have you tried Bootstrap? It’s a great way for developers to get a decent looking website up and going pretty quickly that doesn’t look like total crap. It has some handy components, however they are dependent on jQuery because everyone uses jQuery, didn’t you know that?
Bootstrap Map JS I’ve discussed before on how you can use other frameworks with the the ArcGIS JavaScript API, but if you’re a Dojo purist, what are you to do? Don’t fear, the Esri JS folks have you covered. They put together this Bootstrap Map JS project that works really well. It covers some subtle nuances of using Bootstrap with your Esri JS apps, some of which I cover in ArcGIS Web Development(affiliate link). It handles some CSS so the map displays properly and even keeps the InfoWindow popups in the map view.
dbootstrap In addition to Bootstrap Map JS, there are a couple of non-Esri projects that attempt to marry Dojo with Bootstrap. There is dbootstrap that tries to make the Dojo css used in Dijits look like Bootstrap. The main advantage here is you can use Dijits just as you normally would and they end up looking like Bootstrap components. However, at the moment it is still based on Bootstrap 2.x, and movement to 3.x seems to have stalled while the project seeks a new maintainer. I don’t blame them, and I may get some flack for it, but styling Dijits can be a real pain because of how the components are built. The Configurable Map Viewer is an example of a project that uses dbootstrap.
Dojo Bootstrap Another interesting project that I prefer is Dojo Bootstrap. Dojo Bootstrap forgoes trying to style the Dijit library and provides new Dojo components that mirror the current Bootstrap library. The real benefit here is that you can add these components to your application real easily using the current Bootstrap css file and not worry about compatibility issues. You can use Modal, Dropdown and more. My recommendation is to look over the tests to get a good idea of how it works. The docs are a little behind the current state of the project in some places and I’ve found a few things are a little unclear sometimes. For example, I had to get some clarification from Tom Wayson on how to programatically build the Collapse.
You autocomplete me Let’s check out a sample of using the Typeahead from Dojo Bootstrap in an application. Typeahead is a neat autocomplete module in Bootstrap. It’s been deprecated in Bootstrap 3 in favor of Twitters typeahead.js but again, that has a jQuery dependency and the Typeahead in Dojo Bootstrap works really well. In the following example, you can use the FindTask as the source for Typeahead and use this results in the autocomplete feature.
I use this same implementation in a variety of applications and I’ve had really good feedback with it. Feel free to experiment with it to do autocomplete of various services and even address searching. Combine this with a dedicated indexing service like Lucene/Solr or ElasticSearch and you are looking at some nice Google-like search capabilities in your application.
So if you’ve been looking to Bootstrap to get some nice looking UI components into your ArcGIS JavaScript API aps, but you didn’t want to mix in jQuery, give Dojo Bootstrap a try. The github repo has had a decent stream of activity and tests rewritten. I use it in almost all my ArcGIS JavaScript API applications in one form or another these days.