AnsweredAssumed Answered

Modal dialog in Calcite Maps template

Question asked by lukepaine on Dec 17, 2018
Latest reply on Jan 3, 2019 by rscheitlin

I am attempting to add a modal dialog into the Calcite Maps template, as per the About box in the style explorer example found Calcite Maps - Style Explorer. Following the steps outlined below, I am able to get a modal dialog to display, but when I do, the panels cannot be closed - the x buttons do nothing.

 

Steps:

  1. Download the calcite maps project from Github (GitHub - Esri/calcite-maps: A Bootstrap theme for designing, styling and creating modern map apps. )
  2. Modify the samples/arcgis-3.x/arcgis-3.x.html reference Bootstrap 3.3 javascript library (as per instructions here Calcite Bootstrap)
  3. Add a modal dialog and link to the nav bar to open it (based on sample at the Calcite Bootstrap link)

 

Running the sample, the modal opens fine but the  panels (e.g. Info panel) can no longer be closed. Removing the Bootstrap reference means the panels can be closed, but the modal no longer works.

 

Any ideas? Full page code is below:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="Calcite Maps Demo - ArcGIS">
  <meta name="author" content="">
  <link rel="icon" href="https://www.esri.com/favicon.ico">
  <title>Calcite Maps - ArcGIS Sample</title>

  <!-- Calcite Maps Bootstrap -->
  <link rel="stylesheet" href="../../dist/css/calcite-maps-bootstrap.min-v0.9.css">

  <!-- Calcite Maps -->
  <link rel="stylesheet" href="../../dist/css/calcite-maps-arcgis-3.x.min-v0.9.css"-->

  <!-- ArcGIS JS 3.x -->
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/dijit/calcite.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/esri/esri.css">
         
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>

</head>

<body class="calcite calcite-maps calcite-nav-top calcite-margin-all calcite-zoom-top-left calcite-layout-inline-left">

  <!-- Navbar -->

  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-dark-purple">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
      <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Info</a></li>
        <li><a class="visible-xs" role="button" data-target="#panelSearch" aria-haspopup="true"><span class="glyphicon glyphicon-search"></span> Search</a></li>
        <li><a role="menuitem" tabindex="0" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Basemaps</a></li>
        <li><a role="menuitem" tabindex="0" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li>
        <li data-toggle="modal" data-target="#myModal"><a role="menuitem" tabindex="0" ><span class="glyphicon glyphicon-alert"></span> Modal</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">Calcite Maps</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">Starter app for the ArcGIS API for JS 3.x (dojo)</span>
    </div>
     <!-- Nav -->
    <ul class="calcite-nav nav navbar-nav">                   
      <li><div class="calcite-navbar-search hidden-xs"><div id="searchNavDiv"></div></div></li>
    </ul>

  </nav><!--/.navbar -->

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Map Container  -->

  <div class="calcite-map">
    <div id="mapViewDiv" class="calcite-map-absolute"></div>
  </div><!-- /.container -->

  <!-- Panel -->

  <div class="calcite-panels calcite-panels-right calcite-bg-light calcite-text-dark panel-group" role="tablist" aria-multiselectable="true">
         
    <!-- Info Panel -->
 
    <div id="panelInfo" class="panel collapse">
      <div id="headingInfo" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo"  aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">Info</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> 
        </div>
      </div>
      <div id="collapseInfo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingInfo">
        <div class="panel-body">
          <p>The main styles used in this app are:</p>
          Body
          <li>calcite-nav-top</li>
          <li>calcite-layout-inline-left</li>
          <br>
          Nav
          <li>calcite-bgcolor-dark-purple</li>
          <li>calcite-text-light</li>
          <br>
          Panels
          <li>calcite-panels-right</li>
        </div>
      </div>
    </div>
 
    <!-- Search Panel -->

    <div id="panelSearch" class="panel collapse hidden-sm hidden-md hidden-lg">
      <div id="headingSearch" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSearch"  aria-expanded="false" aria-controls="collapseSearch"><span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="panel-label">Search</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelSearch"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>       
        </div>
      </div>
      <div id="collapseSearch" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSearch">
        <div class="panel-body calcite-body-expander">
          <div id="searchPanelDiv"></div>
        </div>
      </div>
    </div>

    <!-- Basemaps Panel -->
   
    <div id="panelBasemaps" class="panel collapse">
      <div id="headingBasemaps" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseBasemaps" aria-expanded="false"   aria-controls="collapseBasemaps"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span><span class="panel-label">Basemaps</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelBasemaps"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> 
        </div>
      </div>
      <div id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps">
        <div class="panel-body">
          <select id="selectBasemapPanel" class="form-control">
            <option value="streets" data-vector="vector-streets">Streets</option>
            <option value="satellite" data-vector="satellite">Satellite</option>
            <option value="hybrid" data-vector="hybrid">Hybrid</option>
            <option value="national-geographic" data-vector="national-geographic">National Geographic</option>
            <option value="topo" data-vector="vector-streets-relief">Topographic</option>
            <option value="gray" data-vector="vector-canvas-light">Gray</option>
            <option value="dark-gray" data-vector="vector-canvas-dark">Dark Gray</option>
            <option value="osm" data-vector="osm">Open Street Map</option>
            <option value="dark-gray" data-vector="vector-streets-night">Streets Night</option>
            <option value="streets" data-vector="vector-streets-mobile">Streets Mobile</option>
          </select>
        </div>
      </div>
    </div>

  </div> <!-- /.calcite-panels -->

 

    <script type="text/javascript">
      var dojoConfig = {
        packages: [{
          name: "bootstrap",
          //location: "https://esri.github.io/calcite-maps/dist/js/dojo-bootstrap"
          location: location.pathname.replace(/\/[^/]+$/, "") + "./../../dist/vendor/dojo-bootstrap"
        },
        {
          name: "calcite-maps",
          //location: "https://esri.github.io/calcite-maps/dist/js/dojo"
          location: location.pathname.replace(/\/[^/]+$/, "") + "./../../dist/js/dojo"
        }]
      };
    </script>


    <!-- ArcGIS JS 3.x -->
    <script src="https://js.arcgis.com/3.25/"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script>

        var app;

        require([
          // ArcGIS
          "esri/map",
          "esri/dijit/Search",
          "dojo/query",

          // Calcite Maps
          "calcite-maps/calcitemaps-v0.9",
         
          // Bootstrap
          "bootstrap/Collapse",
          "bootstrap/Dropdown",
          "bootstrap/Tab",

          "dojo/domReady!"
        ], function(Map, Search, query, CalciteMaps) {
            
          // App
          app = {
            map: null,
            basemap: "dark-gray",
            center: [-40, 40], // lon, lat
            zoom: 3,
            initialExtent: null,
            searchWidgetNav: null,
            searchWidgetPanel: null
          }

          // Map
          app.map = new Map("mapViewDiv", {
            basemap: app.basemap,
            center: app.center,
            zoom: app.zoom
          });

          app.map.on("load", function(){
            app.initialExtent = app.map.extent;
          })
   
          // Search
          app.searchDivNav = createSearchWidget("searchNavDiv");
          app.searchWidgetPanel = createSearchWidget("searchPanelDiv");

          function createSearchWidget(parentId) {
            var search = new Search({
              map: app.map,
              enableHighlight: false
              }, parentId);
            search.startup();
            return search;
          }

          // Basemaps
          query("#selectBasemapPanel").on("change", function(e){
            app.map.setBasemap(e.target.options[e.target.selectedIndex].value);
          });

          // Home
          query(".calcite-navbar .navbar-brand").on("click", function(e) {
            app.map.setExtent(app.initialExtent);
          })

        });
    </script>


</body>
</html>

Outcomes