MUSA611-CPLN692-spring2019 · Yixuanhu0106 · Mar 29, 2019
diff --git a/agora.html b/agora.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8' />
+  <title>Agora</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
+  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
+  <link rel="stylesheet" href="src/style.css" />
+</head>
+
+<body>
+
+  <div id='map'></div>
+
+  <div class='map-overlay top'>
+    <div class='map-overlay-inner'>
+      <label>Layer opacity: <span id='slider-value'>100%</span></label>
+      <input id='slider' type='range' min='0' max='100' step='0' value='100' />
+    </div>
+  </div>
+
+  <script src="src/main.js"></script>
+</body>
+
+</html>
diff --git a/georeferencing-agora.qgz b/georeferencing-agora.qgz
diff --git a/src/Agora-roman.png b/src/Agora-roman.png
diff --git a/src/Agora-roman.png.aux.xml b/src/Agora-roman.png.aux.xml
@@ -0,0 +1,29 @@
+<PAMDataset>
+  <Metadata domain="IMAGE_STRUCTURE">
+    <MDI key="INTERLEAVE">PIXEL</MDI>
+  </Metadata>
+  <PAMRasterBand band="1">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">226.63759512938</MDI>
+      <MDI key="STATISTICS_MINIMUM">35</MDI>
+      <MDI key="STATISTICS_STDDEV">55.388506694725</MDI>
+    </Metadata>
+  </PAMRasterBand>
+  <PAMRasterBand band="2">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">225.2562658549</MDI>
+      <MDI key="STATISTICS_MINIMUM">31</MDI>
+      <MDI key="STATISTICS_STDDEV">56.101138376162</MDI>
+    </Metadata>
+  </PAMRasterBand>
+  <PAMRasterBand band="3">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">224.82993404363</MDI>
+      <MDI key="STATISTICS_MINIMUM">32</MDI>
+      <MDI key="STATISTICS_STDDEV">55.804250331803</MDI>
+    </Metadata>
+  </PAMRasterBand>
+</PAMDataset>
diff --git a/src/Agora-roman.png.points b/src/Agora-roman.png.points
@@ -0,0 +1,6 @@
+mapX,mapY,pixelX,pixelY,enable
+2640821.00779545400291681,4575938.32804161310195923,378.37064613870762741,-308.23729475321005111,1
+2640786.95151049690321088,4575978.68044647853821516,327.6003961220550309,-231.50234718128746181,1
+2640718.26656604511663318,4575887.38670781161636114,244.85086344265241109,-358.68115915164463559,1
+2640949.79206630028784275,4575987.55225180368870497,554.74508649705990138,-219.83966136741190667,1
+2640954.95028864033520222,4575844.81946693453937769,560.95071990635346992,-413.12789332552944188,1
diff --git a/src/Agora-roman_modified.tif b/src/Agora-roman_modified.tif
diff --git a/src/Agora-roman_modified.tif.aux.xml b/src/Agora-roman_modified.tif.aux.xml
@@ -0,0 +1,26 @@
+<PAMDataset>
+  <PAMRasterBand band="1">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">200.92310826542</MDI>
+      <MDI key="STATISTICS_MINIMUM">0</MDI>
+      <MDI key="STATISTICS_STDDEV">88.114671696715</MDI>
+    </Metadata>
+  </PAMRasterBand>
+  <PAMRasterBand band="2">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">199.82875436554</MDI>
+      <MDI key="STATISTICS_MINIMUM">0</MDI>
+      <MDI key="STATISTICS_STDDEV">88.234973820385</MDI>
+    </Metadata>
+  </PAMRasterBand>
+  <PAMRasterBand band="3">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">199.56594877765</MDI>
+      <MDI key="STATISTICS_MINIMUM">0</MDI>
+      <MDI key="STATISTICS_STDDEV">87.963725220118</MDI>
+    </Metadata>
+  </PAMRasterBand>
+</PAMDataset>
diff --git a/src/Agora-roman_modified2.tif b/src/Agora-roman_modified2.tif
diff --git a/src/Agora-roman_modified2.tif.aux.xml b/src/Agora-roman_modified2.tif.aux.xml
@@ -0,0 +1,26 @@
+<PAMDataset>
+  <PAMRasterBand band="1">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">214.67183754993</MDI>
+      <MDI key="STATISTICS_MINIMUM">0</MDI>
+      <MDI key="STATISTICS_STDDEV">73.130300000169</MDI>
+    </Metadata>
+  </PAMRasterBand>
+  <PAMRasterBand band="2">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">213.36880825566</MDI>
+      <MDI key="STATISTICS_MINIMUM">0</MDI>
+      <MDI key="STATISTICS_STDDEV">73.475725624883</MDI>
+    </Metadata>
+  </PAMRasterBand>
+  <PAMRasterBand band="3">
+    <Metadata>
+      <MDI key="STATISTICS_MAXIMUM">255</MDI>
+      <MDI key="STATISTICS_MEAN">213.04284287617</MDI>
+      <MDI key="STATISTICS_MINIMUM">0</MDI>
+      <MDI key="STATISTICS_STDDEV">73.121197446563</MDI>
+    </Metadata>
+  </PAMRasterBand>
+</PAMDataset>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,40 @@
+mapboxgl.accessToken = 'pk.eyJ1IjoiZW1pbHlodSIsImEiOiJjanRraXBjYjAwMDZiNDRxbHg3cDlwbHA5In0.Z8oZamlBpJF4Sv58aC1c_A';
+var map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/streets-v11',
+  center: [23.7220485, 37.975264],
+  minZoom: 9.5,
+  maxZoom: 22,
+  zoom: 16
+});
+
+var slider = document.getElementById('slider');
+var sliderValue = document.getElementById('slider-value');
+
+map.on('load', function() {
+
+  map.addLayer({
+    "id": "agora",
+    "source": {
+      "type": "raster",
+      "url": "mapbox://emilyhu.7w3gxksb"
+    },
+    "type": "raster"
+  });
+
+  slider.addEventListener('input', function(e) {
+    // Adjust the layers opacity. layer here is arbitrary - this could
+    // be another layer name found in your style or a custom layer
+    // added on the fly using `addSource`.
+    map.setPaintProperty('agora', 'raster-opacity', parseInt(e.target.value, 10) / 100);
+
+    // Value indicator
+    sliderValue.textContent = e.target.value + '%';
+  });
+});
+var popup = new mapboxgl.Popup({
+    closeOnClick: false
+  })
+  .setLngLat([23.719, 37.9748834])
+  .setHTML('<h3>Welcome to Agora!</h3><h4>Public place with civic and religious institutions <br> from Archaic Period to Roman Period</h4>')
+  .addTo(map);
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,42 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.map-overlay {
+  font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  position: absolute;
+  width: 25%;
+  top: 0;
+  left: 0;
+  padding: 10px;
+}
+
+.map-overlay .map-overlay-inner {
+  background-color: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
+  border-radius: 3px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.map-overlay label {
+  display: block;
+  margin: 0 0 10px;
+}
+
+.map-overlay input {
+  background-color: transparent;
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  margin: 0;
+  cursor: ew-resize;
+}