Bootstrap Map

Step 1: Get Bootstrap-map-js

The following files will be installed:

  • \src\js\bootstrapmap.js
  • \src\css\bootstrapmap.css
  • \demo\...
  • \templates\...

Step 2: Create a page

Add the basic html and css references for a simple Bootstrap page.


<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
      <script src="../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <h1>Hello, world!</h1>

  </body>
</html>
NOTE: Replace paths with your references. References to the Bootstrap JavaScript and jQuery are not needed as we will add a reference to Dojo-Bootstrap in the next step.

Step 3: Add the map

Add the ArcGIS and Bootstrap Map css and js references to make your map responsive. Cut and paste the code below or try more advanced examples here.


<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- Step 1. Add CSS for the mapping components -->
    <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.13/esri/css/esri.css">   
    <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">   
    <style type="text/css">
      #mapDiv {
        min-height: 100px; 
        max-height: 1000px; 
      }
    </style>

    <!-- HTML5 IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
      <script src="../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    <!-- Step 2. Add HTML to define the layout of the page and the map -->
    <div class="container">
      <div id="mapDiv"></div>
    </div>

    <!-- Step 3. Add JS to load the responsive map -->
    <script>
        var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
        var dojoConfig = {
            packages: [{
                name: "application",
                location: package_path + '/js'
            }, {
                name: "bootstrap",
                location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
            }]
        };
    </script>
    <script src="//js.arcgis.com/3.13compact"></script>
    <script>
        require(["esri/map", "application/bootstrapmap", "dojo/domReady!"], 
          function(Map, BootstrapMap) {
            // Get a reference to the ArcGIS Map class
            var map = BootstrapMap.create("mapDiv",{
              basemap:"national-geographic",
              center:[-122.45,37.77],
              zoom:12
            });
        });
    </script>

  </body>
</html>
NOTE: Replace paths with your references.