esri / dojo-bootstrap-map-js

Samples for how to use the Esri ArcGIS API for JavaScript w/ Bootstap via Dojo-bootstrap

dojo-bootstrap-map-js

An application boilerplate demonstrating how to use the Esri ArcGIS API for JavaScript with Bootstrap Map and Dojo Bootstrap to create a responsive mapping application using Bootstrap components.

View it live

This boilerplate is ideal for mobile applications because it provides the responsive UI of Bootstrap without the overhead of loading all of jQuery. Furthermore, you can run a Dojo build to optimize all of the JavaScript and CSS source code and dependencies to get a roughly 95% reduction in number of requests for scripts and 25% reduction in the size of those scripts.

This application boilerplate demonstrates how to build a mapping application that utilizes the best parts of Dojo (AMD modules, classes and widgets, promises, i18n, custom builds, etc) along with the responsive UI of Bootstrap. For simpler examples of how to get started with Bootstrap Map and Dojo Bootstrap, see the Boostrap Map demo pages.

Instructions

By default, this boilerplate assumes you will want to work from local copies of all dependencies so that you can create a custom build. However, you can also work off of remotely hosted (CDN) dependencies by using nobuild.html.

Quick Start

1. Download or Fork and clone the repo
2. Make sure the dojo-bootstrap-map-js folder is served via your local web server
3. Load src/index.html in your browser

Downloading Dependencies and Building

You will need to install Node, Bower, and Grunt in order to download dependencies and build the app via the command line.

1. Fork and clone the repo
2. cd into the dojo-bootstrap-map-js folder
3. Run npm install to install the Grunt tasks
4. Run bower install to download Dojo and other dependencies
5. Run grunt serve to load the unbuilt app into a web browser
6. Modify the code as needed
7. Run grunt build to build the app under the dist folder
8. Run grunt serve:build to load the built app into a web browser

You may want to run grunt clean:deploy to remove all uncompressed javascript and source maps before you deploy the contents of that folder to your web server.

Requirements

• Notepad or your favorite text editor
• Web browser with access to the Internet
• Node, Bower, and Grunt to run the command line development tools
• Java, in order to build Dojo.

Example Applications

Below are a few example applications that have been built using this boilerplate:

• Demo for DevSummit 2015, responsive-citizens, a responsive take on the Attribute editing - mobile sample. Github repo.
• San Juan County GIS, traffic-collisions-app, A web application showing traffic collisions in San Juan County. Filterable by island and severity. Github repo
• City of Menlo Park, General Plan Review, a wep application that allows users to dynamically modify the proposed general plan and view the impact on a map and chart.

Resources

• Bootstrap Map
• Dojo Bootstrap
• ArcGIS API for JavaScript
• Bootstrap
• ArcGIS Blog
• twitter@esri

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Anyone and everyone is welcome to contribute.

Licensing

Copyright 2012 Esri

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.

A copy of the license is available in the repository's license.txt file.

[](Esri Tags: ArcGIS Web Mapping Bootstrap) [](Esri Language: JavaScript)​

dojo-bootstrap-map-js's Issues

grunt build fails on dojo:dist task if Java not present

When building on a Windows machine without Java installed, I encountered the following error:

c:\inetpub\wwwroot\dojo-bootstrap-map-js>grunt build
Running "jshint:all" (jshint) task
>> 10 files lint free.

Running "clean:build" (clean) task
>> 0 paths cleaned.

Running "dojo:dist" (dojo) task

Building Dojo...
>> Error
Warning: Task "dojo:dist" failed. Use --force to continue.

Aborted due to warnings.

Update to JSAPI 3.12

Map loading indicator

Hi @tomwayson

What are your thoughts on adding a map loading indicator? I'm thinking a spinner like Spinjs. might be helpful.

I've added it to my work-in-progress webapp based on Dojo-bootstrap-map-js. Only problem is I can't get Dojo to build with it. I've tried adding a copyOnly resource tag in app.profile.js, but then I get missing dependencies.

Use better example web map

The web maps from ArcGIS online require a dijit theme, and don't make for great examples. Maybe use this one:

http://esri.github.io/bootstrap-map-js/demo/dojo/webmap.html

Url boostrap-map-js error 404

The page https://esri.github.io/bootstrap-map-js/src/js/bootstrapmap.js is not available. It shows the error 404 site not found. Why?

Should "no-build" be the default configuration?

Seems like the Dojo build configuration is more of an advanced scenario and that users would have an easier time getting going w/ the hosted JSAPI by default. Windows users have been having issues getting slurp to work.

I'm curious to hear your opinions on this @RahulMetangale, @dchaboya, and @tsamaya.

Add testing framework

Probably Karma/mocha. See esri-karma-tutorial.

Can't style height of map to 100%

I've been having difficulty getting the map to show the full height of the browser. I originally came across this problem in my own bootstrap/dojo app. After searching around for answers I stumbled upon this repo. I noticed that in index.html you are setting the height inline to be 400px:

When I change the height to try and maximize the map (below snippet), I still get a default map height of 400px from the server:

I can specify a static height OK though:

