AnsweredAssumed Answered

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

Question asked by schlot on Jul 6, 2016
Latest reply on Jul 7, 2016 by schlot

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>
  <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="">

  <!-- Calcite Maps -->
  <link rel="stylesheet" href="">

  <!-- ArcGIS JS -->
   <link rel="stylesheet" href="">
<link rel="stylesheet" href="">

  <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,
   packages: [
        name: "bootstrap",
        location: ""
      }, {
        name: "calcite-maps",
        location: ""
      }, { name: 'js',
      location: locationPath + 'js'
    } ]

<script type="text/javascript" src="//"></script> 

    <script type=text/javascript>     
   var pathName = "";
   var loading;

      // Bootstrap

      // Calcite Maps
       ], function( parser, on, dom, domConstruct, domUtils,Map, 
    Popup,Search,BasemapGallery, HomeButton,Legend,SpatialReference,Extent, 
    mySymbols, myLayers, mySearch
       ) {
     parser.parse();  = {};     
     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")); = new Map("mapDiv" ,{
    basemap: "streets",
    extent: app.startExtent,
    infoWindow: popup,

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

    function hideLoading(error) {
<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>
      <ul class="dropdown-menu">
          <a role="button" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span>Basemaps</a>
          <a role="button" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Legend</a>
    <!-- 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>
     <!-- Nav -->
    <ul class="nav navbar-nav calcite-nav">
        <div class="calcite-navbar-search calcite-search-expander">
          <div id="searchDiv"></div>

  <!-- Map  -->
  <div class="calcite-map calcite-map-absolute">
        <div id="mapDiv">
        <div id="HomeButton" ></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 id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps">
        <div class="panel-body">
  <div id="basemapGalleryDiv"></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 id="collapseLegend" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLegend">
        <div class="panel-body">
  <div id="legendDiv"></div> 
  <!-- end panels -->