28 changed files with 26203 additions and 36 deletions
@ -0,0 +1,30 @@ |
|||||||
|
.top-icon { |
||||||
|
text-align: center; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
#content2 { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
min-height: 700px; |
||||||
|
} |
||||||
|
|
||||||
|
#content { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
min-height: 700px; |
||||||
|
} |
||||||
|
|
||||||
|
.navigatorMenu { |
||||||
|
padding-right: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
#HomeButton { |
||||||
|
position: absolute; |
||||||
|
top: 100px; |
||||||
|
left: 15px; |
||||||
|
z-index: 50; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 731 B After Width: | Height: | Size: 731 B |
@ -1,39 +1,116 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
<head> |
<head> |
||||||
<meta charset="utf-8" /> |
<meta charset="UTF-8"> |
||||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
<title>Intro to MapView - Create a 2D map | Sample | ArcGIS Maps SDK for JavaScript 4.30</title> |
<title>Document</title> |
||||||
<style> |
<link rel="stylesheet" href="/assets/css/index.css"> |
||||||
html, |
<link rel="stylesheet" href="/library/bootstrap-4.6.2-dist/css/bootstrap.min.css"> |
||||||
body, |
<script src="/library/jquery/jquery.min.js"></script> |
||||||
#viewDiv { |
<script src="/library/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script> |
||||||
padding: 0; |
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" /> |
||||||
margin: 0; |
<script src="https://js.arcgis.com/4.30/"></script> |
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<link rel="stylesheet" href="/library/arcgis/4.30/esri/themes/light/main.css" /> |
|
||||||
<script src="/library/arcgis/4.30/init.js"></script> |
|
||||||
|
|
||||||
<script> |
<script> |
||||||
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => { |
var esriConfig = { |
||||||
const map = new Map({ |
portalUrl: "https://dev.gisportal.id/portal" |
||||||
basemap: "topo-vector" |
}; |
||||||
}); |
|
||||||
|
|
||||||
const view = new MapView({ |
|
||||||
container: "viewDiv", |
|
||||||
map: map, |
|
||||||
zoom: 4, |
|
||||||
center: [15, 65] // longitude, latitude |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
</script> |
||||||
</head> |
|
||||||
|
|
||||||
<body> |
</head> |
||||||
<div id="viewDiv"></div> |
<body> |
||||||
</body> |
<div class="container-fluid mt-3 mb-2"> |
||||||
|
<div class="card mr-3 ml-3"> |
||||||
|
<div class="card-body"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-6"> |
||||||
|
<div class="d-flex flex-row"> |
||||||
|
<div class="col-2 top-icon"> |
||||||
|
<img src="/assets/icon_png/esri-10GlobeLogo_1C-300x105.png" style="width: 100%;" alt="" srcset=""> |
||||||
|
</div> |
||||||
|
<div class="col-2 top-icon"> |
||||||
|
<button class="btn btn-ligth btn-md"> |
||||||
|
<span class="h4">Map</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-2 top-icon"> |
||||||
|
<button class="btn btn-ligth btn-md active"> |
||||||
|
<span class="h4">Geoprocessing</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col md-6 border"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="border border-ligth mt-4 mb-4"></div> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-6"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-3"> |
||||||
|
<button class="btn btn-ligth btn-md active" role="button" aria-pressed="true"> |
||||||
|
<span class="h5">Clip & Buffer</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-2"> |
||||||
|
<button class="btn btn-ligth btn-md"> |
||||||
|
<span class="h5">Printing</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-7"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col md-6"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="container-fluid"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-2 navigatorMenu"> |
||||||
|
<div class="card ml-3"> |
||||||
|
<div class="card-body"> |
||||||
|
<form> |
||||||
|
<legend>Clip & Buffer Proccess</legend> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="exampleFormControlInput1">Coordinate</label> |
||||||
|
<input type="number" class="form-control" id="exampleFormControlInput1" placeholder="Easting"> |
||||||
|
<input type="number" class="form-control" id="exampleFormControlInput1" placeholder="Northing"> |
||||||
|
</div> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="exampleFormControlSelect1">Radius Distance</label> |
||||||
|
<select class="form-control" id="exampleFormControlSelect1"> |
||||||
|
<option>100</option> |
||||||
|
<option>200</option> |
||||||
|
<option>300</option> |
||||||
|
<option>400</option> |
||||||
|
<option>500</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="exampleFormControlSelect2">Linear Unit</label> |
||||||
|
<select multiple class="form-control" id="exampleFormControlSelect2"> |
||||||
|
<option>Meter</option> |
||||||
|
<option>Kilometer</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<button id="procces" type="submit" class="btn btn-ligth">Submit</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-md-10"> |
||||||
|
<div class="card mr-3"> |
||||||
|
<div class="card-body" id="content"> |
||||||
|
<div id="HomeButton"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script src="main.js"></script> |
||||||
|
</body> |
||||||
</html> |
</html> |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,325 @@ |
|||||||
|
/*! |
||||||
|
* Bootstrap Reboot v4.6.2 (https://getbootstrap.com/) |
||||||
|
* Copyright 2011-2022 The Bootstrap Authors |
||||||
|
* Copyright 2011-2022 Twitter, Inc. |
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) |
||||||
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) |
||||||
|
*/ |
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
html { |
||||||
|
font-family: sans-serif; |
||||||
|
line-height: 1.15; |
||||||
|
-webkit-text-size-adjust: 100%; |
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
||||||
|
font-size: 1rem; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 1.5; |
||||||
|
color: #212529; |
||||||
|
text-align: left; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
[tabindex="-1"]:focus:not(:focus-visible) { |
||||||
|
outline: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
hr { |
||||||
|
box-sizing: content-box; |
||||||
|
height: 0; |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 { |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
abbr[title], |
||||||
|
abbr[data-original-title] { |
||||||
|
text-decoration: underline; |
||||||
|
-webkit-text-decoration: underline dotted; |
||||||
|
text-decoration: underline dotted; |
||||||
|
cursor: help; |
||||||
|
border-bottom: 0; |
||||||
|
-webkit-text-decoration-skip-ink: none; |
||||||
|
text-decoration-skip-ink: none; |
||||||
|
} |
||||||
|
|
||||||
|
address { |
||||||
|
margin-bottom: 1rem; |
||||||
|
font-style: normal; |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
ol, |
||||||
|
ul, |
||||||
|
dl { |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
ol ol, |
||||||
|
ul ul, |
||||||
|
ol ul, |
||||||
|
ul ol { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
dt { |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
dd { |
||||||
|
margin-bottom: .5rem; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
blockquote { |
||||||
|
margin: 0 0 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
b, |
||||||
|
strong { |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
|
||||||
|
small { |
||||||
|
font-size: 80%; |
||||||
|
} |
||||||
|
|
||||||
|
sub, |
||||||
|
sup { |
||||||
|
position: relative; |
||||||
|
font-size: 75%; |
||||||
|
line-height: 0; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
sub { |
||||||
|
bottom: -.25em; |
||||||
|
} |
||||||
|
|
||||||
|
sup { |
||||||
|
top: -.5em; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: #007bff; |
||||||
|
text-decoration: none; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
color: #0056b3; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
a:not([href]):not([class]) { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
a:not([href]):not([class]):hover { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
pre, |
||||||
|
code, |
||||||
|
kbd, |
||||||
|
samp { |
||||||
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
pre { |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 1rem; |
||||||
|
overflow: auto; |
||||||
|
-ms-overflow-style: scrollbar; |
||||||
|
} |
||||||
|
|
||||||
|
figure { |
||||||
|
margin: 0 0 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
vertical-align: middle; |
||||||
|
border-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
svg { |
||||||
|
overflow: hidden; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
caption { |
||||||
|
padding-top: 0.75rem; |
||||||
|
padding-bottom: 0.75rem; |
||||||
|
color: #6c757d; |
||||||
|
text-align: left; |
||||||
|
caption-side: bottom; |
||||||
|
} |
||||||
|
|
||||||
|
th { |
||||||
|
text-align: inherit; |
||||||
|
text-align: -webkit-match-parent; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
display: inline-block; |
||||||
|
margin-bottom: 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
button:focus:not(:focus-visible) { |
||||||
|
outline: 0; |
||||||
|
} |
||||||
|
|
||||||
|
input, |
||||||
|
button, |
||||||
|
select, |
||||||
|
optgroup, |
||||||
|
textarea { |
||||||
|
margin: 0; |
||||||
|
font-family: inherit; |
||||||
|
font-size: inherit; |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
input { |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
select { |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
[role="button"] { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
select { |
||||||
|
word-wrap: normal; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
[type="button"], |
||||||
|
[type="reset"], |
||||||
|
[type="submit"] { |
||||||
|
-webkit-appearance: button; |
||||||
|
} |
||||||
|
|
||||||
|
button:not(:disabled), |
||||||
|
[type="button"]:not(:disabled), |
||||||
|
[type="reset"]:not(:disabled), |
||||||
|
[type="submit"]:not(:disabled) { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
button::-moz-focus-inner, |
||||||
|
[type="button"]::-moz-focus-inner, |
||||||
|
[type="reset"]::-moz-focus-inner, |
||||||
|
[type="submit"]::-moz-focus-inner { |
||||||
|
padding: 0; |
||||||
|
border-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="radio"], |
||||||
|
input[type="checkbox"] { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
textarea { |
||||||
|
overflow: auto; |
||||||
|
resize: vertical; |
||||||
|
} |
||||||
|
|
||||||
|
fieldset { |
||||||
|
min-width: 0; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
|
||||||
|
legend { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
max-width: 100%; |
||||||
|
padding: 0; |
||||||
|
margin-bottom: .5rem; |
||||||
|
font-size: 1.5rem; |
||||||
|
line-height: inherit; |
||||||
|
color: inherit; |
||||||
|
white-space: normal; |
||||||
|
} |
||||||
|
|
||||||
|
progress { |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button, |
||||||
|
[type="number"]::-webkit-outer-spin-button { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
[type="search"] { |
||||||
|
outline-offset: -2px; |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration { |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-file-upload-button { |
||||||
|
font: inherit; |
||||||
|
-webkit-appearance: button; |
||||||
|
} |
||||||
|
|
||||||
|
output { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
summary { |
||||||
|
display: list-item; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
template { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
[hidden] { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
/*# sourceMappingURL=bootstrap-reboot.css.map */ |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,8 @@ |
|||||||
|
/*! |
||||||
|
* Bootstrap Reboot v4.6.2 (https://getbootstrap.com/) |
||||||
|
* Copyright 2011-2022 The Bootstrap Authors |
||||||
|
* Copyright 2011-2022 Twitter, Inc. |
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) |
||||||
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) |
||||||
|
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important} |
||||||
|
/*# sourceMappingURL=bootstrap-reboot.min.css.map */ |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,64 @@ |
|||||||
|
// $( "#dynamic-header" ).load( "pages/header.html" );
|
||||||
|
// $( "#dynamic-main" ).load( "pages/body.html" );
|
||||||
|
$(document).ready(function () { |
||||||
|
require([ |
||||||
|
"esri/config", |
||||||
|
"esri/WebMap", |
||||||
|
"esri/views/MapView", |
||||||
|
"esri/widgets/Home", |
||||||
|
"esri/widgets/LayerList" |
||||||
|
], (esriConfig, WebMap, MapView, Home, LayerList) => { |
||||||
|
|
||||||
|
esriConfig.portalUrl = "https://dev.gisportal.id/portal"; |
||||||
|
const gpUrl = "https://dev.gisportal.id/server/rest/services/mfajri/Buffer_Sample_Geoprocessing/GPServer/Model"; |
||||||
|
document.getElementById('procces').addEventListener('click', e => { |
||||||
|
CLipnBuffer() |
||||||
|
}) |
||||||
|
const webmap = new WebMap({ |
||||||
|
portalItem: { |
||||||
|
id: "60994025213a4874bdb2e39503c72407" |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const view = new MapView({ |
||||||
|
container: "content", |
||||||
|
map: webmap, |
||||||
|
zoom: 16, |
||||||
|
center: [106.840837, -6.294844], |
||||||
|
}); |
||||||
|
|
||||||
|
let homeButton = new Home({ |
||||||
|
view: view, |
||||||
|
container: "HomeButton" |
||||||
|
}); |
||||||
|
|
||||||
|
let layerList = new LayerList({ |
||||||
|
view: view, |
||||||
|
listItemCreatedFunction: (event) => { |
||||||
|
console.log(event); |
||||||
|
|
||||||
|
const item = event.item; |
||||||
|
if (item.layer.type != "group") { |
||||||
|
// don't show legend twice
|
||||||
|
item.panel = { |
||||||
|
content: "legend", |
||||||
|
open: true |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
console.log(webmap.allLayers) |
||||||
|
view.ui.add(layerList, { |
||||||
|
position: "top-right" |
||||||
|
}); |
||||||
|
|
||||||
|
const CLipnBuffer = function() { |
||||||
|
// const params = {
|
||||||
|
// Pipeline_Inspection:
|
||||||
|
// }
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}); |
||||||
|
}) |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
<div class="container-fluid"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-2 navigatorMenu"> |
||||||
|
<div class="card ml-3"> |
||||||
|
<div class="card-body"> |
||||||
|
<form> |
||||||
|
<legend>Clip & Buffer Proccess</legend> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="exampleFormControlInput1">Coordinate</label> |
||||||
|
<input type="number" class="form-control" id="exampleFormControlInput1" placeholder="Easting"> |
||||||
|
<input type="number" class="form-control" id="exampleFormControlInput1" placeholder="Northing"> |
||||||
|
</div> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="exampleFormControlSelect1">Radius Distance</label> |
||||||
|
<select class="form-control" id="exampleFormControlSelect1"> |
||||||
|
<option>100</option> |
||||||
|
<option>200</option> |
||||||
|
<option>300</option> |
||||||
|
<option>400</option> |
||||||
|
<option>500</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="exampleFormControlSelect2">Linear Unit</label> |
||||||
|
<select multiple class="form-control" id="exampleFormControlSelect2"> |
||||||
|
<option>Meter</option> |
||||||
|
<option>Kilometer</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<button type="submit" class="btn btn-ligth">Submit</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-md-10"> |
||||||
|
<div class="card mr-3"> |
||||||
|
<div class="card-body" id="content"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
<div class="container-fluid mt-3 mb-2"> |
||||||
|
<div class="card mr-3 ml-3"> |
||||||
|
<div class="card-body"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-6"> |
||||||
|
<div class="d-flex flex-row"> |
||||||
|
<div class="col-2 top-icon"> |
||||||
|
<img src="/assets/icon_png/esri-10GlobeLogo_1C-300x105.png" style="width: 100%;" alt="" srcset=""> |
||||||
|
</div> |
||||||
|
<div class="col-2 top-icon"> |
||||||
|
<button class="btn btn-ligth btn-md"> |
||||||
|
<span class="h4">Map</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-2 top-icon"> |
||||||
|
<button class="btn btn-ligth btn-md active"> |
||||||
|
<span class="h4">Geoprocessing</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-6"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col md-6 border"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="border border-ligth mt-4 mb-4"></div> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-6"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-3"> |
||||||
|
<button class="btn btn-ligth btn-md active" role="button" aria-pressed="true"> |
||||||
|
<span class="h5">Clip & Buffer</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-2"> |
||||||
|
<button class="btn btn-ligth btn-md"> |
||||||
|
<span class="h5">Printing</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="col-7"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col md-6"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
Loading…
Reference in new issue