So I'm having the same problem with both this app and my own. Any ideas?

Thanks in advance,

Shane

add loading spinner for map

Some services (not naming any names here) take a while.

Don't use dojo/touch

The nav menu uses touch.press, which emulates mousdown/touchstart when what we want to handle is click. This should eliminate the need to call _hideDropdownNav() in all the event handlers.

Simplify code that parses layers from config

Instead of maintaining custom code to read map info from the config, this repo could just use arcgisUtils.createMap() which is able to take in webmap JSON as the first argument, as shown in this sample.

It looks like bootstrap-map-js just passes that argument through, so it should work.

If that works, there's no point in trying to maintain custom code to load a map from the config since bootstrap-map-js is has arcgisUtils as a dependency, so no matter what, that's going to be on the page.

deprecate and archive this repo

It's really outdated.

Sidebar layout

Need a layout w a responsive sidebar that can house legend/TOC, etc. Might try to adapt something like this:

http://www.bootply.com/render/88026

Or one of these:

http://www.bootstrapzero.com/bootstrap-templates/off-canvas

Or this:

http://startbootstrap.com/templates/simple-sidebar.html

update basemap drop down

Add dark gray option and remove all the mapbox options (adds unnecessary complexity). Should be exactly like: http://esri.github.io/bootstrap-map-js/demo/dojo/maps.html

Reference Dojo Bootstrap source instead of including it in the project

Use a git submodule or bower package.

This should make it easier to keep up to date.

Update to v0.0.2 of bootstrap-map-js

See: https://github.com/Esri/bootstrap-map-js/releases/tag/v0.0.2

Double check versions of deps (BS, JSAPI, etc).

"More..." link in about modal should open in a new window

by opening in the same window, you lose the state of the app.

missing elements in the ZIP file?

I don't see anything for bower_install. I don't see any examples to preview. Am I not reading your instructions correctly?

Update ver of Dojo-Bootstrap to 1.3

Update to 3.15

Is there a task or vision to update esri from 3.13 to 3.15 and to swap from slurp over to a bower install or those artifacts?

Update to use v3.8 of the Esri JS API

http://blogs.esri.com/esri/arcgis/2014/01/02/arcgis-api-for-javascript-version-3-8-released/

load from web map

If config file has an item Id, load the web map.

Update to JSAPI 3.13

Now that bootstrap-map-js has, it's time for this repo to as well.

NOTE: bootstrap map also updated to the latest bootstrap CSS (3.3.2), but Dojo Bootstrap is still tied to Bootstrap 3.1.1, so will need to test w/ 3.3.2 CSS and if it works be sure to include comments and a note in the README about that. If it doesn't work, the leave the CSS at 3.1.1.

Figure out the best way to include multiple example pages in this single repo

I want this repo to include three different example pages:

