Esri created Esri-Bootstrap-Map-JS, a really slick set of templates combining Twitter Bootstrap and the Esri ArcGIS JavaScript API. Although the project comes with four templates, it took me the better part of an afternoon to get one of them working the first time around. It really should not be this difficult.
Enter this project, a Yeoman Generator for Esri-Bootstrap-Map-JS. This project, Generator-Esri-Bootstrap-Map, marries Yeoman with slightly refactored versions of the four templates included in the original repository created by Esri. Using Yeoman cuts the learning curve from an afternoon to about five minutes to get up and running with these templates.
To utilize this project, you will need Node.js installed with Yeoman and this generator, generator-esri-bootstrap-map installed in Yeoman. Fret not. Installation is much easier than installing ArcMap.
Head over to Node.js and whack the big green install button right in the middle of the landing page. Run the install for your platform. You now have Node.js installed on your computer with the Node Package Manager. You will now use the node package manager to install Yeoman.
Installing Yeoman is pretty easy. Just enter the following command at the command prompt.
npm install -g yo
Although Yeoman does require and use both Bower and Grunt, NPM takes care of downloading and installing these dependencies for you. Yes, NPM takes care of a lot of potential headaches for you.
Finally, to install generator-esri-bootstrap-map from npm, run:
npm install -g generator-esri-bootstrap-map
To use this generator, first set up your project and start developing.
To use the generator, create a directory, navigate to it at the command line and scaffold your new web application by entering the following.
yo esri-bootstrap-map
Now everything is ready to go. You are ready to look at your handiwork. Do this by again using a little grunt, and leave the command prompt open after issuing this command.
grunt serve
While the command window is open after you started grunt serve
, every time you make a change to the web application and save, the browser will automatically reload to reflect your changes. The application is set up to be configured using the app/index.html
, app/js/map.js
and app/css/syle.css
files. If you modify and save any of these files, your browser will automatically reload to reflect your changes, hopefully further contributing to reducing your web mapping application development time.
This project was started and is maintained by a guy with a degree in Parks, Recreation and Tourism who happens to really like maps, GIS and is interested in web development. If you can help and make it better, please fork it, improve it and shoot me a pull request! I welcome assistance and input to make this a better resource for everybody.
If you have a great template using bootstrap and the ArcGIS JavaScript API, please create a template and add it to this generator! To do this, create a template directory, add your files to the template directory, add your template to the generator file, and send me a pull request on GitHub.
Inside the repository, in the app/templates
directory. Each template is in a seperate directory name prefixed with map-
folowed by the name of the template. Hence, the fullmap template is in the map-fullmap
template. To create your own template, just create another directory using this convention with your template name.
After creating this directory, add three files for your template: _index.html
, _map.js
and _style.css
for your respective html, JavaScript and cascading style sheets. The generator looks for, copies and renames these files in the final product.
Next, add the name of your template to the list of templates (choices) on line 26 of index.js
. Currently this list includes the four templates and looks like the following:
var prompts = [
{
type: 'list',
name: 'template',
message: 'Which esri-bootstrap-map template would you like to install?',
choices: [
'fullmap',
'geosearch',
'starter',
'webmap'
]
}
];
Just add the name of your template to this list. This name must match to the name of your template directory without the map-
prefix.
After you have this working, please shoot me a pull request. I welcome quality templates to be included in this generator! After all, it makes my life easier as well!
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.