<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Insert title here</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="src/jquery.responsive-collapse.css" rel="stylesheet">
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
<style>
html, body, #viewDiv
{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<style>
body { background-color:#fafafa; font-family:'Roboto';}
h1 { margin:70px auto; text-align:center;}
.navbar-inverse .navbar-nav>li>a
{
color: #FFF;
}
.navbar-inverse .navbar-brand {
color: #FFF;
}
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 20px;
line-height: 20px;
}
.basemapli{padding-bottom: 5px;width: 100%; }
</style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
//$("#divFloatRoadSearch").draggable();
$(".floatingDivs").draggable();
});
</script>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
let view;
let legend;
let print;
require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/ScaleBar",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",
"esri/layers/FeatureLayer",
"esri/PopupTemplate",
"esri/widgets/Zoom",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/geometry/Geometry",
"esri/geometry/Extent",
"esri/symbols/SimpleLineSymbol",
"esri/geometry/geometryEngine",
"esri/renderers/UniqueValueRenderer",
"esri/widgets/Print",
"esri/widgets/Legend",
], function(Map, MapView,WebMap,ScaleBar,BasemapToggle,BasemapGallery,FeatureLayer,PopupTemplate,Zoom,
QueryTask,Query,Geometry,Extent,SimpleLineSymbol,geometryEngine,UniqueValueRenderer,Print,Legend) {
var map = new Map({
basemap: "topo"
});
view = new MapView({
container: "viewDiv",
map: map,
center: [92.0985,21.5],
zoom: 7
});
var scaleBar = new ScaleBar({
view: view,
unit: "dual"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
var toggle = new BasemapToggle({
view: view,
nextBasemap: "hybrid" ,
nextBasemap:"national-geographic"
});
view.ui.add(toggle, "top-right");
// Road Static
var roadsLayer = new FeatureLayer("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", {
id : "roads",
outFields: ["*"],
popupTemplate: {
title: "Test",
content: "Hello"
}
});
// SH Layer
var shLayer = new FeatureLayer("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", {
id:"state",
outFields: ["*"],
popupTemplate: {
title: "Test",
content: "Hello"
}
});
$("#chkRoadLayer").click(function () {
if(!roadsLayer){
}else {
}
if ($(this).is(":checked")) {
map.add(roadsLayer);
//print.printServiceUrl=roadsLayer;
//legend.layerInfos.layer =roadsLayer;
/* legend.basemapLegendVisible = true;
legend.layerInfos[0]=roadsLayer; */
//layer.title
view.when(function() {
// get the first layer in the collection of operational layers in the WebMap
// when the resources in the MapView have loaded.
//var featureLayer = map.layers.getItemAt(0);
legend = new Legend({
view: view,
layerInfos: [
{
layer: roadsLayer,
title: "LEGEND"
}
]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-right");
});
} else {
map.layers.remove(roadsLayer);
legend.destroy();
}
});
$("#chkLayerSTATE").click(function () {
if(!shLayer){
}
else{}
if ($(this).is(":checked")) {
map.add(shLayer,1);
view.when(function() {
// get the first layer in the collection of operational layers in the WebMap
// when the resources in the MapView have loaded.
//var featureLayer = map.layers.getItemAt(0);
//legend.startup();
legend = new Legend({
view: view,
layerInfos: [
{
layer: shLayer,
title: "LEGEND"
}
]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-right");
});
//alert(legend.layerInfos[1].layer.attributionDataUrl);
//var result = JSON.stringify(legend);
//console.log("legendobject",legend);
$("#divContentDivisionLEGEND").text(legend);
} else {
map.layers.remove(shLayer);
legend.destroy();
}
});
});
</script>
</head>
<body class="calcite">
<!-- <div id="view" style="padding-top: 50px;"> -->
<div id="viewDiv" style="padding-top: 50px;">
<!-- <button style="position: absolute;top: 100px; right: 100px;">Toggle between hide() and show()</button> -->
</div>
<!-- <div id="legendDiv" style="height:100px;width: 100px;border:1px solid black;">
</div> -->
<div class="navbar navbar-inverse navbar-fixed-top" >
<div class="container" style="background-color: #4c4c4c;width: 100%;padding-right: 0px;padding-left: 0px;float: left;">
<div class="navbar-header" style="float: left">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav" style="margin-right:125px;">
<!--<li><a href="#"><i class="fa fa-link"></i> Item 1</a></li>-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Layers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><input type="checkbox" id="chkRoadLayer" />Road</a></li>
<li><a href="#"><input type="checkbox" id="chkLayerSTATE" />STATE </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Additional Layers <b class="caret"></b></a>
</li>
<li><a href="#" id="hrefLegend"><i class="fa fa-link"></i>Legend</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Thematic Map<b class="caret"></b></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Search<b class="caret"></b></a>
</li>
</ul>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="src/jquery.responsive-collapse.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('ul.navbar-nav').responsiveCollapse();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--vertical menu code ends here-->
<script>
function myFunction(idstr) {
document.getElementById(idstr).classList.toggle("show");
}
</script>
<!-- LEGEND STARTS -->
<div class="floatingDivs" id="divFloatLEGEND" style="cursor: move;background-color:#444;height:200px;width:300px;margin-left:200px;top:100px;z-index:10;position:absolute;border-radius:7px;border:2px solid white;display: none;" >
<div style="float: left;width: 100%;height:20px;">
<div style="background-color:#000;color:#ffd700;font-weight:bold;padding-left:1%;height:20px; float: left;">LEGEND</div>
<div style="margin-left: 94%;height:20px">
<input type="button" value="X" id="btnCloseLEGEND" name="btnClose">
</div>
</div>
<div style="clear: both;"></div>
<div id="divContentDivisionLEGEND" style="padding-left:1%;background-color:#444;color:white;">
<script type="text/javascript">
</script>
</div>
</div>
<!-- LEGEND ENDS -->
<!-- </div> -->
</body>
</html>