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, css and js 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>

    <!-- jQuery (for Bootstrap's JavaScript plugins) -->
    <script src="../assets/js/jquery.js"></script>
    <!-- Include all  plugins or individual files as needed -->
    <script src="../assets/js/bootstrap.min.js"></script>
  </body>
</html>
NOTE: Replace paths with your references.

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="https://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="https://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 type="text/javascript">
        var package_path = "//esri.github.com/bootstrap-map-js/src/js";
        var dojoConfig = {
            packages: [{
                name: "application",
                location: package_path
            }]
        };
    </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>

    <!-- jQuery (for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Include all  plugins or individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </body>
</html>
NOTE: Replace paths with your references.