MUSA611-CPLN692-spring2019 · smullarkUPENN · Mar 29, 2019
diff --git a/Map Urls.txt b/Map Urls.txt
@@ -0,0 +1,3 @@
+https://smullarkupenn.github.io/Week9-Map1/
+
+https://smullarkupenn.github.io/Week9-Map2/
diff --git a/Map1/css/style.css b/Map1/css/style.css
@@ -0,0 +1,61 @@
+.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: BLUE;
+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);
+}
+
+.marker {
+  background-image: url('mapbox-icon.png');
+  background-size: cover;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+}
diff --git a/Map1/index.html b/Map1/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<title>Change a layer's color with buttons</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' />
+<link rel="stylesheet" href="css/style.css" />
+
+<style>
+body { margin:0; padding:0; }
+#map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+</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>
+
+
+</body>
+
+<script src="js/main.js"></script>
+</html>
diff --git a/Map1/js/main.js b/Map1/js/main.js
@@ -0,0 +1,62 @@
+//Worked with Ian Schwarzenberg
+mapboxgl.accessToken = 'pk.eyJ1Ijoic211bGxhcmt1cGVubiIsImEiOiJjanR0OTZsbXoxMTI2M3lwZTN4cGg1ZGYzIn0.Ma0o0JLjqkxcYq2Mr55G4Q';
+var map = new mapboxgl.Map({
+container: 'map',
+style: 'mapbox://styles/mapbox/light-v10',
+center: [-74.1707307,40.73316],
+zoom: 17.4
+});
+
+map.on('load', function() {
+map.loadImage('https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/New_Jersey_Devils_logo.svg/1920px-New_Jersey_Devils_logo.svg.png', function(error, image) {
+if (error) throw error;
+map.addImage('NJ Devil', image);
+map.addLayer({
+"id": "points",
+"type": "symbol",
+"source": {
+"type": "geojson",
+"data": {
+"type": "FeatureCollection",
+"features": [{
+"type": "Feature",
+"geometry": {
+"type": "Point",
+"coordinates": [-74.1707307,40.73316]
+}
+}]
+}
+},
+"layout": {
+"icon-image": "NJ Devil",
+"icon-size": 0.25
+}
+});
+});
+});
+
+
+
+var swatches = document.getElementById('swatches');
+var layer = document.getElementById('layer');
+var colors = [
+'RED',
+'ORANGE',
+'YELLOW',
+'GREEN',
+'BLUE',
+'PURPLE',
+'BROWN',
+'GRAY',
+'BLACK',
+'WHITE'
+];
+
+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);
+});
diff --git a/Map2/css/style.css b/Map2/css/style.css
@@ -0,0 +1,51 @@
+body {
+    padding: 0;
+    overflow: hidden;
+    font-family: colfax, helvetica, arial, sans-serif;
+}
+
+p.main {
+  font-size: 24px;
+}
+
+.map {
+    position: absolute;
+    right: 0px;
+    left: 400px;
+    height: 100%;
+    top: 0;
+}
+
+.sidebar {
+    position: absolute;
+    left: 0px;
+    width: 400px;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
+    padding: 20px;
+    font-size: 16px;
+}
+
+.legend {
+    line-height: 18px;
+    color: black;
+}
+.legend i {
+    width: 18px;
+    height: 18px;
+    float: left;
+    margin-right: 8px;
+    opacity: 0.8;
+}
+.legend1 {
+    line-height: 18px;
+    color: black;
+}
+.legend1 i {
+    width: 18px;
+    height: 18px;
+    float: left;
+    margin-right: 8px;
+    opacity: 0.8;
+}
diff --git a/Map2/index.html b/Map2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<title>Add a GeoJSON polygon</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' />
+<link rel="stylesheet" href="css/style.css" />
+
+
+
+
+<style>
+body { margin:0; padding:0; }
+#map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+</head>
+<body>
+
+<div id='map'></div>
+<script>
+
+</script>
+
+</body>
+<script src="js/main.js"></script>
+</html>
diff --git a/Map2/js/main.js b/Map2/js/main.js
@@ -0,0 +1,34 @@
+mapboxgl.accessToken = 'pk.eyJ1Ijoic211bGxhcmt1cGVubiIsImEiOiJjanR0OTZsbXoxMTI2M3lwZTN4cGg1ZGYzIn0.Ma0o0JLjqkxcYq2Mr55G4Q';
+var map = new mapboxgl.Map({
+container: 'map',
+style: 'mapbox://styles/mapbox/streets-v11',
+center: [-73.9001047,40.561454],
+zoom: 12
+});
+
+map.on('load', function () {
+
+map.addLayer({
+'id': 'BreezyPoint',
+'type': 'fill',
+'source': {
+'type': 'geojson',
+'data': {
+'type': 'Feature',
+'geometry': {
+'type': 'Polygon',
+'coordinates':
+[[[-73.94117634981626, 40.54270587057088],[-73.88555806368345, 40.55972732818516],
+  [-73.88272565096372, 40.568855829046],[-73.89311116426938, 40.569247022689765],[-73.92641347139829, 40.562466009165725],
+  [-73.94263547152036, 40.55451048301903],[-73.94117634981626, 40.54270587057088]]]
+
+}
+}
+},
+'layout': {},
+'paint': {
+'fill-color': 'green',
+'fill-opacity': 0.8
+}
+});
+});
diff --git a/stateData.geojson b/stateData.geojson
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		https://smullarkupenn.github.io/Week9-Map1/

		https://smullarkupenn.github.io/Week9-Map2/