MUSA611-CPLN692-spring2019 · IanSchwarzenberg · Mar 29, 2019
diff --git a/Map_1/css/leaflet.css b/Map_1/css/leaflet.css
diff --git a/Map_1/css/main.css b/Map_1/css/main.css
@@ -0,0 +1,54 @@
+/* All taken from https://docs.mapbox.com/mapbox-gl-js/example/color-switcher/ */
+
+.map-overlay {
+font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+position: absolute;
+width: 200px;
+top: 0;
+left: 0;
+padding: 10px;
+}
+
+.map-overlay .map-overlay-inner {
+background-color: #fff;
+box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
+border-radius: 3px;
+padding: 10px;
+margin-bottom: 10px;
+}
+
+.map-overlay-inner fieldset {
+border: none;
+padding: 0;
+margin: 0 0 10px;
+}
+
+.map-overlay-inner fieldset:last-child {
+margin: 0;
+}
+
+.map-overlay-inner select {
+width: 100%;
+}
+
+.map-overlay-inner label {
+display: block;
+font-weight: bold;
+margin: 0 0 5px;
+}
+
+.map-overlay-inner button {
+display: inline-block;
+width: 36px;
+height: 20px;
+border: none;
+cursor: pointer;
+}
+
+.map-overlay-inner button:focus {
+outline: none;
+}
+
+.map-overlay-inner button:hover {
+box-shadow:inset 0 0 0 3px rgba(0, 0, 0, 0.10);
+}
diff --git a/Map_1/css/reset.css b/Map_1/css/reset.css
diff --git a/Map_1/css/style.css b/Map_1/css/style.css
@@ -0,0 +1,23 @@
+body {
+    padding: 0;
+    overflow: hidden;
+    font-family: helvetica, arial, sans-serif;
+}
+
+.map {
+    position: absolute;
+    right: 0px;
+    left: 340px;
+    height: 100%;
+    top: 0;
+}
+
+.sidebar {
+    position: absolute;
+    left: 0px;
+    width: 340px;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
+    padding: 20px;
+}
diff --git a/Map_1/index.html b/Map_1/index.html
@@ -0,0 +1,34 @@
+<!-- Mostly taken from https://docs.mapbox.com/mapbox-gl-js/example/color-switcher/ -->
+<!DOCTYPE html>
+<html> <!-- Beginning of section containing the html text -->
+<head>
+<meta charset='utf-8' />
+<title>Map 1 Ian Schwarzenberg</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>
+<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
+<style>
+body { margin:0; padding:0; }
+#map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+<link rel="stylesheet" href="css/main.css" /> <!-- Links to main.css style sheet, it is in the <head> </head> section for it to work -->
+</head>
+<body>
+  <div id='map'></div>
+  <div class='map-overlay top'>
+  <div class='map-overlay-inner'>
+  <fieldset>
+  <label>Select layer</label>
+  <select id='layer' name='layer'>
+  <option value='water'>Water</option>
+  <option value='building'>Buildings</option>
+  </select>
+  </fieldset>
+  <fieldset>
+  <label>Choose a color</label>
+  <div id='swatches'></div>
+  </fieldset>
+  </div>
+  </div>
+  <script src="js/main.js"></script> <!-- Links to main.js style sheet, it is at the bottom of the <html> </html> section for it to work -->
+  </html>
diff --git a/Map_1/js/main.js b/Map_1/js/main.js
@@ -0,0 +1,72 @@
+//SETS UP MAP:
+mapboxgl.accessToken = 'pk.eyJ1IjoiaWFuc2Nod2FyemVuYmVyZyIsImEiOiJjanRrZjRvdHkxYW00M3lwZjE5anBoZHpsIn0.1-8tMneyRvUnNTmajpzgEA'; //My Mapbox access token
+var map = new mapboxgl.Map({
+container: 'map',
+style: 'mapbox://styles/mapbox/light-v10',
+center: [-75.163623, 39.952297], //Changes center to Philadelphia
+zoom: 12 //Zooms to Philadelphia area
+});
+
+
+
+
+
+//SETS UP COLOR CHOOSING (taken from https://docs.mapbox.com/mapbox-gl-js/example/color-switcher/):
+var swatches = document.getElementById('swatches');
+var layer = document.getElementById('layer');
+var colors = [
+'#fde0dd',
+'#fa9fb5',
+'#c51b8a',
+'#e5f5e0',
+'#a1d99b'
+];
+
+colors.forEach(function(color) {
+var swatch = document.createElement('button');
+swatch.style.backgroundColor = color;
+swatch.addEventListener('click', function() {
+map.setPaintProperty(layer.value, 'fill-color', color);
+});
+swatches.appendChild(swatch);
+});
+
+
+
+//CREATES HOSPITAL ICON WHERE PENN HOSPITAL IS (Found out how to do from https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/):
+map.on('load', function() { //This whole function first retrieves a red cross image, then places it on Penn Hospital to mark how that is a hospital. Found out how to do from https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/
+map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_the_Red_Cross.svg/1280px-Flag_of_the_Red_Cross.svg.png', function(error, image) {
+if (error) throw error;
+map.addImage('hospitalIcon', image);
+map.addLayer({
+"id": "points",
+"type": "symbol",
+"source": {
+"type": "geojson",
+"data": {
+"type": "FeatureCollection",
+"features": [{
+"type": "Feature",
+"geometry": {
+"type": "Point",
+"coordinates": [-75.193438,39.950126] //Coordinates of Penn Hospital
+}
+}]
+}
+},
+"layout": {
+"icon-image": "hospitalIcon",
+"icon-size": 0.05
+}
+});
+});
+});
+
+
+
+
+// ADDS POPUP TO HOSPITAL ICON (found out how to do from https://docs.mapbox.com/mapbox-gl-js/example/popup/):
+var popup = new mapboxgl.Popup({closeOnClick: false}) //"closeOnClick: false" makes it so the popup can close
+.setLngLat([-75.193438,39.950126]) //Sets it to the same coordinates as the icon
+.setHTML('<h3>Penn Hospital</h3>') //h1 is biggest text and h4 is smallest text I think, so making it h3 controls the text size
+.addTo(map); //Adds popup to map