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
- :
- Switch WebMaps 3.x
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
Switch WebMaps 3.x
Subscribe
501
0
05-04-2018 05:19 AM
05-04-2018
05:19 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
I am working on an application where I want the user to be able to switch between webmaps in the same application similar to this - Calcite Maps - ArcGIS 4.x except instead of a Scene View and Map View, I want both to be API 3.24 webmaps.
Has anyone done this or can they provide some insight in how to accomplish this?
My code so far
<!DOCTYPE html>
<html>
<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="">
<title>TESTESTEST</title>
<!-- Calcite Maps Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.3.css">
<!-- Calcite Maps -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-3.x.min-v0.3.css">
<!-- ArcGIS JS 3.x -->
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/themes/calcite/esri/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dgrid/css/dgrid.css">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#bottompane {
height: 100px;
}
#grid {
height: 100%;
}
.dgrid {
border: none;
}
.calcite-panels {
z-index: 31;
}
.calcite-panels.calcite-panels-table {
position: absolute;
bottom: 0;
top: auto;
left: 0;
right: 0;
z-index: 30;
}
#panelTable {
margin-bottom: 0;
}
#panelTable .panel-body {
height: 400px;
width: 100%;
}
</style>
</head>
<body class="calcite calcite-nav-top">
<nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-custom calcite-bgcolor-dark-blue">
<!-- Menu -->
<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" role="button" data-target="#panelSearch" aria-haspopup="true">
<span class="glyphicon glyphicon-search"></span> Search</a>
</li>
<li>
<a role="menuitem" data-target="#panelLegend" aria-haspopup="true">
<span class="glyphicon glyphicon-list-alt"></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" data-target="#panelTable" data-toggle="collapse" aria-haspopup="true">
<span class="glyphicon glyphicon-list"></span> Table</a>
</li>
</ul>
</div>
<!-- Title -->
<div class="calcite-title calcite-overflow-hidden">
<span class="calcite-title-main hidden-xs">My WebMap App</span>
<span class="hidden-xs"
</div>
<!-- Nav -->
<ul class="calcite-nav nav navbar-nav">
<li>
<a id="map1" class="hidden-xs hidden-sm" href="#map1Tab" aria-controls="map1Tab" aria-expanded="true" role="tab" data-toggle="tab"
data-tooltip="tip" title="Map 1" data-placement="bottom">Map 1</a>
</li>
<li>
<a id="Map 2" class="hidden-xs hidden-sm" href="#map2Tab" aria-controls="Map 2Tab" aria-expanded="true" role="tab" data-toggle="tab"
data-tooltip="tip" title="Map 2" data-placement="bottom">Map 2</a>
</li>
<li>
<div class="calcite-navbar-search hidden-xs">
<div id="searchNavDiv"></div>
</div>
</li>
</ul>
</nav>
<!-- Map Container -->
<div class="calcite-map">
<div id="tabContainer" class="tab-content">
<div id="map1Tab" class="tabe-pane active" role="tabpanel">
<div id="map1" class="calcite-map-absolute"></div>
</div>
<div id="map2Tab" class="tab-pane" role="tabpanel" class="tab-pane">
<div id="map2" class="calcite-map-absolute"></div>
</div>
</div>
</div>
<div class="calcite-panels calcite-panels-right calcite-bg-light calcite-text-dark panel-group" role="tablist" aria-multiselectable="true">
<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" 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>
<!-- Legend -->
<div id="panelLegend" class="panel collapse">
<div id="headingLegend" class="panel-heading" 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-list-alt" aria-hidden="true"></span>
<span class="panel-label">Legend</span>
</a>
<a class="panel-close" role="button" data-toggle="collapse" href="#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 body-light">
<div id="legendDiv"></div>
</div>
</div>
</div>
<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" 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>
<!--table-->
<div class="calcite-panels calcite-panels-table calcite-bg-light calcite-text-dark">
<div id="panelTable" class="panel collapse in">
<div id="headingInfo" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseTable" data-parent="#panelAccordion" aria-expanded="true"
aria-controls="collapseInfo">
<span class="glyphicon glyphicon-list" aria-hidden="true"></span> Table</a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelTable">
<span class="esri-icon esri-icon-close" aria-hidden="true"></span>
</a>
</div>
</div>
<div id="collapseTable" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
<div id="container" class="panel-body">
<div id="grid"></div>
</div>
</div>
</div>
</div>
<!-- /html structure -->
<!-- Dojo Config -->
<script type="text/javascript">
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "https://esri.github.io/calcite-maps/dist/vendor/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.24/"></script>
<script>
require([
"dojo/ready",
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/tasks/QueryTask",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/tasks/query",
"esri/InfoTemplate",
"esri/dijit/Search",
"dojo/_base/Color",
"dojo/query",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dojo/_base/connect",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/_base/declare",
"esri/symbols/SimpleFillSymbol",
"dojo/store/Memory",
"dojo/dom-style",
"dgrid/_StoreMixin",
"esri/dijit/Legend",
"esri/arcgis/utils",
// OAuth
"esri/arcgis/Portal",
"esri/arcgis/OAuthInfo",
"esri/IdentityManager",
"dojo/on",
"dojo/parser",
// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",
"bootstrap/Tab",
// Calcite Maps
"calcite-maps/calcitemaps",
], function (ready, Map, FeatureLayer, FeatureTable, QueryTask, FindTask, FindParameters, Query, InfoTemplate, Search, Color, query, dom, registry, array, connect, DataGrid, ItemFileReadStore, Button, BorderContainer, ContentPane, Grid, Selection, declare, SimpleFillSymbol, Memory, domStyle, StoreMixin, Legend, arcgisUtils, arcgisPortal, OAuthInfo, esriID, on, parser
) {
ready(function () {
// OAuth
var info = new OAuthInfo({
//OAuthStuff
});
esriID.registerOAuthInfos([info]);
/************************************************************
* Begin Map Stuff
************************************************************/
parser.parse();
// Set portal URL so the map knows where to pull item id from
arcgisUtils.arcgisUrl = "portal.com/portal"
var webmapids = [
"webmapid1",
"webmapid2"
];
arcgisUtils.createMap("webmapid1", "map1").then(function (response) {
var map1 = response.map;
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map1,
layerInfos: legendLayers
}, "legendDiv");
legendDijit.startup();
});
arcgisUtils.createMap("webmapid2", "map2").then(function (response) {
var map2 = response.map;
var legendDijit = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map2,
layerInfos: legendLayers
}, "legendDiv");
legendDijit.startup()
});
});
})
</script>
</body>
</html>Thanks,
Judson
0 Replies
