932 lines
76 KiB
HTML
932 lines
76 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>AcuGIS | SLD and YSLD Quick Start Online Generator</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimal-ui">
|
|
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
|
<!-- core plugins -->
|
|
<link rel="stylesheet" href="assets/playkit/vendor/css/bootstrap.css">
|
|
<link rel="stylesheet" href="assets/playkit/vendor/css/hamburgers.css">
|
|
<link rel="stylesheet" href="assets/playkit/vendor/bower_components/font-awesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="assets/playkit/vendor/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.css">
|
|
<link href="assets/plugins/leaflet/all.css" rel="stylesheet"/>
|
|
<link href="assets/plugins/leaflet/leaflet-awesome/dist/leaflet.awesome-markers.css" rel="stylesheet"/>
|
|
<link href="assets/plugins/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" />
|
|
|
|
<link href="assets/plugins/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"/>
|
|
<link href="assets/plugins/colorpicker/bootstrap-colorpicker.min.css" rel="stylesheet"/>
|
|
<!--<link href="assets/css/style.css" rel="stylesheet"/>-->
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" >
|
|
|
|
<!-- Plugins CSS -->
|
|
<link rel="stylesheet" type="text/css" href="../assets/vendor/font-awesome/css/all.min.css">
|
|
<link rel="stylesheet" type="text/css" href="../assets/vendor/bootstrap-icons/bootstrap-icons.css">
|
|
<link rel="stylesheet" type="text/css" href="../assets/vendor/tiny-slider/tiny-slider.css">
|
|
<link rel="stylesheet" type="text/css" href="../assets/vendor/aos/aos.css">
|
|
|
|
<!-- Theme CSS -->
|
|
<link rel="stylesheet" type="text/css" href="../assets/css/style.css">
|
|
|
|
|
|
<!-- site-wide stylesheets -->
|
|
<link rel="stylesheet" href="assets/playkit/css/site.css">
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600');
|
|
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500');
|
|
</style>
|
|
<script type="text/javascript">
|
|
//var baseURL = "https://scout.acugis.com/";
|
|
var baseURL = "";
|
|
var googleMapsDefault = "";
|
|
var _token = "nM5mAkYDscjfS1Ym45JJxqNCJKwsmfUqZxYYhToe";
|
|
</script>
|
|
|
|
<script src="assets/playkit/vendor/bower_components/breakpoints.js/dist/breakpoints.min.js"></script>
|
|
<script src="assets/playkit/vendor/js/svg4everybody.min.js"></script>
|
|
<script>
|
|
Breakpoints({xs: {min: 0, max: 575}, sm: {min: 576, max: 767}, md: {min: 768, max: 991}, lg: {min: 992, max: 1199}, xl: {min: 1200, max: Infinity}});
|
|
svg4everybody();
|
|
</script>
|
|
<style>
|
|
.bd-example{
|
|
overflow:auto;
|
|
}
|
|
.breadcrumb li {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.dropdown-item {
|
|
color: #fff;}
|
|
|
|
|
|
.navbar-light .navbar-nav .nav-link {
|
|
color: #fff;}
|
|
|
|
.dropdown-menu {background-color:#3a606e}
|
|
|
|
.dropdown-item {color:#fff!important}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
function save_stylefile(filedata, filename){
|
|
|
|
var file = new Blob([filedata], {type: 'octet/stream'});
|
|
var a = document.createElement("a");
|
|
document.body.appendChild(a);
|
|
|
|
a.style = "display: none";
|
|
a.href = URL.createObjectURL(file);
|
|
a.target = '_blank';
|
|
a.download = filename;
|
|
|
|
a.click();
|
|
|
|
window.URL.revokeObjectURL(a.href);
|
|
|
|
a.remove();
|
|
}
|
|
|
|
function downloadSLD() {
|
|
|
|
var style_name = document.getElementById('style_name').value;
|
|
var text = '<StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd">\n'
|
|
+ ' <NamedLayer>\n'
|
|
+ ' <Name>' + style_name + '</Name>\n'
|
|
+ ' <UserStyle>\n'
|
|
+ ' <Title>AcuGIS SLD and YSLD Quick Start</Title>\n';
|
|
|
|
for (var i = 0; i < selectedLayers.length; i++) {
|
|
text += ' <FeatureTypeStyle>\n'
|
|
+ ' <Rule>\n';
|
|
|
|
var l = selectedLayers[i];
|
|
switch(l['lt']){
|
|
case 'polyline':
|
|
text += ' <LineSymbolizer>\n'
|
|
+ ' <Stroke>\n'
|
|
+ ' <CssParameter name="stroke">' + l['style']['polygon']['color'] + '</CssParameter>\n'
|
|
+ ' <CssParameter name="stroke-width">' + l['style']['polygon']['weight'] + '</CssParameter>\n'
|
|
+ ' <CssParameter name="stroke-dasharray">' + l['style']['polygon']['stroke_type'] + '</CssParameter>\n'
|
|
+ ' <CssParameter name="stroke-opacity">' + l['style']['polygon']['opacity'] + '</CssParameter>\n'
|
|
+ ' </Stroke>\n'
|
|
+ ' </LineSymbolizer>\n';
|
|
break;
|
|
case 'polygon':
|
|
case 'circle':
|
|
case 'rectangle':
|
|
text += ' <PolygonSymbolizer>\n'
|
|
+ ' <Fill>\n'
|
|
+ ' <CssParameter name="fill">' + l['style']['polygon']['fillColor'] +'</CssParameter>\n'
|
|
+ ' <CssParameter name="fill-opacity">' + l['style']['polygon']['fillOpacity'] + '</CssParameter>\n'
|
|
+ ' </Fill>\n'
|
|
+ ' <Stroke>\n'
|
|
+ ' <CssParameter name="stroke">' + l['style']['polygon']['color'] + '</CssParameter>\n'
|
|
+ ' <CssParameter name="stroke-width">' + l['style']['polygon']['weight'] + '</CssParameter>\n'
|
|
+ ' <CssParameter name="stroke-dasharray">' + l['style']['polygon']['stroke_type'] + '</CssParameter>\n'
|
|
+ ' <CssParameter name="stroke-opacity">' + l['style']['polygon']['opacity'] + '</CssParameter>\n'
|
|
+ ' </Stroke>\n'
|
|
+ ' </PolygonSymbolizer>\n';
|
|
break;
|
|
case 'marker':
|
|
text += "<PointSymbolizer>\n"
|
|
+ " <Graphic>\n"
|
|
+ " <ExternalGraphic>\n"
|
|
+ " <OnlineResource xlink:type=\"simple\" xlink:href=\"" + l['style']['marker']['image'] + "\" />\n"
|
|
+ " <Format></Format>\n"
|
|
+ " </ExternalGraphic>\n"
|
|
+ " <Size>32</Size>\n"
|
|
+ " </Graphic>\n"
|
|
+ " </PointSymbolizer>\n";
|
|
break;
|
|
}
|
|
text += ' </Rule>\n'
|
|
+ ' </FeatureTypeStyle>\n';
|
|
}
|
|
|
|
text += ' </UserStyle>\n'
|
|
+ ' </NamedLayer>\n'
|
|
+ '</StyledLayerDescriptor>\n';
|
|
|
|
save_stylefile(text, style_name + '.sld');
|
|
}
|
|
|
|
function downloadYSLD() {
|
|
|
|
var style_name = document.getElementById('style_name').value;
|
|
var text = "title: '" + style_name + "'\n"
|
|
+ "feature-styles: \n";
|
|
|
|
for (var i = 0; i < selectedLayers.length; i++) {
|
|
//common for all types
|
|
text += "- name: '" + style_name + "'\n"
|
|
+ " rules:\n"
|
|
+ " - symbolizers: \n";
|
|
|
|
var l = selectedLayers[i];
|
|
switch(l['lt']){
|
|
case 'polyline':
|
|
text += " - line:\n"
|
|
+ " stroke : " + l['style']['polygon']['color'] + "\n"
|
|
+ " stroke-width : " + l['style']['polygon']['weight'] + "\n"
|
|
+ " stroke-opacity : " + l['style']['polygon']['opacity'] + "\n";
|
|
break;
|
|
|
|
case 'polygon':
|
|
case 'circle':
|
|
case 'rectangle':
|
|
text += " - polygon:\n"
|
|
+ " fill-color: '" + l['style']['polygon']['fillColor'] + "'\n"
|
|
+ " fill-opacity: " + l['style']['polygon']['fillOpacity'] + "\n"
|
|
+ " stroke : " + l['style']['polygon']['color'] + "\n"
|
|
+ " stroke-width : " + l['style']['polygon']['weight'] + "\n"
|
|
+ " stroke-opacity : " + l['style']['polygon']['opacity'] + "\n";
|
|
break;
|
|
|
|
case 'marker':
|
|
text += " - point:\n"
|
|
+ " size : 32\n"
|
|
+ " symbols:\n"
|
|
+ " - external:\n"
|
|
+ " url: " + l['style']['marker']['image'] + "\n"
|
|
+ " format : ,"
|
|
break;
|
|
} //end switch
|
|
|
|
//separate section with double newline
|
|
text += "\n\n";
|
|
}
|
|
|
|
save_stylefile(text, style_name + '.ysld');
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-27490906-1']);
|
|
_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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body class="menubar-left menubar-inverse dashboard dashboard-v1 menubar-fold user_farm no-padding demo-examples demo-table-datatables menubar-fold" style="padding-top:0px!important">
|
|
<!--[if lt IE 10]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<header class="navbar-light" style="background-color: #3a606e">
|
|
<!-- Logo Nav START -->
|
|
<nav class="navbar navbar-expand-lg">
|
|
<div class="container">
|
|
<!-- Logo START -->
|
|
<a class="navbar-brand" href="index.html">
|
|
<img class="navbar-brand-item" src="../assets/images/formgeo-logo.fw.png" alt="logo">
|
|
</a>
|
|
<!-- Logo END -->
|
|
|
|
<!-- Responsive navbar toggler -->
|
|
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" style="color:#fff!important">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Main navbar START -->
|
|
<div class="collapse navbar-collapse" id="navbarCollapse" style="background-color: #3a606e">
|
|
<ul class="navbar-nav navbar-nav-scroll mx-auto">
|
|
<!-- Nav item 1 Home --> <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="pageMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Corporation</a>
|
|
<ul class="dropdown-menu" aria-labelledby="pageMenu">
|
|
<li> <a class="dropdown-item" href="about-us.htm">About</a> </li>
|
|
<li> <a class="dropdown-item" href="hosting-locations.html">Data Centers</a> </li>
|
|
<li class="dropdown-submenu dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#">Open Source Projects</a>
|
|
<ul class="dropdown-menu" data-bs-popper="none">
|
|
<li> <a class="dropdown-item" href="open-geosuite/">OpenGeoSuite</a> </li> <li> <a class="dropdown-item" href="geohelm">GeoHelm</a> </li>
|
|
<li> <a class="dropdown-item" href="opentileserver">OpenTileServer</a> </li>
|
|
<li> <a class="dropdown-item" href="opennameserver">OpenNameServer</a> </li>
|
|
<li> <a class="dropdown-item" href="modules">Modules</a> </li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li> <a class="dropdown-item" href="government.html">Government</a> </li>
|
|
<li> <a class="dropdown-item" href="academic-discounts.html">Academic Discounts</a> </li>
|
|
<li> <a class="dropdown-item" href="/blogs">Blog</a> </li>
|
|
<li> <a class="dropdown-item" href="contact-us.html">Contact</a> </li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="pageMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >PostGIS</a>
|
|
<ul class="dropdown-menu" aria-labelledby="pageMenu">
|
|
<li> <a class="dropdown-item" href="postgis-hosting.htm">PostGIS</a> </li>
|
|
<li> <a class="dropdown-item" href="postgis-dedicated-hosting.html">PostGIS Dedicated</a> </li>
|
|
<li> <a class="dropdown-item" href="pg-tileserv-hosting.html"><span style="text-transform: lowercase;">pg_tileserv</span> Hosting</a> </li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item"><a class="nav-link" href="lizmap-hosting.html">Lizmap</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="g3w-suite-hosting.html">G3W-Suite</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="geonode-hosting.html">GeoNode</a></li> <li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="pageMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">GeoServer</a>
|
|
<ul class="dropdown-menu" aria-labelledby="pageMenu">
|
|
<li> <a class="dropdown-item" href="geoserver-hosting.htm">GeoServer</a> </li>
|
|
<li> <a class="dropdown-item" href="acugis-suite/">GeoServer Dedicated</a> </li>
|
|
<li> <a class="dropdown-item" href="geoserver-oracle-spatial/">GeoServer for Oracle Spatial</a> </li>
|
|
<li> <a class="dropdown-item" href="acugis-enterprise-suite/">GeoServer Cluster</a> </li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="pageMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/opensource.png" style="width: 20px"></a>
|
|
<ul class="dropdown-menu" aria-labelledby="pageMenu">
|
|
<li> <a class="dropdown-item" href="open-geosuite/">OpenGeoSuite</a> </li> <li> <a class="dropdown-item" href="opentileserver/">OpenTileServer</a> </li>
|
|
<li> <a class="dropdown-item" href="opennamesearch/">OpenNameSearch</a> </li>
|
|
<li> <a class="dropdown-item" href="postgis-builder/">PostGIS Builder</a> </li>
|
|
<li> <a class="dropdown-item" href="geohelm/">GeoHelm</a> </li>
|
|
<li> <a class="dropdown-item" href="modules/">Modules</a> </li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- Nav right begin -->
|
|
<div class="d-none d-sm-block">
|
|
|
|
<a href="acugis-help.html" class="btn btn-dark mb-0 mx-2">Help</a>
|
|
</div>
|
|
<!-- Nav right END -->
|
|
</div>
|
|
</nav>
|
|
<!-- Logo Nav END -->
|
|
</header>
|
|
<!-- =======================
|
|
Header END -->
|
|
|
|
<main>
|
|
|
|
|
|
<div class="row" style="padding: 35px">
|
|
<div class="col-12">
|
|
<div class="section-title" style="padding-left: 50px">
|
|
<h6 style="color:#9aa0ae; line-height: 30px"><img src="sld-ysld.fw.png" alt="" style="padding-right: 18px" align="left">The Y/SLD Quick Start tools below can be used to provide a simple way to get your SLD/YSLD styles started visually. Draw shapes on the canvas and then select fill and line colors, stroke, etc... Once you have closed an edit window, you can continue to edit the shape using the settings button located at the top left of the map canvas (example: <img src="polygon.jpg">). Once completed, download the SLD or YSLD style sheet and add it to GeoServer. Note: this tool is intended only as a quick start/visual aid. It does not contain the full functions available via SLD and YSLD.</h6>
|
|
</div>
|
|
<!-- end section-title -->
|
|
</div></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="site-wrapper" style="padding-left:35px">
|
|
<main class="site-main">
|
|
<section class="site-content">
|
|
<div class="demo-wrapper">
|
|
<div class="bd-content">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<ul id="active-layers-container" class="nav nav-pills"></ul>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<br/>
|
|
<section class="content" id="map">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<form method="post" action="save" accept-charset="UTF-8" class="form-horizontals" id="layer-form">
|
|
<input name="_token" type="hidden" value="nM5mAkYDscjfS1Ym45JJxqNCJKwsmfUqZxYYhToe">
|
|
<input id="action_type" name="action_type" type="hidden" value="">
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="box">
|
|
<div class="box-body no-padding">
|
|
<div id="mapid" class="style-map" style="height:500px; width:100%">
|
|
<div id="data" class="module app animate row1" style="display:none">
|
|
<div class="draw-controls js-tabs row1 block contain dark fill-blue pull-left" style="width:100%;">
|
|
|
|
<a href="#" id="draw-polyline" class="col4 button unround keyline-left icon polyline" title="Draw a line"><i class="fa fa-minus"></i> Line</a>
|
|
<a href="#" id="draw-polygon" class="col4 button unround keyline-left icon polygon" title="Draw a polygon"><i class="fa fa-diamond"></i> Polygon</a>
|
|
<a href="#" id="draw-rectangle" class="col4 button unround keyline-left icon rectangle" title="Draw a Rectangle"><i class="fa fa-square-o"></i> Rectangle</a>
|
|
<a href="#" id="draw-circle" class="col4 button unround keyline-left icon " title="Draw a circle"><i class="fa fa-circle"></i> Draw Circle</a>
|
|
<a href="#" id="draw-marker" class="col4 button unround keyline-left place-marker icon marker" title="Place marker"><i class="fa fa-map-marker"></i> Marker</a>
|
|
|
|
|
|
</div>
|
|
<div class="draw-controls js-tabs row1 block contain dark fill-blue pull-right hide" style="width:15%">
|
|
<a href="#" id="edit-edit" class="pin-right button unround keyline-left icon edit" title="Edit"><i class="fa fa-edit"></i> Edit</a>
|
|
<a href="#" id="edit-remove" class="pin-right button unround keyline-left icon delete pull-right" title="Delete"><i class="fa fa-remove"></i></a>
|
|
|
|
</div>
|
|
<div id="marker-help" class="animate pin-top row1 small active">
|
|
<div class="small pad1x clearfix truncate">
|
|
<span id="control-tip-buttons"><span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input class="form-control" id="layer_json" name="layer_json" type="hidden">
|
|
<input class="form-control" id="id" name="id" type="hidden" value="21">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-4">
|
|
<div class="row">
|
|
<div class="col-lg-11">
|
|
<div class="card">
|
|
|
|
<header class="card-header">
|
|
<h2 class="card-heading">SLD/YSLD Style Generator</h2>
|
|
</header>
|
|
<div class="card-block d-flex">
|
|
<div class="form-group col-md-12">
|
|
<lable class="control-label">Name</lable>
|
|
<div class="controls">
|
|
<input class="form-control required" name="name" type="text" id="style_name" value="Style">
|
|
<br/>
|
|
<div class="form-action">
|
|
<br/>
|
|
<a href="javascript:downloadSLD()" class="btn btn-primary btn-xs" id="download-sld">SLD</a>
|
|
<a href="javascript:downloadYSLD()" class="btn btn-primary btn-xs" id="download-ysld">YSLD</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.card-block -->
|
|
|
|
</div><!-- /.card -->
|
|
</div><!-- /.card -->
|
|
|
|
<div class="col-lg-11">
|
|
<div class="card">
|
|
|
|
<header class="card-header">
|
|
<h2 class="card-heading">How to Use:</h2>
|
|
</header>
|
|
<div class="card-block d-flex">
|
|
<ol type="1">
|
|
<li>Draw a Marker, Polygon or Line.</li>
|
|
<li>Style with desired properties.</li>
|
|
<li>Download the style either in SLD or YSLD format.</li>
|
|
<li>Log in into Geoserver (or other platform).</li>
|
|
<li>Go to: Style-> Add New Style and paste downloaded style and click on Save.</li>
|
|
<li>Select your newly created style for Layer.</li>
|
|
</ol>
|
|
</div><!-- /.card-block -->
|
|
|
|
</div><!-- /.card -->
|
|
</div><!-- /.card -->
|
|
|
|
</div><!-- /.row -->
|
|
</div><!-- /.row -->
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /.box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Sidebar -->
|
|
<aside id="style-edit-layers-container" class="control-sidebar side-panel" style="padding-left:35px">
|
|
<div id="map-sidebar-container">
|
|
</div>
|
|
</aside>
|
|
<!-- /.control-sidebar -->
|
|
<!-- Add the sidebar's background. This div must be placed
|
|
immediately after the control sidebar -->
|
|
<div class="control-sidebar-bg map-sidebar-bg"></div>
|
|
|
|
<script id="cl-style-modal-tmpl" type="x-tmpl-mustache">
|
|
|
|
|
|
<form id="style_settings_form" method="post">
|
|
<div class="side-panel-tabs">
|
|
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
|
|
<li role="presentation" class="nav-item active {{ #t.marker }} hide {{ /t.marker }} {{ ^type.marker_style }} hide {{ /type.marker_style}}">
|
|
<a href="#layer-polygon-styling" class="nav-link active">Style</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item active {{ #t.polygon }} hide {{ /t.polygon }} {{ ^type.polygon_style }} hide {{ /type.polygon_style}}">
|
|
<a href="#layer-marker-styling" class="nav-link">Marker Styling</a>
|
|
</li>
|
|
|
|
</ul>
|
|
<input class="form-control" placeholder="" name="my_unique_id" type="hidden" value="{{ t.unique_id }}"> <input type="hidden" name="_token" value="nM5mAkYDscjfS1Ym45JJxqNCJKwsmfUqZxYYhToe"> <!-- Tab panes -->
|
|
<div class="tab-content">
|
|
|
|
<div role="tabpanel" class="tab-pane active {{ #t.polygon }} hide {{ /t.polygon }} {{ ^type.polygon_style }} hide {{ /type.polygon_style }}" id="layer-marker-styling">
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="col-md-12"><h4>Default</h4></div>
|
|
</div>
|
|
|
|
|
|
<div class="row default-marker-style" id="">
|
|
<div class="col-md-12" id="image_preview_marker">
|
|
<a href="javascript:void(0)" name="" class="markers-images" id=""><img src="https://scout.acugis.com/uploads/markers/40ab7406b2bdc3baade8d69bbfd37940cb1f88b9.php" width="32"/></a>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix"> </div>
|
|
<div class="row default-marker-style" id="">
|
|
<div class="col-md-12">
|
|
<div id="upload-file" class="dropzone"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<a href="javascript:void(0)" class="btn btn-lg sidebar-close-btn" >Close</a>
|
|
</div>
|
|
|
|
<div id="layer-polygon-styling" class="tab-pane active {{ #t.marker }} hide {{ /t.marker }} {{ ^type.marker_style }} hide {{ /type.marker_style}}">
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<p class="help-text">Style Rectangle, line, Polygon</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">Stroke Color</label>
|
|
<div class="controls">
|
|
<input class="form-control color-picker" id="layer_polygon_color" name="color" type="text" value="{{ t.style.polygon.color }}"> </div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">Stroke Opacity (range: 0-1)</label>
|
|
<div class="controls">
|
|
<input class="form-control" id="layer_polygon_opacity" name="opacity" type="text" value="{{ t.style.polygon.opacity }}"> </div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">Stroke Width</label>
|
|
<div class="controls">
|
|
<input class="form-control" id="layer_polygon_weight" name="weight" type="text" value="{{ t.style.polygon.weight }}"> </div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">Stroke Style</label>
|
|
<div class="controls">
|
|
<select class="form-control" name="stroke_type"><option value="">solid</option><option value="2.0">dashed</option></select> </div>
|
|
</div>
|
|
</div>
|
|
<div id="fill-color-container" class="col-md-12">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">Fill Color</label>
|
|
<div class="controls">
|
|
<input class="form-control color-picker" id="layer_polygon_fill_color" name="fillColor" type="text" value="{{ t.style.polygon.fillColor }}"> </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">Fill Opacity (range: 0-1)</label>
|
|
<div class="controls">
|
|
<input class="form-control" id="layer_polygon_fill_opacity" name="fillOpacity" type="text" value="{{ t.style.polygon.fillOpacity }}"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="javascript:void(0)" class="btn btn-lg sidebar-close-btn" id="">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
|
|
</script>
|
|
<script id="nr-style-selection" type="x-tmpl-mustache">
|
|
<p>Define Range Between 0 to {{ max }}</p>
|
|
<div class="table-responsive" style="height:300px">
|
|
<table class="table table-striped table-bordered table-hover" id="attribute-numeric-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Column</th>
|
|
<th>Marker Color</th>
|
|
<th>Marker Icon</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</script>
|
|
|
|
<script id="g-style-selection" type="x-tmpl-mustache">
|
|
|
|
<div class="table-responsive" style="height:300px">
|
|
<table class="table table-striped table-bordered table-hover" id="attribute-numeric-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Column</th>
|
|
<th>Marker Color</th>
|
|
<th>Marker Icon</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</script>
|
|
|
|
<script id="nr-column-style-selection" type="x-tmpl-mustache">
|
|
<tr>
|
|
<td>
|
|
<div class="form-group">
|
|
<input name="attributes_name[]" placeholder="Enter Range like this ex. 0-1" class="form-control" value=""/>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<div class="controls">
|
|
<select class="form-control" data-name="markerColor" name="marker_color[]"><option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option><option value="purple">Purple</option><option value="orange">Orange</option><option value="darkred">Darkred</option><option value="lightred">Lightred</option><option value="beige">Beige</option><option value="darkblue">Darkblue</option><option value="darkpurple">Darkpurple</option><option value="white">White</option><option value="pink">Pink</option><option value="lightblue">Lightblue</option><option value="lightgreen">Lightgreen</option><option value="gray">Gray</option><option value="black">Black</option><option value="cadetblue">Cadet Blue</option><option value="brown">Brown</option><option value="lightgray">Lightgray</option></select> </div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<div class="controls">
|
|
<select class="form-control" data-name="icon" name="marker_icon[]"><option value="adjust">Adjust</option><option value="anchor">Anchor</option><option value="archive">Archive</option><option value="area-chart">Area Chart</option><option value="arrows">Arrows</option><option value="arrows-h">Arrows H</option><option value="arrows-v">Arrows V</option><option value="asterisk">Asterisk</option><option value="at">At</option><option value="automobile">Automobile</option><option value="ban">Ban</option><option value="bank">Bank</option><option value="bablack">Black</option><option value="cadetblue">Cadet Blue</option><option value="brown">Brown</option><option value="lightgray">Lightgray</option></select> </div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<div class="controls">
|
|
<select class="form-control" data-name="icon" name="marker_icon[]"><option value="adjust">Adjust</option><option value="anchor">Anchor</option><option value="archive">Archive</option><option value="area-chart">Area Chart</option><option value="arrows">Arrows</option><option value="arrows-h">Arrows H</option><option value="arrows-v">Arrows V</option><option value="asterisk">Asterisk</option><option value="at">At</option><option value="automobile">Automobile</option><option value="ban">Ban</option><option value="bank">Bank</option><option value="bar-chart">Bar Chart</option><option value="bar-chart-o">Bar Chart O</option><option value="barcode">Barcode</option><option value="bars">Bars</option><option value="bed">Bed</option><option value="beer">Beer</option><option value="bell">Bell</option><option value="bell-o">Bell O</option><option value="bell-slash">Bell Slash</option><option value="bell-slash-o">Bell Slash O</option><option value="bicycle">Bicycle</option><option value="binoculars">Binoculars</option><option value="birthday-cake">Birthday Cake</option><option value="bolt">Bolt</option><option value="bomb">Bomb</option><option value="book">Book</option><option value="bookmark">Bookmark</option><option value="bookmark-o">Bookmark O</option><option value="briefcase">Briefcase</option><option value="bug">Bug</option><option value="building">Building</option><option value="building-o">Building O</option><option value="bullhorn">Bullhorn</option><option value="bullseye">Bullseye</option><option value="bus">Bus</option><option value="cab">Cab (Alias)</option><option value="calculator">Calculator</option><option value="calendar">Calendar</option><option value="calendar-o">Calendar O</option><option value="camera">Camera</option><option value="camera-retro">Camera Retro</option><option value="car">Car</option><option value="caret-square-o-down">Caret Square O Down</option><option value="caret-square-o-left">Caret Square O Left</option><option value="caret-square-o-right">Caret Square O Right</option><option value="caret-square-o-up">Caret Square O Up</option><option value="cart-arrow-down">Cart Arrow Down</option><option value="cart-plus">Cart Plus</option><option value="cc">CC</option><option value="certificate">Certificate</option><option value="check">Check</option><option value="check-circle">Check Circle</option><option value="check-circle-o">Check Circle O</option><option value="check-square">Check Square</option><option value="check-square-o">Check Square O</option><option value="child">Child</option><option value="circle">Circle</option><option value="circle-o">Circle O</option><option value="circle-o-notch">Circle O Notch</option><option value="circle-thin">Circle Thin</option><option value="clock-o">Clock O</option><option value="close">Close (Alias)</option><option value="cloud">Cloud</option><option value="cloud-download">Cloud Download</option><option value="cloud-sgupload">Cloud Upload</option><option value="code">Code</option><option value="code-fork">Code Fork</option><option value="coffee">Coffee</option><option value="cog">Cog</option><option value="cogs">Cogs</option><option value="comment">Comment</option><option value="comment-o">Comment O</option><option value="comments">Comments</option><option value="comments-o">Comments O</option><option value="compass">Compass</option><option value="copyright">Copyright</option><option value="credit-card">Credit Card</option><option value="crop">Crop</option><option value="crosshairs">Crosshairs</option><option value="cube">Cube</option><option value="cubes">Cubes</option><option value="cutlery">Cutlery</option><option value="dashboard">Dashboard</option><option value="database">Database</option><option value="desktop">Desktop</option><option value="diamond">Diamond</option><option value="dot-circle-o">Dot Circle O</option><option value="download">Download</option><option value="edit">Edit</option><option value="ellipsis-h">Ellipsis H</option><option value="ellipsis-v">Ellipsis V</option><option value="envelope">Envelope</option><option value="envelope-o">Envelope O</option><option value="envelope-square">Envelope Square</option><option value="eraser">Eraser</option><option value="exchange">Exchange</option><option value="exclamation">Exclamation</option><option value="exclamation-circle">Exclamation Circle</option><option value="exclamation-triangle">Exclamation Triangle</option><option value="external-link">External Link</option><option value="external-link-square">External Link Square</option><option value="eye">Eye</option><option value="eye-slash">Eye Slash</option><option value="eyedropper">Eye Dropper</option><option value="fax">Fax</option><option value="female">Female</option><option value="fighter-jet">Fighter Jet</option><option value="file-archive-o">File Archive O</option><option value="file-audio-o">File Audio O</option><option value="file-code-o">File Code O</option><option value="file-excel-o">File Excel O</option><option value="file-image-o">File Image O</option><option value="file-movie-o">File Movie O</option><option value="pdf-o">Pdf O</option><option value="file-photo-o">File Photo O</option><option value="file-picture-o">File Picture O</option><option value="file-powerpoint-o">File Powerpoint O</option><option value="file-sound-o">File Sound O</option><option value="file-video-o">File Video O</option><option value="file-word-o">File Word O</option><option value="file-zip-o">File Zip O</option><option value="film">Film</option><option value="filter">Filter</option><option value="fire">Fire</option><option value="fire-extinguisher">Fire Extinguisher</option><option value="flag">Flag</option><option value="flag-checkered">Flag Checkered</option><option value="flag-o">Flag O</option><option value="flash">Flash</option><option value="flask">Flask</option><option value="folder">Folder</option><option value="folder-o">Folder O</option><option value="folder-open">Folder Open</option><option value="folder-open-o">Folder Open O</option><option value="frown-o">Frown O</option><option value="futbol-o">Futbol O</option><option value="gamepad">Game Pad</option><option value="gavel">Gavel</option><option value="gear">Gear</option><option value="gears">Gears</option><option value="genderless">Gender Less</option><option value="gift">Gift</option><option value="glass">Glass</option><option value="globe">Globe</option><option value="graduation-cap">Graduation Cap</option><option value="group">Group</option><option value="hdd-o">Hdd O</option><option value="headphones">Head Phones</option><option value="heart">Heart</option><option value="heart-o">Heart O</option><option value="heartbeat">Heartbeat</option><option value="history">History</option><option value="home">Home</option><option value="hotel">Hotel</option><option value="image">Image</option><option value="inbox">Inbox</option><option value="info">Info</option><option value="info-circle">Info Circle</option><option value="institution">Institution</option><option value="key">Key</option><option value="keyboard-o">Keyboard O</option><option value="language">Language</option><option value="laptop">Laptop</option><option value="leaf">Leaf</option><option value="legal">Legal</option><option value="lemon-o">Lemon O</option><option value="level-down">Level Down</option><option value="level-up">Level Up</option><option value="life-bouy">Life Bouy</option><option value="life-buoy">Life Buoy</option><option value="life-ring">Life Ring</option><option value="life-saver">Life Saver</option><option value="lightbulb-o">Light bulb O</option><option value="line-chart">Line Chart</option><option value="location-arrow">Location Arrow</option><option value="lock">Lock</option><option value="magic">Magic</option><option value="magnet">Magnet</option><option value="mail-forward">Mail Forward</option><option value="mail-reply">Mail Reply</option><option value="mail-reply-all">Mail Reply All</option><option value="male">Male</option><option value="map-marker">Map Marker</option><option value="meh-o">Meh O</option><option value="microphone">Microphone</option><option value="microphone-slash">Microphone Slash</option><option value="minus">Minus</option><option value="minus-circle">Minus Circle</option><option value="minus-square">Minus Square</option><option value="minus-square-o">Minus Square O</option><option value="mobile">Mobile</option><option value="mobile-phone">Mobile Phone</option><option value="money">Money</option><option value="moon-o">Moon O</option><option value="mortar-board">Mortar Board</option><option value="motorcycle">Motorcycle</option><option value="music">Music</option><option value="navicon">NavIcon</option><option value="newspaper-o">Newspaper O</option><option value="paint-brush">Paint Brush</option><option value="paper-plane">Paper Plane</option><option value="paper-plane-o">Paper Plane O</option><option value="paw">Paw</option><option value="pencil">Pencil</option><option value="pencil-square">Pencil Square</option><option value="pencil-square-o">Pencil Square O</option><option value="phone">Phone</option><option value="phone-square">Phone Square</option><option value="photo">Photo</option><option value="picture-o">Picture O</option><option value="pie-chart">Pie Chart</option><option value="plane">Plane</option><option value="plug">Plug</option><option value="plus">Plus</option><option value="plus-circle">Plus Circle</option><option value="plus-square">Plus Square</option><option value="plus-square-o">Plus Square O</option><option value="power-off">Power Off</option><option value="print">Print</option><option value="puzzle-piece">Puzzle Piece</option><option value="qrcode">QR Code</option><option value="question">Question</option><option value="question-circle">Question Circle</option><option value="quote-left">Quote Left</option><option value="quote-right">Quote Right</option><option value="random">Random</option><option value="recycle">Recycle</option><option value="refresh">Refresh</option><option value="remove">Remove</option><option value="reorder">Reorder</option><option value="reply">Reply</option><option value="reply-all">Reply All</option><option value="retweet">Re Tweet</option><option value="road">Road</option><option value="rocket">Rocket</option><option value="rss">RSS</option><option value="rss-square">RSS Square</option><option value="search">Search</option><option value="search-minus">Search Minus</option><option value="search-plus">Search Plus</option><option value="send">Send</option><option value="send-o">Send O</option><option value="server">Server</option><option value="share">Share</option><option value="share-alt">Share ALT</option><option value="share-alt-square">Share ALT Square</option><option value="share-square">Share Square</option><option value="share-square-o">Share Square O</option><option value="shield">Shield</option><option value="ship">Ship</option><option value="shopping-cart">Shopping Cart</option><option value="sign-in">Sign In</option><option value="sign-out">Sign Out</option><option value="signal">Signal</option><option value="sitemap">Sitemap</option><option value="sliders">Sliders</option><option value="smile-o">Smile O</option><option value="soccer-ball-o">Soccer Ball O</option><option value="sort">Sort</option><option value="sort-alpha-asc">Sort Alpha Asc</option><option value="sort-alpha-desc">Sort Alpha Desc</option><option value="sort-amount-asc">Sort Amount Asc</option><option value="sort-amount-desc">Sort Amount Desc</option><option value="sort-asc">Sort Asc</option><option value="sort-desc">Sort Desc</option><option value="sort-down">Sort Down</option><option value="sort-numeric-asc">Sort Numeric Asc</option><option value="sort-numeric-desc">Sort Numeric Desc</option><option value="sort-up">Sort Up</option><option value="space-shuttle">Space Shuttle</option><option value="spinner">Spinner</option><option value="spoon">Spoon</option><option value="square">Square</option><option value="square-o">Square O</option><option value="star">Star</option><option value="star-half">Star Half</option><option value="star-half-empty">Star Half Empty</option><option value="star-half-full">Star Half Full</option><option value="star-half-o">Star Half O</option><option value="star-o">Star O</option><option value="street-view">Street View</option><option value="suitcase">Suitcase</option><option value="sun-o">Sun O</option><option value="support">Support</option><option value="tablet">Tablet</option><option value="tachometer">Tachometer</option><option value="tag">Tag</option><option value="tags">Tags</option><option value="tasks">Tasks</option><option value="taxi">Taxi</option><option value="terminal">Terminal</option><option value="thumb-tack">Thumb Tack</option><option value="thumb-down">Thumb Down</option><option value="thumb-o-down">Thumb O Down</option><option value="thumb-o-up">Thumb Down Up</option><option value="ticket">Ticket</option><option value="times">Times</option><option value="times-circle">Times Circle</option><option value="times-circle-o">Times Circle O</option><option value="tint">Tint</option><option value="toggle-down">Toggle Down</option><option value="toggle-left">Toggle left</option><option value="toggle-off">Toggle Off</option><option value="toggle-on">Toggle On</option><option value="toggle-right">Toggle Right</option><option value="toggle-up">Toggle Up</option><option value="trash">Trash</option><option value="trash-o">Trash O</option><option value="tree">Tree</option><option value="trophy">Trophy</option><option value="truck">Truck</option><option value="tty">TTY</option><option value="umbrella">Umbrella</option><option value="university">University</option><option value="unlock">Unlock</option><option value="unlock-alt">Unlock ALT</option><option value="unsorted">Unsorted</option><option value="upload">Upload</option><option value="user">User</option><option value="user-plus">User Plus</option><option value="user-secret">User Secret</option><option value="user-times">User Times</option><option value="users">Users</option><option value="video-camera">Video Camera</option><option value="volume-down">Volume Down</option><option value="volume-off">Volume Off</option><option value="volume-up">Volume Up</option><option value="warning">Warning</option><option value="wheelchair">Wheelchair</option><option value="wifi">Wifi</option><option value="wrench">Wrench</option></select> </div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="javascript:void(0)" class="btn btn-primary numeric-range"><i class="fa fa-plus"></i></a>
|
|
</td>
|
|
</tr>
|
|
</script>
|
|
|
|
<script id="g-column-style-selection" type="x-tmpl-mustache">
|
|
<tr>
|
|
<td>
|
|
<div class="form-group">
|
|
<input name="attributes_name[]" class="form-control" value="{{ attr }}"/>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<div class="controls">
|
|
<select class="form-control" data-name="markerColor" name="marker_color[]"><option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option><option value="purple">Purple</option><option value="orange">Orange</option><option value="darkred">Darkred</option><option value="lightred">Lightred</option><option value="beige">Beige</option><option value="darkblue">Darkblue</option><option value="darkpurple">Darkpurple</option><option value="white">White</option><option value="pink">Pink</option><option value="lightblue">Lightblue</option><option value="lightgreen">Lightgreen</option><option value="gray">Gray</option><option value="black">Black</option><option value="cadetblue">Cadet Blue</option><option value="brown">Brown</option><option value="lightgray">Lightgray</option></select> </div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<div class="controls">
|
|
<select class="form-control" data-name="icon" name="marker_icon[]"><option value="adjust">Adjust</option><option value="anchor">Anchor</option><option value="archive">Archive</option><option value="area-chart">Area Chart</option><option value="arrows">Arrows</option><option value="arrows-h">Arrows H</option><option value="arrows-v">Arrows V</option><option value="asterisk">Asterisk</option><option value="at">At</option><option value="automobile">Automobile</option><option value="ban">Ban</option><option value="bank">Bank</option><option value="bar-chart">Bar Chart</option><option value="bar-chart-o">Bar Chart O</option><option value="barcode">Barcode</option><option value="bars">Bars</option><option value="bed">Bed</option><option value="beer">Beer</option><option value="bell">Bell</option><option value="bell-o">Bell O</option><option value="bell-slash">Bell Slash</option><option value="bell-slash-o">Bell Slash O</option><option value="bicycle">Bicycle</option><option value="binoculars">Binoculars</option><option value="birthday-cake">Birthday Cake</option><option value="bolt">Bolt</option><option value="bomb">Bomb</option><option value="book">Book</option><option value="bookmark">Bookmark</option><option value="bookmark-o">Bookmark O</option><option value="briefcase">Briefcase</option><option value="bug">Bug</option><option value="building">Building</option><option value="building-o">Building O</option><option value="bullhorn">Bullhorn</option><option value="bullseye">Bullseye</option><option value="bus">Bus</option><option value="cab">Cab (Alias)</option><option value="calculator">Calculator</option><option value="calendar">Calendar</option><option value="calendar-o">Calendar O</option><option value="camera">Camera</option><option value="camera-retro">Camera Retro</option><option value="car">Car</option><option value="caret-square-o-down">Caret Square O Down</option><option value="caret-square-o-left">Caret Square O Left</option><option value="caret-square-o-right">Caret Square O Right</option><option value="caret-square-o-up">Caret Square O Up</option><option value="cart-arrow-down">Cart Arrow Down</option><option value="cart-plus">Cart Plus</option><option value="cc">CC</option><option value="certificate">Certificate</option><option value="check">Check</option><option value="check-circle">Check Circle</option><option value="check-circle-o">Check Circle O</option><option value="check-square">Check Square</option><option value="check-square-o">Check Square O</option><option value="child">Child</option><option value="circle">Circle</option><option value="circle-o">Circle O</option><option value="circle-o-notch">Circle O Notch</option><option value="circle-thin">Circle Thin</option><option value="clock-o">Clock O</option><option value="close">Close (Alias)</option><option value="cloud">Cloud</option><option value="cloud-download">Cloud Download</option><option value="cloud-sgupload">Cloud Upload</option><option value="code">Code</option><option value="code-fork">Code Fork</option><option value="coffee">Coffee</option><option value="cog">Cog</option><option value="cogs">Cogs</option><option value="comment">Comment</option><option value="comment-o">Comment O</option><option value="comments">Comments</option><option value="comments-o">Comments O</option><option value="compass">Compass</option><option value="copyright">Copyright</option><option value="credit-card">Credit Card</option><option value="crop">Crop</option><option value="crosshairs">Crosshairs</option><option value="cube">Cube</option><option value="cubes">Cubes</option><option value="cutlery">Cutlery</option><option value="dashboard">Dashboard</option><option value="database">Database</option><option value="desktop">Desktop</option><option value="diamond">Diamond</option><option value="dot-circle-o">Dot Circle O</option><option value="download">Download</option><option value="edit">Edit</option><option value="ellipsis-h">Ellipsis H</option><option value="ellipsis-v">Ellipsis V</option><option value="envelope">Envelope</option><option value="envelope-o">Envelope O</option><option value="envelope-square">Envelope Square</option><option value="eraser">Eraser</option><option value="exchange">Exchange</option><option value="exclamation">Exclamation</option><option value="exclamation-circle">Exclamation Circle</option><option value="exclamation-triangle">Exclamation Triangle</option><option value="external-link">External Link</option><option value="external-link-square">External Link Square</option><option value="eye">Eye</option><option value="eye-slash">Eye Slash</option><option value="eyedropper">Eye Dropper</option><option value="fax">Fax</option><option value="female">Female</option><option value="fighter-jet">Fighter Jet</option><option value="file-archive-o">File Archive O</option><option value="file-audio-o">File Audio O</option><option value="file-code-o">File Code O</option><option value="file-excel-o">File Excel O</option><option value="file-image-o">File Image O</option><option value="file-movie-o">File Movie O</option><option value="pdf-o">Pdf O</option><option value="file-photo-o">File Photo O</option><option value="file-picture-o">File Picture O</option><option value="file-powerpoint-o">File Powerpoint O</option><option value="file-sound-o">File Sound O</option><option value="file-video-o">File Video O</option><option value="file-word-o">File Word O</option><option value="file-zip-o">File Zip O</option><option value="film">Film</option><option value="filter">Filter</option><option value="fire">Fire</option><option value="fire-extinguisher">Fire Extinguisher</option><option value="flag">Flag</option><option value="flag-checkered">Flag Checkered</option><option value="flag-o">Flag O</option><option value="flash">Flash</option><option value="flask">Flask</option><option value="folder">Folder</option><option value="folder-o">Folder O</option><option value="folder-open">Folder Open</option><option value="folder-open-o">Folder Open O</option><option value="frown-o">Frown O</option><option value="futbol-o">Futbol O</option><option value="gamepad">Game Pad</option><option value="gavel">Gavel</option><option value="gear">Gear</option><option value="gears">Gears</option><option value="genderless">Gender Less</option><option value="gift">Gift</option><option value="glass">Glass</option><option value="globe">Globe</option><option value="graduation-cap">Graduation Cap</option><option value="group">Group</option><option value="hdd-o">Hdd O</option><option value="headphones">Head Phones</option><option value="heart">Heart</option><option value="heart-o">Heart O</option><option value="heartbeat">Heartbeat</option><option value="history">History</option><option value="home">Home</option><option value="hotel">Hotel</option><option value="image">Image</option><option value="inbox">Inbox</option><option value="info">Info</option><option value="info-circle">Info Circle</option><option value="institution">Institution</option><option value="key">Key</option><option value="keyboard-o">Keyboard O</option><option value="language">Language</option><option value="laptop">Laptop</option><option value="leaf">Leaf</option><option value="legal">Legal</option><option value="lemon-o">Lemon O</option><option value="level-down">Level Down</option><option value="level-up">Level Up</option><option value="life-bouy">Life Bouy</option><option value="life-buoy">Life Buoy</option><option value="life-ring">Life Ring</option><option value="life-saver">Life Saver</option><option value="lightbulb-o">Light bulb O</option><option value="line-chart">Line Chart</option><option value="location-arrow">Location Arrow</option><option value="lock">Lock</option><option value="magic">Magic</option><option value="magnet">Magnet</option><option value="mail-forward">Mail Forward</option><option value="mail-reply">Mail Reply</option><option value="mail-reply-all">Mail Reply All</option><option value="male">Male</option><option value="map-marker">Map Marker</option><option value="meh-o">Meh O</option><option value="microphone">Microphone</option><option value="microphone-slash">Microphone Slash</option><option value="minus">Minus</option><option value="minus-circle">Minus Circle</option><option value="minus-square">Minus Square</option><option value="minus-square-o">Minus Square O</option><option value="mobile">Mobile</option><option value="mobile-phone">Mobile Phone</option><option value="money">Money</option><option value="moon-o">Moon O</option><option value="mortar-board">Mortar Board</option><option value="motorcycle">Motorcycle</option><option value="music">Music</option><option value="navicon">NavIcon</option><option value="newspaper-o">Newspaper O</option><option value="paint-brush">Paint Brush</option><option value="paper-plane">Paper Plane</option><option value="paper-plane-o">Paper Plane O</option><option value="paw">Paw</option><option value="pencil">Pencil</option><option value="pencil-square">Pencil Square</option><option value="pencil-square-o">Pencil Square O</option><option value="phone">Phone</option><option value="phone-square">Phone Square</option><option value="photo">Photo</option><option value="picture-o">Picture O</option><option value="pie-chart">Pie Chart</option><option value="plane">Plane</option><option value="plug">Plug</option><option value="plus">Plus</option><option value="plus-circle">Plus Circle</option><option value="plus-square">Plus Square</option><option value="plus-square-o">Plus Square O</option><option value="power-off">Power Off</option><option value="print">Print</option><option value="puzzle-piece">Puzzle Piece</option><option value="qrcode">QR Code</option><option value="question">Question</option><option value="question-circle">Question Circle</option><option value="quote-left">Quote Left</option><option value="quote-right">Quote Right</option><option value="random">Random</option><option value="recycle">Recycle</option><option value="refresh">Refresh</option><option value="remove">Remove</option><option value="reorder">Reorder</option><option value="reply">Reply</option><option value="reply-all">Reply All</option><option value="retweet">Re Tweet</option><option value="road">Road</option><option value="rocket">Rocket</option><option value="rss">RSS</option><option value="rss-square">RSS Square</option><option value="sear |