229 lines
5.0 KiB
HTML
229 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>RLX Camera Coverage</title>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY=" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js" integrity="sha512-zInFF17qBFVvvvFpIfeBzo7Tj7+rQxLeTJDmbxjBz5/zIr89YVbTNelNhdTT+/DCrxoVzBeUPVFJsczKbB7sew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="box">
|
|
|
|
<div id="map">
|
|
</div>
|
|
</div>
|
|
<div id = "slider-2"></div>
|
|
<div class="box2">
|
|
<div id="changelog">
|
|
</div>
|
|
|
|
</div>
|
|
<style type="text/css">
|
|
//#mapid { height: 800px; }
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%
|
|
|
|
}
|
|
#mapid {
|
|
height: 100%;
|
|
background: none !important;
|
|
|
|
}
|
|
#bottombar {
|
|
// height: 98%;
|
|
}
|
|
|
|
.box{
|
|
position: absolute;
|
|
top: 225px;
|
|
z-index: 9999;
|
|
text-align: center;
|
|
width: 250px;
|
|
left: 10%;
|
|
margin-left: -75px; /* half of the width */
|
|
}
|
|
|
|
|
|
|
|
|
|
.box2{
|
|
position: absolute;
|
|
top: 500px;
|
|
z-index: 9999;
|
|
text-align: center;
|
|
width: 250px;
|
|
left: 10%;
|
|
margin-left: -75px; /* half of the width */
|
|
}
|
|
|
|
|
|
|
|
input[type=number] {
|
|
|
|
|
|
width: 50px;
|
|
}
|
|
|
|
input[type=text] {
|
|
|
|
|
|
width: 150px;
|
|
}
|
|
.legend {
|
|
line-height: 18px;
|
|
color: #555;
|
|
}
|
|
.legend i {
|
|
width: 15px;
|
|
height: 15px;
|
|
float: left;
|
|
margin-right: 8px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.info {
|
|
padding: 6px 8px;
|
|
font: 14px/16px Arial, Helvetica, sans-serif;
|
|
background: white;
|
|
background: rgba(255,255,255,0.8);
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
|
border-radius: 5px;
|
|
}
|
|
.info h4 {
|
|
margin: 0 0 5px;
|
|
color: #777;
|
|
}
|
|
|
|
#slider-2 {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 200px;
|
|
width:300px;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<div id="mapid">
|
|
</div>
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var mymap = L.map('mapid', {zoomDelta: 0.25, zoomSnap: 0}).setView([38.508, -81.652480], 8.0);
|
|
|
|
|
|
|
|
var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'Tiles © Esri'
|
|
});
|
|
|
|
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
|
|
});
|
|
|
|
var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
|
|
});
|
|
var USGS_USImageryTopo = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}', {
|
|
maxZoom: 20,
|
|
attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>'
|
|
});
|
|
|
|
var TopPlusOpen_Grey = L.tileLayer('http://sgx.geodatenzentrum.de/wmts_topplus_open/tile/1.0.0/web_grau/default/WEBMERCATOR/{z}/{y}/{x}.png', {
|
|
maxZoom: 18,
|
|
attribution: 'Map data: © <a href="http://www.govdata.de/dl-de/by-2-0">dl-de/by-2-0</a>'
|
|
});
|
|
|
|
|
|
var baselayers = {
|
|
"Esri Street Map": Esri_WorldStreetMap,
|
|
"Esri Satellite": Esri_WorldImagery,
|
|
"Esri Topo": Esri_WorldTopoMap,
|
|
"Dense": TopPlusOpen_Grey,
|
|
"USGS Sat/Topo": USGS_USImageryTopo
|
|
}
|
|
L.control.layers(baselayers,null,{collapsed: false}).addTo(mymap);
|
|
|
|
Esri_WorldStreetMap.addTo(mymap);
|
|
|
|
|
|
|
|
var geoJSONcounties = L.geoJSON(false, {
|
|
style: function (feature) {
|
|
return {
|
|
weight: 3,
|
|
opacity: 1,
|
|
color: 'black',
|
|
fillColor: 'navy',
|
|
fillOpacity: 0
|
|
};
|
|
},
|
|
}).addTo(mymap);
|
|
|
|
|
|
$.getJSON('counties.json', function(data) {
|
|
var geojsonFeature = data;
|
|
geoJSONcounties.addData(geojsonFeature);
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var geoJSONcircle = L.geoJSON(false, {
|
|
style: function (feature) {
|
|
return {
|
|
weight: 3,
|
|
opacity: 1,
|
|
color: 'black',
|
|
fillColor: 'navy',
|
|
fillOpacity: .5
|
|
};
|
|
},
|
|
}).addTo(mymap);
|
|
|
|
|
|
$.getJSON('main.php?service=camcircle', function(data) {
|
|
var geojsonFeature = data;
|
|
geoJSONcircle.addData(geojsonFeature);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|