Calcite style map with 3.x - problems with Collapse.js

TracySchloss · ‎07-06-2016

I really like the look of the calcite/bootstrap examples. I'm not quite ready to use JSAPI 4.0 though, so I'm working with the samples and hoping they also work with 3.17.

It starts out fine, until I want to close the panel that is opened with a select one of my menu choices. When I click the X to close it, I'm getting an error in Collapse.js "Uncaught TypeError: Cannot read property 'call' of undefined. I'm hoping I can get this to work, and that it's not an impossible combination I've created of CSS etc.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>P & P map - Calcite Bootstrap</title>

  <!-- Calcite Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-bootstrap.min-v0.2.css">

  <!-- Calcite Maps -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.2.css">

  <!-- ArcGIS JS -->
   <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/themes/calcite/esri/esri.css">

  <link type="text/css" rel="stylesheet" href="css/style.css">


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


<script type="text/javascript" src="//js.arcgis.com/3.17compact/"></script> 

    <script type=text/javascript>     
   var pathName = "https://ogitest.oa.mo.gov";
   var loading;
     require([
      "dojo/parser",
      "dojo/on",
      "dojo/dom",
      "dojo/dom-construct",
      "esri/domUtils",
      "esri/map",
      "esri/dijit/Popup",
      "esri/dijit/Search",
      "esri/dijit/BasemapGallery",
      "esri/dijit/HomeButton",
   "esri/dijit/Legend",
      "esri/SpatialReference",
      "esri/geometry/Extent",
     
      "js/mySymbol",
      "js/myLayers",
      "js/mySearch",


      // Bootstrap
      "bootstrap/Collapse",
      "bootstrap/Dropdown",
      "bootstrap/Tab",
   "bootstrap/Support",


      // Calcite Maps
      "calcite-maps/calcitemaps-v0.2",
      "dojo/domReady!"
    
       ], function( parser, on, dom, domConstruct, domUtils,Map, 
    Popup,Search,BasemapGallery, HomeButton,Legend,SpatialReference,Extent, 
    mySymbols, myLayers, mySearch
       ) {
         
     parser.parse();     
     window.app = {};     
     loading = dom.byId("loadingImg");  //loading image. id


   app.spatialReference = new SpatialReference({wkid: 102100 });
   app.startExtent = new Extent(-10583000, 4287025, -9979000, 4980462, app.spatialReference);
        
     var popup = new Popup({
    markerSymbol: mySymbols.highlightSymbol(),
    fillSymbol: mySymbols.highlightFillSymbol()}, 
    domConstruct.create("div"));


  app.map = new Map("mapDiv" ,{
    basemap: "streets",
    extent: app.startExtent,
    infoWindow: popup,
  fitExtent:true
  });


   on(app.map,'update-start',showLoading);
   on(app.map, 'update-end', hideLoading);
   
     on(app.map, 'load', function (){
       var layers = myLayers.defineServices();
       app.map.addLayers(layers);
        
    //Search widget
     mySearch.defineSearch(app.map);       
       
   //Basemapgallery widget 
      var basemapGallery = new BasemapGallery({  
        showArcGISBasemaps: true,
        map: app.map
        }, "basemapGalleryDiv");         
      basemapGallery.startup();
          
   // homeButton widget    
      var homeButton = new HomeButton({
        map: app.map,
        extent: null
        }, "HomeButton");   
      homeButton.startup();
     
   
  //legend widget
  var legend = new Legend({
    map: app.map,
  layerInfos: [
  {layer: app.officeLayer,
        title: "P & P Office"
      } , {
        layer: app.prisonLayer,
        title: "Correctional Facility"
      }]
  }, "legendDiv");
  legend.startup();
  
  });   //end map load 
  
  //functions for managing the status icon
    function showLoading() {
      domUtils.show(loading);
      app.map.disableMapNavigation();
      app.map.hideZoomSlider();
    }

    function hideLoading(error) {
      domUtils.hide(loading);
      app.map.enableMapNavigation();
      app.map.showZoomSlider();
    }
 });
   </script>
    </head>
<body class="calcite calcite-zoom-left calcite-nav-top calcite-layout-medium-title">
  <!-- Navbar -->
  <nav class="navbar calcite-navbar calcite-bg-dark calcite-text-light navbar-fixed-top" style="background-color: #7CB1C2;">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
      <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
        <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="button" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span>Basemaps</a>
        </li>
        <li>
          <a role="button" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Legend</a>
        </li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">Probation and Parole Offices</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">Missouri Department of Corrections</span>
    </div>
     <!-- Nav -->
    <ul class="nav navbar-nav calcite-nav">
      <li>
        <div class="calcite-navbar-search calcite-search-expander">
          <div id="searchDiv"></div>
        </div>
      </li>
    </ul>
</nav>

  <!-- Map  -->
  <div class="calcite-map calcite-map-absolute">
        <div id="mapDiv">
        <div id="HomeButton" ></div>
        </div>   
  </div>
  
    <!-- Panel Group -->
  <div class="calcite-panels calcite-panels-right calcite-text-dark calcite-bg-light panel-group">
   <!-- Basemaps Panel -->
    <div id="panelBasemaps" class="panel collapse">
      <div id="headingBasemaps" class="panel-heading calcite-bgcolor-light" 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" data-target="#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">
  <div id="basemapGalleryDiv"></div> 
        </div>
      </div>
    </div>

    <!-- Legend Panel -->
    <div id="panelLegend" class="panel collapse">
      <div id="headingLegend" class="panel-heading calcite-bgcolor-light" role="tab">
        <div class="panel-title">
          <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseLegend"
            aria-expanded="false" aria-controls="collapseLegend"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span><span class="panel-label">Legend</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelLegend"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
        </div>
      </div>
      <div id="collapseLegend" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLegend">
        <div class="panel-body">
  <div id="legendDiv"></div> 
        </div>
      </div>
    </div>
   </div>
  <!-- end panels -->  
  </body>
</html>

TracySchloss · ‎07-07-2016

I found a 3.x example on the gitHub site for anyone who is attempting this. I had to tinker with the path name to the dojo-bootstrap in order to get it to work, though.

calcite-maps/arcgis-3.x.html at master · Esri/calcite-maps · GitHub

View solution in original post

TracySchloss · ‎07-07-2016

I found a 3.x example on the gitHub site for anyone who is attempting this. I had to tinker with the path name to the dojo-bootstrap in order to get it to work, though.

calcite-maps/arcgis-3.x.html at master · Esri/calcite-maps · GitHub