1. Top nav (current) layout w/ a web map
2. Side bar layout (see #24) that loads the map from individual layers in the config. This would also be the one that we'd include the configuration/instructions to do a Dojo Build
3. A dashboard layout based on something like http://keen.github.io/dashboards/examples/sfmta-parking/

I need to figure out what is the best way to include all 3 in the single repo. I can think of two different ways, both involve multiple top level documents (i.e. index.html, sidebar.html, dashboard.html, etc). The question is whether the supporting files (the different config, controllers, and layouts) for each of those all reside under the same application (package) or separate applications/packages:

Same Application:

└───src
    │   dashboard.html
    │   index.html (would default to the current, top nav layout)
    │   sidebar.html
    │   unbuilt.html (would be an un-built configuration of the side bar layout)
    │
    └───app
        │   dashboardConfig.js
        │   dahsboardController.js
        │   sidebarConfig.js
        │   sidebarController.js
        │   topnavConfig.js
        │   topnavController.js
        │
        ├───layout
        │   │   Dashboard.js
        │   │   SideBar.js
        │   │   TopNav.js
        │   │
        │   ├───nls
        │   │
        │   └───templates
        │           Dashboard.html
        │           SideBar.html
        │           TopNav.html
        │
        ├───mapping
        │   │   Map.js
        │   │
        │   └───templates
        │           Map.html
        │
        └───resources
                app.css
                main.css

Different Applications (packages)

└───src
    │   dashboard.html
    │   index.html (would default to the current, top nav layout)
    │   sidebar.html
    │   unbuilt.html (would be an un-built configuration of the side bar layout)
    │
    ├───DashboardApp
    │   │   config.js
    │   │   Controller.js
    │   │
    │   ├───layout
    │   │   │   Dashboard.js
    │   │   │
    │   │   ├───nls
    │   │   │
    │   │   └───templates
    │   │           Dashboard.html
    │   │
    │   ├───mapping
    │   │   │   Map.js
    │   │   │
    │   │   └───templates
    │   │           Map.html
    │   │
    │   └───resources
    │           app.css
    │           main.css
    ├───SidebarApp
    │   │   config.js
    │   │   Controller.js
    │   │
    │   ├───layout
    │   │   │   SideBar.js
    │   │   │
    │   │   ├───nls
    │   │   │
    │   │   └───templates
    │   │           SideBar.html
    │   │
    │   ├───mapping
    │   │   │   Map.js
    │   │   │
    │   │   └───templates
    │   │           Map.html
    │   │
    │   └───resources
    │           app.css
    │           main.css
    └───TopNavApp
        │   config.js
        │   Controller.js
        │
        ├───layout
        │   │   TopNav.js
        │   │
        │   ├───nls
        │   │
        │   └───templates
        │           TopNav.html
        │
        ├───mapping
        │   │   Map.js
        │   │
        │   └───templates
        │           Map.html
        │
        └───resources
                app.css
                main.css

I'm leaning towards the different packages approach b/c it's unlikely that anyone would use multiple layouts/configs, etc w/in the same app, which would make any one of the individual apps a better starting point for someone than a single app that has them all. The problem w/ that is the duplication of the map widget in each app. That could be resolved by make it it's own package at the same level as the apps.

I'm curious if @tsamaya or any other users of this repo have thoughts on which folder/package structure would make the most sense.

Thanks!

While running grunt build getting an error, "Fatal error: Spawn Ok"

Any help to resolve this issue is greatly appreciated.

Update to v3.10 of JSAPI

New folder structure for existing widgets

Use src/app/map and src/app/layout for map and nav widgets instead of src/app/widgets folder for all.

Add ability to have custom basemaps

Looks like there's already a TODO for this here. We prefer to use our own custom basemaps rather than Esri's (nah-nah).

If I can implement, I'll submit a PR. No promises though.

css theme needed

The sample with the webmapid needs a css theme (claro, tundra,..). The pie chart are not visible without such a theme.
PR #54 solves it on the no-build source file

"Fatal error: spawn ok" while running grunt build on Windows 7

I aware of the other issue that was posted by Rahul on this topic. However, using PowerShell did not fix the problem. I tried running the command in cygwin, git bash, and cmd and received the same error.

Tie to specific version of submodules

See: http://twoguysarguing.wordpress.com/2010/11/14/tie-git-submodules-to-a-particular-commit-or-branch/

Get a build working

Either local dojo/rjs build w/ grunt-esri-slurp (preferred) or via JSO

use bower to load bootstrap-map-js

See Esri/bootstrap-map-js#101

add a dashboard example

Either one of these:

http://keen.github.io/dashboards/examples/

Or one of these:

http://www.bootstrapzero.com/bootstrap-templates/dashboard

use bower to load Dojo-Bootstrap

Misc sidebar layout fixes

nav bar in mobile is too tall (55px)
zoom slider overlays attribution in some layouts

Map configuration improvements

• only load map widgets (geocoder, locator, home buttons) if set in config file see: https://github.com/cmv/cmv-app/blob/master/viewer/js/config/viewer.js#L118
• explain how config.map.options changes if using a webmap vs reading layers from config

question really, but it was added to issues

I am very new to the bootstrap world -this example is very cool, but when looking at the source it is very confusing to a beginner - in other examples the body of the index.html page usually explains how the page is constructed - in this example it looks like more advanced techniques are used with links elsewhere - I am having trouble figuring out how you are doing the work. I am curious if you have an sample of the same application which has everything on the index.html page, which will make it easier for a bootstrap beginner to see how you are assembling everything? thanks

Update to work w/ Bootstrap 3

Currently this is based on Bootstrap 2, should be updated to work w/ Boostrap 3

Make "no build" the default configuration

• app will default to using hosted JSAPI, bootstrap map, Dojo bootstrap so people can clone and load right away (nobuild.html becomes index.html)
• current index.html will be renamed build.html and require bower install and esri slurp to run
• grunt build task remains the same, excecpt copies build.html instead of index.html, or could use grunt-processhtml to do build from index.html
• change grunt deploy task to use something like grunt-gh-pages
• need a build.css which includes local dojo/esri.css files and then app.css (which should no longer include those).

See #52 for discussion.

Update JSAPI dependencies

The JSAPI dependency (dojo, etc) versions should match the list here:

https://developers.arcgis.com/javascript/jshelp/new_v311.html

Need to modify bower.json as follows:

  "dependencies": {
    "bootstrap-map-js": "~0.0.2",
    "dojo-bootstrap": "~3.0.2",
    "dijit": "1.10.0",
    "dojo": "1.10.0",
    "dojox": "1.10.0",
    "util": "dojo-util#1.10.0",
    "dgrid": "0.3.15",
    "put-selector": "0.3.5",
    "xstyle": "0.1.3"
  }

Look into using a stylus port of bootstrap

Like:bootstrap-stylus

A few questions come to mind:

1. how would it integrate w/ a build system (should be done in conjunction w/ or after #36)
2. would we also need something to remove unused rules like grunt-uncss
3. is a local, minimized, pruned set of CSS actually faster for user than using a CDN (that is likely cached in user's client)?

"LayerClass is not a constructor" when not using webmap

Hi Tom,
I just pulled down the latest commits and the sidebar looks great. Unfortunately, when I change the config to not use a webmap, I receive a "LayerClass is not a constructor" error. I believe this line is not passing the LayerClass correctly to initLayer.