Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Re: Calcite Maps Bootstrap sample - Search widget...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Calcite Maps Bootstrap sample - Search widget - with Multiple sources(4.8)
Subscribe
08-12-2018
02:08 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
ArcGIS API for JS's 4.8 - Calcite Maps Bootstrap sample - Search widget - with Multiple sources issue. Unable to shows multiple sources
please suggest any ways solve this issue.
I am trying to achieve like the below sample.
http://esri.github.io/geodev-hackerlabs/develop/webmap_apps/create_calcite_maps_app/index.html
Solved! Go to Solution.
1 Solution
Accepted Solutions
08-12-2018
01:54 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
So here is that sample with multiple sources.
<!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>Calcite Maps and Bootstrap - 4.8</title>
<!-- Calcite Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css">
<!-- Calcite Maps -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css">
<!-- ArcGIS JS 4 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body class="calcite-maps calcite-nav-top">
<!-- Navbar -->
<nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark">
<!-- 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 class="active"><a class="hidden-md hidden-lg" href="#mapTab" aria-controls="mapTab" role="tab"
data-toggle="tab"> Map</a></li>
<li><a class="hidden-md hidden-lg" href="#sceneTab" aria-controls="sceneTab"
role="tab" data-toggle="tab"> Scene</a></li>
<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="#panelSettings" aria-haspopup="true"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><a role="button" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</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">A modern framework for building map apps</span>
</div>
<!-- Nav -->
<ul class="nav navbar-nav calcite-nav">
<li class="active"><a id="mapNav" class="hidden-xs hidden-sm" href="#mapTab" aria-controls="mapTab"
aria-expanded="true" role="tab" data-toggle="tab" data-tooltip="tip" title="2D View"
data-placement="bottom">Map</a></li>
<li><a id="sceneNav" class="hidden-xs hidden-sm" href="#sceneTab" aria-controls="sceneTab"
role="tab" data-toggle="tab" data-tooltip="tip" title="3D View" data-placement="bottom">Scene</a></li>
<li>
<!--<div class="calcite-navbar-search calcite-search-expander">-->
<div id="searchWidgetDiv"></div>
<!--</div>-->
</li>
</ul>
</nav>
<!--/.calcite-navbar -->
<!-- Map -->
<div class="calcite-map calcite-map-absolute">
<div id="tabContainer" class="tab-content">
<div id="mapTab" class="tab-pane fade in active" role="tabpanel">
<div id="mapViewDiv"></div>
</div>
<div id="sceneTab" class="tab-pane fade" role="tabpanel">
<div id="sceneViewDiv"></div>
</div>
</div>
</div>
<!-- /.calcite-map -->
<!-- Panels -->
<div class="calcite-panels calcite-panels-right calcite-text-light calcite-bg-dark panel-group">
<!-- 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" 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="basemapPanelDiv"></div>
</div>
</div>
</div>
<!-- Panel Settings -->
<div id="panelSettings" class="panel panel-map collapse">
<div id="headingSettings" class="panel-heading">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseSettings"
data-parent="#panelAccordion" aria-expanded="true" aria-controls="collapseSettings"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="panel-label">Settings</span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSettings"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseSettings" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSettings">
<div class="panel-body">
<div class="form-horizontal">
<!-- Theme -->
<div class="form-group">
<label for="settingsTheme" class="col-xs-3 control-label">Theme</label>
<div class="col-xs-9">
<select id="settingsTheme" class="form-control">
<option value="calcite-dark" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-dark" selected>Calcite Dark</option>
<option value="calcite-light" data-textcolor="calcite-text-dark" data-bgcolor="calcite-bg-light">Calcte Light</option>
</select>
</div>
</div>
<!-- Color -->
<div class="form-group">
<label for="settingsColor" class="col-xs-3 control-label">Color</label>
<div class="col-xs-9">
<select id="settingsColor" class="form-control">
<option value="" data-theme="calcite-theme-light">Calcite Default</option>
<option value="calcite-bgcolor-dark-blue" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Blue</option>
<option value="calcite-bgcolor-dark-green" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Green</option>
<option value="calcite-bgcolor-dark-brown" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Brown </option>
<option value="calcite-bgcolor-dark-red" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Red</option>
<option value="calcite-bgcolor-darkest-grey" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Darkest Grey</option>
<option value="calcite-bgcolor-lightest-grey" data-textcolor="calcite-text-dark" data-bgcolor="calcite-bg-custom">Calcite Lightest Grey</option>
<option value="calcite-bgcolor-blue-75" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Blue 75%</option>
<option value="calcite-bgcolor-black-75" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Black 75%</option>
</select>
</div>
</div>
<!-- Widgets -->
<div class="form-group">
<label for="settingsWidgets" class="col-xs-3 control-label">Widgets</label>
<div class="col-xs-9">
<select id="settingsWidgets" class="form-control">
<option value="calcite-widgets-dark">Calcite Dark</option>
<option value="calcite-widgets-light" selected>Calcite Light</option>
</select>
</div>
</div>
<!-- Layout -->
<div class="form-group">
<label for="settingsLayout" class="col-xs-3 control-label">Layout</label>
<div class="col-xs-9">
<select id="settingsLayout" class="form-control">
<option value="calcite-nav-top" data-nav="navbar-fixed-top" selected>Top</option>
<option value="calcite-nav-bottom" data-nav="navbar-fixed-bottom">Bottom</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.calcite-panels -->
<script type="text/javascript">
var dojoConfig = {
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"
}]
};
</script>
<!-- ArcGIS JS 4 -->
<script src="https://js.arcgis.com/4.8/"></script>
<script>
var app;
require([
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/widgets/Search",
"esri/widgets/BasemapGallery",
"esri/core/watchUtils",
"dojo/query",
"dojo/on",
"esri/layers/FeatureLayer",
"esri/tasks/Locator",
// Calcite Maps
"calcite-maps/calcitemaps-v0.8",
// Calcite Maps ArcGIS Support
"calcite-maps/calcitemaps-arcgis-support-v0.8",
// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",
"bootstrap/Tab",
"dojo/domReady!"
], function(Map, MapView, SceneView, Search, Basemaps, watchUtils,
query, on, FeatureLayer, Locator, CalciteMaps, CalciteMapsArcGIS) {
/******************************************************************
*
* App settings
*
******************************************************************/
app = {
center: [-40, 40],
scale: 50000000,
basemap: "streets",
viewPadding: {
top: 50,
bottom: 0
},
uiComponents: ["zoom", "compass", "attribution"],
mapView: null,
sceneView: null,
containerMap: "mapViewDiv",
containerScene: "sceneViewDiv",
activeView: null,
searchWidget: null
};
/******************************************************************
*
* Create the map and scene view and ui components
*
******************************************************************/
// Map
var map = new Map({
basemap: app.basemap
});
// 2D view
app.mapView = new MapView({
container: app.containerMap,
map: map,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
ui: {
components: app.uiComponents
}
});
CalciteMapsArcGIS.setPopupPanelSync(app.mapView);
// 3D view
app.sceneView = new SceneView({
container: app.containerScene,
map: map,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
ui: {
components: app.uiComponents
}
});
CalciteMapsArcGIS.setPopupPanelSync(app.sceneView);
// Set the active view to scene
setActiveView(app.mapView);
var sources = [];
// Add neighborhoods search
sources.push({
featureLayer: new FeatureLayer({
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched_Styled/F...",
outFields: ["*"]
}),
searchFields: ["NAME"],
displayField: "NAME",
exactMatch: false,
outFields: ["*"],
name: "Find a Neighborhood",
placeholder: "e.g. old town",
popupEnabled: true,
popupOpenOnSelect: true,
searchExtent: app.initialExtent,
withinViewEnabled: false,
searchAllEnabled: true
},{
locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
singleLineFieldName: "SingleLine",
name: "Custom Geocoding Service",
localSearchOptions: {
minScale: 300000,
distance: 50000
},
placeholder: "Search Geocoder",
maxResults: 3,
maxSuggestions: 6,
suggestionsEnabled: false,
minSuggestCharacters: 0
});
// Create the search widget and add it to the navbar instead of view
app.searchWidget = new Search({
view: app.activeView,
sources: sources,
includeDefaultSources: false
}, "searchWidgetDiv");
CalciteMapsArcGIS.setSearchExpandEvents(app.searchWidget);
// Create basemap widget
app.basemapWidget = new Basemaps({
view: app.activeView,
container: "basemapPanelDiv"
});
/******************************************************************
*
* Synchronize the view, search and popup
*
******************************************************************/
// Views
function setActiveView(view) {
app.activeView = view;
}
function syncViews(fromView, toView) {
var viewPt = fromView.viewpoint.clone();
fromView.container = null;
if (fromView.type === "3d") {
toView.container = app.containerMap;
} else {
toView.container = app.containerScene;
}
toView.padding = app.viewPadding;
toView.viewpoint = viewPt;
}
// Search Widget
function syncSearch(view) {
watchUtils.whenTrueOnce(view, "ready", function() {
app.searchWidget.view = view;
if (app.searchWidget.selectedResult) {
app.searchWidget.search(app.searchWidget.selectedResult.name)
}
});
}
// Tab - toggle between map and scene view
query(".calcite-navbar li a[data-toggle='tab']").on("click", function(
event) {
if (event.target.text.indexOf("Map") > -1) {
syncViews(app.sceneView, app.mapView);
setActiveView(app.mapView);
} else {
syncViews(app.mapView, app.sceneView);
setActiveView(app.sceneView);
}
syncSearch(app.activeView);
});
/******************************************************************
*
* Apply Calcite Maps CSS classes to change application on the fly
*
* For more information about the CSS styles or Sass build visit:
* http://github.com/esri/calcite-maps
*
******************************************************************/
var cssSelectorUI = ".calcite-navbar, .calcite-panels",
cssSelectorMap = ".calcite-map";
// Theme - light (default) or dark theme
query("#settingsTheme").on("change", function(event) {
var textColor = event.target.options[event.target.selectedIndex]
.dataset.textcolor,
bgColor = event.target.options[event.target.selectedIndex].dataset
.bgcolor;
query(cssSelectorUI).removeClass(
"calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"
).addClass(textColor + " " + bgColor);
query(cssSelectorUI).removeClass(
"calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"
).addClass(bgColor);
query("#settingsColor").attr("value", "");
});
// Color - custom color
query("#settingsColor").on("change", function(event) {
var customColor = event.target.value,
textColor = event.target.options[event.target.selectedIndex].dataset
.textcolor,
bgColor = event.target.options[event.target.selectedIndex].dataset
.bgcolor;
query(cssSelectorUI).removeClass(
"calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"
).addClass(textColor + " " + bgColor);
query(cssSelectorUI).removeClass(
"calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"
).addClass(customColor);
if (!customColor) {
on.emit(query("#settingsTheme")[0], "change", {
bubbles: true,
cancelable: true
});
}
});
// Widgets - light (default) or dark theme
query("#settingsWidgets").on("change", function(event) {
var theme = event.target.value;
query(cssSelectorMap).removeClass(
"calcite-widgets-dark calcite-widgets-light").addClass(
theme);
});
// Layout - top or bottom nav position
query("#settingsLayout").on("change", function(event) {
var layout = event.target.value;
var layoutNav = event.target.options[event.target.selectedIndex]
.dataset.nav;
query("body").removeClass("calcite-nav-bottom calcite-nav-top")
.addClass(layout);
query("nav").removeClass("navbar-fixed-bottom navbar-fixed-top")
.addClass(layoutNav);
setViewPadding(layout);
});
// Basemap events
query("#selectBasemapPanel").on("change", function(event) {
app.mapView.map.basemap = event.target.options[event.target.selectedIndex]
.dataset.vector;
app.sceneView.map.basemap = event.target.value;
});
// Set view padding for widgets based on navbar position
function setViewPadding(layout) {
var padding, uiPadding;
// Top
if (layout === "calcite-nav-top") {
padding = {
padding: {
top: 50,
bottom: 0
}
};
uiPadding = {
padding: {
top: 15,
right: 15,
bottom: 30,
left: 15
}
};
} else { // Bottom
padding = {
padding: {
top: 0,
bottom: 50
}
};
uiPadding = {
padding: {
top: 30,
right: 15,
bottom: 15,
left: 15
}
};
}
app.mapView.set(padding);
app.mapView.ui.set(uiPadding);
app.sceneView.set(padding);
app.sceneView.ui.set(uiPadding);
// Reset popup
if (app.activeView.popup.visible && app.activeView.popup.dockEnabled) {
app.activeView.popup.visible = false;
app.activeView.popup.visible = true;
}
}
});
</script>
</body>
</html>
4 Replies
08-12-2018
05:13 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Imtiyaz,
Here is that site updated to 4.8 API:
<!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 App">
<meta name="author" content="">
<link rel="icon" href="http://www.esri.com/favicon.ico">
<title>PDX Neighborhoods - Calcite Maps</title>
<!-- Calcite Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css">
<!-- Calcite Maps -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css">
<!-- ArcGIS JS 4.0 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body class="calcite-maps calcite-nav-top">
<!-- Navbar -->
<nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-red-75">
<!-- Dropdown -->
<div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" 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 class="visible-xs" data-target="#panelSearch" role="button" aria-haspopup="true"><span class="glyphicon glyphicon-search"></span> Search</a></li>
<li><a role="button" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-list"></span> Legend</a></li>
<li><a role="button" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Basemaps</a></li>
<li><a role="button" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Toggle Title</a></li>
</ul>
</div>
<!-- Title -->
<div class="calcite-title calcite-overflow-hidden">
<div class="calcite-title-main">2015 Portland Population Density</div>
<span class="calcite-title-divider hidden-xs"></span>
<div class="calcite-title-sub hidden-xs">Explore where people are living in downtown neighborhoods</div>
</div>
<!-- Nav -->
<ul class="nav navbar-nav calcite-nav">
<li><div class="calcite-navbar-search hidden-xs"><div id="searchNavDiv"></div></div></li>
</ul>
</nav><!--/.calcite-navbar -->
<!-- Map Container -->
<div class="calcite-map map-position-absolute">
<div id="mapViewDiv"></div>
</div><!-- /.calcite-map -->
<!-- Panels -->
<div class="calcite-panels calcite-panels-right calcite-text-dark calcite-bg-light panel-group" role="tablist" aria-multiselectable="true">
<!-- Legend Panel -->
<div id="panelLegend" class="panel panel-default collapse">
<div id="headingPanel" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseLegend" data-parent="#panelAccordion" aria-expanded="true" aria-controls="collapseLegend"><span class="glyphicon glyphicon-info-sign" 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>
<!-- 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" 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">
<select id="selectBasemapPanel" class="form-control">
<option value="streets" data-vector="streets-vector">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="topo-vector">Topographic</option>
<option value="gray" data-vector="gray-vector">Gray</option>
<option value="dark-gray" data-vector="dark-gray-vector">Dark Gray</option>
<option value="osm" data-vector="osm">Open Street Map</option>
<option value="dark-gray" data-vector="streets-night-vector" selected>Streets Night</option>
<option value="streets" data-vector="streets-navigation-vector">Streets Mobile</option>
</select>
</div>
</div>
</div>
<!-- Search Panel -->
<div id="panelSearch" class="panel panel-default 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" data-parent="#panelAccordion" aria-expanded="false" aria-controls="collapseSearch"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#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>
</div> <!-- /.panel-group -->
<script type="text/javascript">
var dojoConfig = {
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"
}]
};
</script>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
var app;
require(["esri/Map",
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Search",
"esri/widgets/Legend",
"dojo/query",
"esri/tasks/Locator",
// Calcite Maps
"calcite-maps/calcitemaps-v0.8",
// Calcite Maps ArcGIS Support
"calcite-maps/calcitemaps-arcgis-support-v0.8",
// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",
"bootstrap/Tab",
"dojo/domReady!"
], function(Map, WebMap, FeatureLayer, MapView, Search, Legend, query, Locator, CalciteMaps, CalciteMapsArcGIS) {
// App
app = {
initialExtent: null,
mapView: null,
viewPadding: {
top: 50
},
searchWidgetNav: null,
searchWidgetPanel: null
};
// Webmap
var map = new WebMap({
portalItem: {
id: "7186a92406194797aa518c06c189a71f"
}
});
// View
app.mapView = new MapView({
container: "mapViewDiv",
map: map,
padding: app.viewPadding,
ui: {
components: ["zoom", "compass", "attribution"]
}
});
CalciteMapsArcGIS.setPopupPanelSync(app.mapView);
app.mapView.when(function(){
// Set view properties
app.initialExtent = app.mapView.extent.clone();
app.mapView.popup.dockOptions = {
breakpoint: {width: 768}
}
// Search
app.searchWidgetNav = createSearchWidget("searchNavDiv");
app.searchWidgetPanel = createSearchWidget("searchPanelDiv");
// Legend
createLegendWidget("legendDiv");
});
function createLegendWidget(parentId) {
var legend = new Legend({
viewModel: {
view: app.mapView
}
}, parentId);
legend.startup();
return legend;
}
function createSearchWidget(parentId) {
var search = new Search({
view: app.mapView,
allPlaceholder: "Find neighborhoods and places",
includeDefaultSources: false
}, parentId);
var sources = [];
// Add neighborhoods search
sources.push({
featureLayer: new FeatureLayer({
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched_Styled/F...",
outFields: ["*"]
}),
searchFields: ["NAME"],
displayField: "NAME",
exactMatch: false,
outFields: ["*"],
name: "Find a Neighborhood",
placeholder: "e.g. old town",
popupEnabled: true,
popupOpenOnSelect: true,
searchExtent: app.initialExtent,
withinViewEnabled: false,
searchAllEnabled: true
},{
locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
singleLineFieldName: "SingleLine",
name: "Custom Geocoding Service",
localSearchOptions: {
minScale: 300000,
distance: 50000
},
placeholder: "Search Geocoder",
maxResults: 3,
maxSuggestions: 6,
suggestionsEnabled: false,
minSuggestCharacters: 0
});
// // Add Esri geocoder search
// search.defaultSource.name = "Find an address or place";
// search.defaultSource.placeholder = "e.g. Starbucks";
// search.defaultSource.searchExtent = app.initialExtent;
// sources.push(search.defaultSource);
// Set search sources
search.sources = sources;
search.startup();
return search;
}
// Basemaps
query("#selectBasemapPanel").on("change", function(e){
app.mapView.map.basemap = e.target.options[e.target.selectedIndex].dataset.vector;
});
// Popup - undock
query(".calcite-panels .panel").on("show.bs.collapse", function(e) {
app.mapView.popup.dockEnabled = false;
});
// Panels - hide
app.mapView.popup.watch("currentDockPosition", function(result) {
if (result && query(".calcite-panels .panel.in").length > 0) {
if (!(window.innerWidth > 544 && window.innerWidth < 768)) {
query(".calcite-panels").addClass("invisible");
}
} else {
query(".calcite-panels").removeClass("invisible");
}
});
});
</script>
</body>
</html>
08-12-2018
05:23 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Robert,
Thanks a lot for your response.
I was looking for the same search widget with multiple options in the below sample.
08-12-2018
01:54 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
So here is that sample with multiple sources.
<!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>Calcite Maps and Bootstrap - 4.8</title>
<!-- Calcite Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css">
<!-- Calcite Maps -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css">
<!-- ArcGIS JS 4 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body class="calcite-maps calcite-nav-top">
<!-- Navbar -->
<nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark">
<!-- 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 class="active"><a class="hidden-md hidden-lg" href="#mapTab" aria-controls="mapTab" role="tab"
data-toggle="tab"> Map</a></li>
<li><a class="hidden-md hidden-lg" href="#sceneTab" aria-controls="sceneTab"
role="tab" data-toggle="tab"> Scene</a></li>
<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="#panelSettings" aria-haspopup="true"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><a role="button" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</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">A modern framework for building map apps</span>
</div>
<!-- Nav -->
<ul class="nav navbar-nav calcite-nav">
<li class="active"><a id="mapNav" class="hidden-xs hidden-sm" href="#mapTab" aria-controls="mapTab"
aria-expanded="true" role="tab" data-toggle="tab" data-tooltip="tip" title="2D View"
data-placement="bottom">Map</a></li>
<li><a id="sceneNav" class="hidden-xs hidden-sm" href="#sceneTab" aria-controls="sceneTab"
role="tab" data-toggle="tab" data-tooltip="tip" title="3D View" data-placement="bottom">Scene</a></li>
<li>
<!--<div class="calcite-navbar-search calcite-search-expander">-->
<div id="searchWidgetDiv"></div>
<!--</div>-->
</li>
</ul>
</nav>
<!--/.calcite-navbar -->
<!-- Map -->
<div class="calcite-map calcite-map-absolute">
<div id="tabContainer" class="tab-content">
<div id="mapTab" class="tab-pane fade in active" role="tabpanel">
<div id="mapViewDiv"></div>
</div>
<div id="sceneTab" class="tab-pane fade" role="tabpanel">
<div id="sceneViewDiv"></div>
</div>
</div>
</div>
<!-- /.calcite-map -->
<!-- Panels -->
<div class="calcite-panels calcite-panels-right calcite-text-light calcite-bg-dark panel-group">
<!-- 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" 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="basemapPanelDiv"></div>
</div>
</div>
</div>
<!-- Panel Settings -->
<div id="panelSettings" class="panel panel-map collapse">
<div id="headingSettings" class="panel-heading">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseSettings"
data-parent="#panelAccordion" aria-expanded="true" aria-controls="collapseSettings"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="panel-label">Settings</span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSettings"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseSettings" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSettings">
<div class="panel-body">
<div class="form-horizontal">
<!-- Theme -->
<div class="form-group">
<label for="settingsTheme" class="col-xs-3 control-label">Theme</label>
<div class="col-xs-9">
<select id="settingsTheme" class="form-control">
<option value="calcite-dark" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-dark" selected>Calcite Dark</option>
<option value="calcite-light" data-textcolor="calcite-text-dark" data-bgcolor="calcite-bg-light">Calcte Light</option>
</select>
</div>
</div>
<!-- Color -->
<div class="form-group">
<label for="settingsColor" class="col-xs-3 control-label">Color</label>
<div class="col-xs-9">
<select id="settingsColor" class="form-control">
<option value="" data-theme="calcite-theme-light">Calcite Default</option>
<option value="calcite-bgcolor-dark-blue" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Blue</option>
<option value="calcite-bgcolor-dark-green" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Green</option>
<option value="calcite-bgcolor-dark-brown" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Brown </option>
<option value="calcite-bgcolor-dark-red" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Red</option>
<option value="calcite-bgcolor-darkest-grey" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Darkest Grey</option>
<option value="calcite-bgcolor-lightest-grey" data-textcolor="calcite-text-dark" data-bgcolor="calcite-bg-custom">Calcite Lightest Grey</option>
<option value="calcite-bgcolor-blue-75" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Blue 75%</option>
<option value="calcite-bgcolor-black-75" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Black 75%</option>
</select>
</div>
</div>
<!-- Widgets -->
<div class="form-group">
<label for="settingsWidgets" class="col-xs-3 control-label">Widgets</label>
<div class="col-xs-9">
<select id="settingsWidgets" class="form-control">
<option value="calcite-widgets-dark">Calcite Dark</option>
<option value="calcite-widgets-light" selected>Calcite Light</option>
</select>
</div>
</div>
<!-- Layout -->
<div class="form-group">
<label for="settingsLayout" class="col-xs-3 control-label">Layout</label>
<div class="col-xs-9">
<select id="settingsLayout" class="form-control">
<option value="calcite-nav-top" data-nav="navbar-fixed-top" selected>Top</option>
<option value="calcite-nav-bottom" data-nav="navbar-fixed-bottom">Bottom</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.calcite-panels -->
<script type="text/javascript">
var dojoConfig = {
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"
}]
};
</script>
<!-- ArcGIS JS 4 -->
<script src="https://js.arcgis.com/4.8/"></script>
<script>
var app;
require([
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/widgets/Search",
"esri/widgets/BasemapGallery",
"esri/core/watchUtils",
"dojo/query",
"dojo/on",
"esri/layers/FeatureLayer",
"esri/tasks/Locator",
// Calcite Maps
"calcite-maps/calcitemaps-v0.8",
// Calcite Maps ArcGIS Support
"calcite-maps/calcitemaps-arcgis-support-v0.8",
// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",
"bootstrap/Tab",
"dojo/domReady!"
], function(Map, MapView, SceneView, Search, Basemaps, watchUtils,
query, on, FeatureLayer, Locator, CalciteMaps, CalciteMapsArcGIS) {
/******************************************************************
*
* App settings
*
******************************************************************/
app = {
center: [-40, 40],
scale: 50000000,
basemap: "streets",
viewPadding: {
top: 50,
bottom: 0
},
uiComponents: ["zoom", "compass", "attribution"],
mapView: null,
sceneView: null,
containerMap: "mapViewDiv",
containerScene: "sceneViewDiv",
activeView: null,
searchWidget: null
};
/******************************************************************
*
* Create the map and scene view and ui components
*
******************************************************************/
// Map
var map = new Map({
basemap: app.basemap
});
// 2D view
app.mapView = new MapView({
container: app.containerMap,
map: map,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
ui: {
components: app.uiComponents
}
});
CalciteMapsArcGIS.setPopupPanelSync(app.mapView);
// 3D view
app.sceneView = new SceneView({
container: app.containerScene,
map: map,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
ui: {
components: app.uiComponents
}
});
CalciteMapsArcGIS.setPopupPanelSync(app.sceneView);
// Set the active view to scene
setActiveView(app.mapView);
var sources = [];
// Add neighborhoods search
sources.push({
featureLayer: new FeatureLayer({
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched_Styled/F...",
outFields: ["*"]
}),
searchFields: ["NAME"],
displayField: "NAME",
exactMatch: false,
outFields: ["*"],
name: "Find a Neighborhood",
placeholder: "e.g. old town",
popupEnabled: true,
popupOpenOnSelect: true,
searchExtent: app.initialExtent,
withinViewEnabled: false,
searchAllEnabled: true
},{
locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
singleLineFieldName: "SingleLine",
name: "Custom Geocoding Service",
localSearchOptions: {
minScale: 300000,
distance: 50000
},
placeholder: "Search Geocoder",
maxResults: 3,
maxSuggestions: 6,
suggestionsEnabled: false,
minSuggestCharacters: 0
});
// Create the search widget and add it to the navbar instead of view
app.searchWidget = new Search({
view: app.activeView,
sources: sources,
includeDefaultSources: false
}, "searchWidgetDiv");
CalciteMapsArcGIS.setSearchExpandEvents(app.searchWidget);
// Create basemap widget
app.basemapWidget = new Basemaps({
view: app.activeView,
container: "basemapPanelDiv"
});
/******************************************************************
*
* Synchronize the view, search and popup
*
******************************************************************/
// Views
function setActiveView(view) {
app.activeView = view;
}
function syncViews(fromView, toView) {
var viewPt = fromView.viewpoint.clone();
fromView.container = null;
if (fromView.type === "3d") {
toView.container = app.containerMap;
} else {
toView.container = app.containerScene;
}
toView.padding = app.viewPadding;
toView.viewpoint = viewPt;
}
// Search Widget
function syncSearch(view) {
watchUtils.whenTrueOnce(view, "ready", function() {
app.searchWidget.view = view;
if (app.searchWidget.selectedResult) {
app.searchWidget.search(app.searchWidget.selectedResult.name)
}
});
}
// Tab - toggle between map and scene view
query(".calcite-navbar li a[data-toggle='tab']").on("click", function(
event) {
if (event.target.text.indexOf("Map") > -1) {
syncViews(app.sceneView, app.mapView);
setActiveView(app.mapView);
} else {
syncViews(app.mapView, app.sceneView);
setActiveView(app.sceneView);
}
syncSearch(app.activeView);
});
/******************************************************************
*
* Apply Calcite Maps CSS classes to change application on the fly
*
* For more information about the CSS styles or Sass build visit:
* http://github.com/esri/calcite-maps
*
******************************************************************/
var cssSelectorUI = ".calcite-navbar, .calcite-panels",
cssSelectorMap = ".calcite-map";
// Theme - light (default) or dark theme
query("#settingsTheme").on("change", function(event) {
var textColor = event.target.options[event.target.selectedIndex]
.dataset.textcolor,
bgColor = event.target.options[event.target.selectedIndex].dataset
.bgcolor;
query(cssSelectorUI).removeClass(
"calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"
).addClass(textColor + " " + bgColor);
query(cssSelectorUI).removeClass(
"calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"
).addClass(bgColor);
query("#settingsColor").attr("value", "");
});
// Color - custom color
query("#settingsColor").on("change", function(event) {
var customColor = event.target.value,
textColor = event.target.options[event.target.selectedIndex].dataset
.textcolor,
bgColor = event.target.options[event.target.selectedIndex].dataset
.bgcolor;
query(cssSelectorUI).removeClass(
"calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"
).addClass(textColor + " " + bgColor);
query(cssSelectorUI).removeClass(
"calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"
).addClass(customColor);
if (!customColor) {
on.emit(query("#settingsTheme")[0], "change", {
bubbles: true,
cancelable: true
});
}
});
// Widgets - light (default) or dark theme
query("#settingsWidgets").on("change", function(event) {
var theme = event.target.value;
query(cssSelectorMap).removeClass(
"calcite-widgets-dark calcite-widgets-light").addClass(
theme);
});
// Layout - top or bottom nav position
query("#settingsLayout").on("change", function(event) {
var layout = event.target.value;
var layoutNav = event.target.options[event.target.selectedIndex]
.dataset.nav;
query("body").removeClass("calcite-nav-bottom calcite-nav-top")
.addClass(layout);
query("nav").removeClass("navbar-fixed-bottom navbar-fixed-top")
.addClass(layoutNav);
setViewPadding(layout);
});
// Basemap events
query("#selectBasemapPanel").on("change", function(event) {
app.mapView.map.basemap = event.target.options[event.target.selectedIndex]
.dataset.vector;
app.sceneView.map.basemap = event.target.value;
});
// Set view padding for widgets based on navbar position
function setViewPadding(layout) {
var padding, uiPadding;
// Top
if (layout === "calcite-nav-top") {
padding = {
padding: {
top: 50,
bottom: 0
}
};
uiPadding = {
padding: {
top: 15,
right: 15,
bottom: 30,
left: 15
}
};
} else { // Bottom
padding = {
padding: {
top: 0,
bottom: 50
}
};
uiPadding = {
padding: {
top: 30,
right: 15,
bottom: 15,
left: 15
}
};
}
app.mapView.set(padding);
app.mapView.ui.set(uiPadding);
app.sceneView.set(padding);
app.sceneView.ui.set(uiPadding);
// Reset popup
if (app.activeView.popup.visible && app.activeView.popup.dockEnabled) {
app.activeView.popup.visible = false;
app.activeView.popup.visible = true;
}
}
});
</script>
</body>
</html>
09-03-2018
05:47 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
