Skip to content

Instantly share code, notes, and snippets.

@remmi11

remmi11/database.html

Created December 30, 2015 22:23
Show Gist options
  • Save remmi11/d235e8446a53bc483ae4 to your computer and use it in GitHub Desktop.
Save remmi11/d235e8446a53bc483ae4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
database.html
<!DOCTYPE html>
<html>
<head>
<title>Furman Database</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Load Leaflet from CDN-->
<link href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Esri Leaflet Core -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet-core.js"></script>
<!-- Esri Leaflet Geocoder -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.3/esri-leaflet-geocoder.js"></script>
<link href="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.3/esri-leaflet-geocoder.css" rel="stylesheet" type="text/css">
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">
<link href="css/leaflet.awesome-markers.css" rel="stylesheet">
<script src="js/leaflet.awesome-markers.js"></script>
<link href="css/MarkerCluster.css" rel="stylesheet">
<link href="css/MarkerCluster.Default.css" rel="stylesheet">
<script src="js/leaflet.markercluster-src.js"></script>
<script src="js/records.js"></script>
<link rel="stylesheet" href="css/easyPrint.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jQuery.print.js"></script>
<script src="js/leaflet.easyPrint.js"></script>
<style>
html,
body,
#map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* css to customize Leaflet default styles */
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
background: #373737;
color: #ffffff;
background-image: linear-gradient(#333 0%, #333 40%, #666 40%, #666 100%);
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px;
border-radius: 6px 6px 6px 6px;
}
here {
font-size: 16px;
color: #ffffff;
font-style: oblique;
text-decoration: underline;
}
job {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
list {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 20px;
color: #ffffff;
}
items {
line-height: 20px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Creates a red marker with the coffee icon
var redMarker = L.AwesomeMarkers.icon({
prefix: 'fa', //font awesome rather than bootstrap
markerColor: 'red', // see colors above
icon: 'facebook-f' //http://fortawesome.github.io/Font-Awesome/icons/
});
var markers = L.markerClusterGroup({
chunkedLoading: true
});
// specify popup options
var customOptions = {
'maxWidth': '500',
'className': 'custom'
}
for (var i = 0; i < jobs.length; i++) {
var a = jobs[i];
var jobNumber = a[0];
var apNumber = a[1];
var address = a[2];
var webPath = a[3];
var sharedDrive = '/dc01/shared/ir2008';
var popupContent = (
'<job>' + jobNumber + '<\/job>' + '<\/br>' + address + '<\/br>' + '<\/br>' + '<list>To View Files:<\/list>' +
"<\/br><items>1) Right Click " + '<a href="file:////' + sharedDrive + webPath + '"><here>here<\/here><\/a><\/br>' +
"2) Copy Link Address <\/br> 3) Paste in New Tab<\/items>"
);
var marker = L.marker(L.latLng(a[4], a[5]), {
icon: redMarker
});
marker.bindPopup(popupContent, customOptions);
markers.addLayer(marker);
}
var projects = L.layerGroup([markers]);
// Replace with server ip when moved
var serverURL = 'http://192.168.1.155/'
//Add ap layer
var apmap = serverURL + 'tiles/ap/{z}/{x}/{y}.png',
aptilesLayer = new L.TileLayer(apmap);
// Add subdivision layer
var subdivisions = serverURL + 'tiles/subs/{z}/{x}/{y}.png',
substilesLayer = new L.TileLayer(subdivisions);
// Add floods layer
var floods = serverURL + 'tiles/floods/{z}/{x}/{y}.png',
floodsLayer = new L.TileLayer(floods);
googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
maxZoom: 19,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 19,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var baseMaps = {
"Imagery": googleHybrid,
"Streets": googleStreets
};
var map = L.map('map', {
center: [35.2186, -101.7883],
zoom: 8,
maxZoom: 19,
layers: [googleStreets, projects]
});
// Toggle Layers Available
var overlayMaps = {
"Projects": projects,
"Subdivisions": substilesLayer,
"AP MAP": aptilesLayer,
"Floodplain": floodsLayer
};
// add print contol to the map
L.easyPrint().addTo(map)
// add layer contols
L.control.layers(baseMaps, overlayMaps).addTo(map);
// create the geocoding control and add it to the map
var searchControl = new L.esri.Controls.Geosearch().addTo(map);
// create an empty layer group to store the results and add it to the map
var results = new L.LayerGroup().addTo(map);
// listen for the results event and add every result to the map
searchControl.on("results", function(data){
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
};
});
map.addLayer(markers);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment