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>
