From 68779a2c3a2687dffc03622d99f1df6c128c7448 Mon Sep 17 00:00:00 2001 From: Ian Schwarzenberg <46827736+IanSchwarzenberg@users.noreply.github.com> Date: Thu, 28 Mar 2019 23:19:32 -0400 Subject: [PATCH] Add files via upload --- Map_1/css/leaflet.css | 479 ++++++++++++++++++++++++++++++++++++++++++ Map_1/css/main.css | 54 +++++ Map_1/css/reset.css | 9 + Map_1/css/style.css | 23 ++ Map_1/index.html | 34 +++ Map_1/js/main.js | 72 +++++++ Map_2/css/leaflet.css | 479 ++++++++++++++++++++++++++++++++++++++++++ Map_2/css/main.css | 18 ++ Map_2/css/reset.css | 9 + Map_2/css/style.css | 23 ++ Map_2/index.html | 25 +++ Map_2/js/main.js | 174 +++++++++++++++ 12 files changed, 1399 insertions(+) create mode 100644 Map_1/css/leaflet.css create mode 100644 Map_1/css/main.css create mode 100644 Map_1/css/reset.css create mode 100644 Map_1/css/style.css create mode 100644 Map_1/index.html create mode 100644 Map_1/js/main.js create mode 100644 Map_2/css/leaflet.css create mode 100644 Map_2/css/main.css create mode 100644 Map_2/css/reset.css create mode 100644 Map_2/css/style.css create mode 100644 Map_2/index.html create mode 100644 Map_2/js/main.js diff --git a/Map_1/css/leaflet.css b/Map_1/css/leaflet.css new file mode 100644 index 0000000..c161c31 --- /dev/null +++ b/Map_1/css/leaflet.css @@ -0,0 +1,479 @@ +/* required styles */ + +.leaflet-map-pane, +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow, +.leaflet-tile-pane, +.leaflet-tile-container, +.leaflet-overlay-pane, +.leaflet-shadow-pane, +.leaflet-marker-pane, +.leaflet-popup-pane, +.leaflet-overlay-pane svg, +.leaflet-zoom-box, +.leaflet-image-layer, +.leaflet-layer { + position: absolute; + left: 0; + top: 0; + } +.leaflet-container { + overflow: hidden; + -ms-touch-action: none; + touch-action: none; + } +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + -webkit-user-drag: none; + } +.leaflet-marker-icon, +.leaflet-marker-shadow { + display: block; + } +/* map is broken in FF if you have max-width: 100% on tiles */ +.leaflet-container img { + max-width: none !important; + } +/* stupid Android 2 doesn't understand "max-width: none" properly */ +.leaflet-container img.leaflet-image-layer { + max-width: 15000px !important; + } +.leaflet-tile { + filter: inherit; + visibility: hidden; + } +.leaflet-tile-loaded { + visibility: inherit; + } +.leaflet-zoom-box { + width: 0; + height: 0; + } +/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ +.leaflet-overlay-pane svg { + -moz-user-select: none; + } + +.leaflet-tile-pane { z-index: 2; } +.leaflet-objects-pane { z-index: 3; } +.leaflet-overlay-pane { z-index: 4; } +.leaflet-shadow-pane { z-index: 5; } +.leaflet-marker-pane { z-index: 6; } +.leaflet-popup-pane { z-index: 7; } + +.leaflet-vml-shape { + width: 1px; + height: 1px; + } +.lvml { + behavior: url(#default#VML); + display: inline-block; + position: absolute; + } + + +/* control positioning */ + +.leaflet-control { + position: relative; + z-index: 7; + pointer-events: auto; + } +.leaflet-top, +.leaflet-bottom { + position: absolute; + z-index: 1000; + pointer-events: none; + } +.leaflet-top { + top: 0; + } +.leaflet-right { + right: 0; + } +.leaflet-bottom { + bottom: 0; + } +.leaflet-left { + left: 0; + } +.leaflet-control { + float: left; + clear: both; + } +.leaflet-right .leaflet-control { + float: right; + } +.leaflet-top .leaflet-control { + margin-top: 10px; + } +.leaflet-bottom .leaflet-control { + margin-bottom: 10px; + } +.leaflet-left .leaflet-control { + margin-left: 10px; + } +.leaflet-right .leaflet-control { + margin-right: 10px; + } + + +/* zoom and fade animations */ + +.leaflet-fade-anim .leaflet-tile, +.leaflet-fade-anim .leaflet-popup { + opacity: 0; + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + -o-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; + } +.leaflet-fade-anim .leaflet-tile-loaded, +.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { + opacity: 1; + } + +.leaflet-zoom-anim .leaflet-zoom-animated { + -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); + -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); + -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1); + transition: transform 0.25s cubic-bezier(0,0,0.25,1); + } +.leaflet-zoom-anim .leaflet-tile, +.leaflet-pan-anim .leaflet-tile, +.leaflet-touching .leaflet-zoom-animated { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + +.leaflet-zoom-anim .leaflet-zoom-hide { + visibility: hidden; + } + + +/* cursors */ + +.leaflet-clickable { + cursor: pointer; + } +.leaflet-container { + cursor: -webkit-grab; + cursor: -moz-grab; + } +.leaflet-popup-pane, +.leaflet-control { + cursor: auto; + } +.leaflet-dragging .leaflet-container, +.leaflet-dragging .leaflet-clickable { + cursor: move; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + } + + +/* visual tweaks */ + +.leaflet-container { + background: #ddd; + outline: 0; + } +.leaflet-container a { + color: #0078A8; + } +.leaflet-container a.leaflet-active { + outline: 2px solid orange; + } +.leaflet-zoom-box { + border: 2px dotted #38f; + background: rgba(255,255,255,0.5); + } + + +/* general typography */ +.leaflet-container { + font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; + } + + +/* general toolbar styles */ + +.leaflet-bar { + box-shadow: 0 1px 5px rgba(0,0,0,0.65); + border-radius: 4px; + } +.leaflet-bar a, +.leaflet-bar a:hover { + background-color: #fff; + border-bottom: 1px solid #ccc; + width: 26px; + height: 26px; + line-height: 26px; + display: block; + text-align: center; + text-decoration: none; + color: black; + } +.leaflet-bar a, +.leaflet-control-layers-toggle { + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; + } +.leaflet-bar a:hover { + background-color: #f4f4f4; + } +.leaflet-bar a:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } +.leaflet-bar a:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom: none; + } +.leaflet-bar a.leaflet-disabled { + cursor: default; + background-color: #f4f4f4; + color: #bbb; + } + +.leaflet-touch .leaflet-bar a { + width: 30px; + height: 30px; + line-height: 30px; + } + + +/* zoom control */ + +.leaflet-control-zoom-in, +.leaflet-control-zoom-out { + font: bold 18px 'Lucida Console', Monaco, monospace; + text-indent: 1px; + } +.leaflet-control-zoom-out { + font-size: 20px; + } + +.leaflet-touch .leaflet-control-zoom-in { + font-size: 22px; + } +.leaflet-touch .leaflet-control-zoom-out { + font-size: 24px; + } + + +/* layers control */ + +.leaflet-control-layers { + box-shadow: 0 1px 5px rgba(0,0,0,0.4); + background: #fff; + border-radius: 5px; + } +.leaflet-control-layers-toggle { + background-image: url(images/layers.png); + width: 36px; + height: 36px; + } +.leaflet-retina .leaflet-control-layers-toggle { + background-image: url(images/layers-2x.png); + background-size: 26px 26px; + } +.leaflet-touch .leaflet-control-layers-toggle { + width: 44px; + height: 44px; + } +.leaflet-control-layers .leaflet-control-layers-list, +.leaflet-control-layers-expanded .leaflet-control-layers-toggle { + display: none; + } +.leaflet-control-layers-expanded .leaflet-control-layers-list { + display: block; + position: relative; + } +.leaflet-control-layers-expanded { + padding: 6px 10px 6px 6px; + color: #333; + background: #fff; + } +.leaflet-control-layers-selector { + margin-top: 2px; + position: relative; + top: 1px; + } +.leaflet-control-layers label { + display: block; + } +.leaflet-control-layers-separator { + height: 0; + border-top: 1px solid #ddd; + margin: 5px -10px 5px -6px; + } + + +/* attribution and scale controls */ + +.leaflet-container .leaflet-control-attribution { + background: #fff; + background: rgba(255, 255, 255, 0.7); + margin: 0; + } +.leaflet-control-attribution, +.leaflet-control-scale-line { + padding: 0 5px; + color: #333; + } +.leaflet-control-attribution a { + text-decoration: none; + } +.leaflet-control-attribution a:hover { + text-decoration: underline; + } +.leaflet-container .leaflet-control-attribution, +.leaflet-container .leaflet-control-scale { + font-size: 11px; + } +.leaflet-left .leaflet-control-scale { + margin-left: 5px; + } +.leaflet-bottom .leaflet-control-scale { + margin-bottom: 5px; + } +.leaflet-control-scale-line { + border: 2px solid #777; + border-top: none; + line-height: 1.1; + padding: 2px 5px 1px; + font-size: 11px; + white-space: nowrap; + overflow: hidden; + -moz-box-sizing: content-box; + box-sizing: content-box; + + background: #fff; + background: rgba(255, 255, 255, 0.5); + } +.leaflet-control-scale-line:not(:first-child) { + border-top: 2px solid #777; + border-bottom: none; + margin-top: -2px; + } +.leaflet-control-scale-line:not(:first-child):not(:last-child) { + border-bottom: 2px solid #777; + } + +.leaflet-touch .leaflet-control-attribution, +.leaflet-touch .leaflet-control-layers, +.leaflet-touch .leaflet-bar { + box-shadow: none; + } +.leaflet-touch .leaflet-control-layers, +.leaflet-touch .leaflet-bar { + border: 2px solid rgba(0,0,0,0.2); + background-clip: padding-box; + } + + +/* popup */ + +.leaflet-popup { + position: absolute; + text-align: center; + } +.leaflet-popup-content-wrapper { + padding: 1px; + text-align: left; + border-radius: 12px; + } +.leaflet-popup-content { + margin: 13px 19px; + line-height: 1.4; + } +.leaflet-popup-content p { + margin: 18px 0; + } +.leaflet-popup-tip-container { + margin: 0 auto; + width: 40px; + height: 20px; + position: relative; + overflow: hidden; + } +.leaflet-popup-tip { + width: 17px; + height: 17px; + padding: 1px; + + margin: -10px auto 0; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + } +.leaflet-popup-content-wrapper, +.leaflet-popup-tip { + background: white; + + box-shadow: 0 3px 14px rgba(0,0,0,0.4); + } +.leaflet-container a.leaflet-popup-close-button { + position: absolute; + top: 0; + right: 0; + padding: 4px 4px 0 0; + text-align: center; + width: 18px; + height: 14px; + font: 16px/14px Tahoma, Verdana, sans-serif; + color: #c3c3c3; + text-decoration: none; + font-weight: bold; + background: transparent; + } +.leaflet-container a.leaflet-popup-close-button:hover { + color: #999; + } +.leaflet-popup-scrolled { + overflow: auto; + border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; + } + +.leaflet-oldie .leaflet-popup-content-wrapper { + zoom: 1; + } +.leaflet-oldie .leaflet-popup-tip { + width: 24px; + margin: 0 auto; + + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; + filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); + } +.leaflet-oldie .leaflet-popup-tip-container { + margin-top: -1px; + } + +.leaflet-oldie .leaflet-control-zoom, +.leaflet-oldie .leaflet-control-layers, +.leaflet-oldie .leaflet-popup-content-wrapper, +.leaflet-oldie .leaflet-popup-tip { + border: 1px solid #999; + } + + +/* div icon */ + +.leaflet-div-icon { + background: #fff; + border: 1px solid #666; + } diff --git a/Map_1/css/main.css b/Map_1/css/main.css new file mode 100644 index 0000000..6ba37bc --- /dev/null +++ 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 new file mode 100644 index 0000000..f9b2386 --- /dev/null +++ b/Map_1/css/reset.css @@ -0,0 +1,9 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} + +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} diff --git a/Map_1/css/style.css b/Map_1/css/style.css new file mode 100644 index 0000000..e290bbe --- /dev/null +++ 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 new file mode 100644 index 0000000..e3c0355 --- /dev/null +++ b/Map_1/index.html @@ -0,0 +1,34 @@ + + + + + +Map 1 Ian Schwarzenberg + + + + + + + +
+
+
+
+ + +
+
+ +
+
+
+
+ + diff --git a/Map_1/js/main.js b/Map_1/js/main.js new file mode 100644 index 0000000..4fea5e5 --- /dev/null +++ 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('

Penn Hospital

') //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 diff --git a/Map_2/css/leaflet.css b/Map_2/css/leaflet.css new file mode 100644 index 0000000..c161c31 --- /dev/null +++ b/Map_2/css/leaflet.css @@ -0,0 +1,479 @@ +/* required styles */ + +.leaflet-map-pane, +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow, +.leaflet-tile-pane, +.leaflet-tile-container, +.leaflet-overlay-pane, +.leaflet-shadow-pane, +.leaflet-marker-pane, +.leaflet-popup-pane, +.leaflet-overlay-pane svg, +.leaflet-zoom-box, +.leaflet-image-layer, +.leaflet-layer { + position: absolute; + left: 0; + top: 0; + } +.leaflet-container { + overflow: hidden; + -ms-touch-action: none; + touch-action: none; + } +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + -webkit-user-drag: none; + } +.leaflet-marker-icon, +.leaflet-marker-shadow { + display: block; + } +/* map is broken in FF if you have max-width: 100% on tiles */ +.leaflet-container img { + max-width: none !important; + } +/* stupid Android 2 doesn't understand "max-width: none" properly */ +.leaflet-container img.leaflet-image-layer { + max-width: 15000px !important; + } +.leaflet-tile { + filter: inherit; + visibility: hidden; + } +.leaflet-tile-loaded { + visibility: inherit; + } +.leaflet-zoom-box { + width: 0; + height: 0; + } +/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ +.leaflet-overlay-pane svg { + -moz-user-select: none; + } + +.leaflet-tile-pane { z-index: 2; } +.leaflet-objects-pane { z-index: 3; } +.leaflet-overlay-pane { z-index: 4; } +.leaflet-shadow-pane { z-index: 5; } +.leaflet-marker-pane { z-index: 6; } +.leaflet-popup-pane { z-index: 7; } + +.leaflet-vml-shape { + width: 1px; + height: 1px; + } +.lvml { + behavior: url(#default#VML); + display: inline-block; + position: absolute; + } + + +/* control positioning */ + +.leaflet-control { + position: relative; + z-index: 7; + pointer-events: auto; + } +.leaflet-top, +.leaflet-bottom { + position: absolute; + z-index: 1000; + pointer-events: none; + } +.leaflet-top { + top: 0; + } +.leaflet-right { + right: 0; + } +.leaflet-bottom { + bottom: 0; + } +.leaflet-left { + left: 0; + } +.leaflet-control { + float: left; + clear: both; + } +.leaflet-right .leaflet-control { + float: right; + } +.leaflet-top .leaflet-control { + margin-top: 10px; + } +.leaflet-bottom .leaflet-control { + margin-bottom: 10px; + } +.leaflet-left .leaflet-control { + margin-left: 10px; + } +.leaflet-right .leaflet-control { + margin-right: 10px; + } + + +/* zoom and fade animations */ + +.leaflet-fade-anim .leaflet-tile, +.leaflet-fade-anim .leaflet-popup { + opacity: 0; + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + -o-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; + } +.leaflet-fade-anim .leaflet-tile-loaded, +.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { + opacity: 1; + } + +.leaflet-zoom-anim .leaflet-zoom-animated { + -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); + -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); + -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1); + transition: transform 0.25s cubic-bezier(0,0,0.25,1); + } +.leaflet-zoom-anim .leaflet-tile, +.leaflet-pan-anim .leaflet-tile, +.leaflet-touching .leaflet-zoom-animated { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + +.leaflet-zoom-anim .leaflet-zoom-hide { + visibility: hidden; + } + + +/* cursors */ + +.leaflet-clickable { + cursor: pointer; + } +.leaflet-container { + cursor: -webkit-grab; + cursor: -moz-grab; + } +.leaflet-popup-pane, +.leaflet-control { + cursor: auto; + } +.leaflet-dragging .leaflet-container, +.leaflet-dragging .leaflet-clickable { + cursor: move; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + } + + +/* visual tweaks */ + +.leaflet-container { + background: #ddd; + outline: 0; + } +.leaflet-container a { + color: #0078A8; + } +.leaflet-container a.leaflet-active { + outline: 2px solid orange; + } +.leaflet-zoom-box { + border: 2px dotted #38f; + background: rgba(255,255,255,0.5); + } + + +/* general typography */ +.leaflet-container { + font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; + } + + +/* general toolbar styles */ + +.leaflet-bar { + box-shadow: 0 1px 5px rgba(0,0,0,0.65); + border-radius: 4px; + } +.leaflet-bar a, +.leaflet-bar a:hover { + background-color: #fff; + border-bottom: 1px solid #ccc; + width: 26px; + height: 26px; + line-height: 26px; + display: block; + text-align: center; + text-decoration: none; + color: black; + } +.leaflet-bar a, +.leaflet-control-layers-toggle { + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; + } +.leaflet-bar a:hover { + background-color: #f4f4f4; + } +.leaflet-bar a:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } +.leaflet-bar a:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom: none; + } +.leaflet-bar a.leaflet-disabled { + cursor: default; + background-color: #f4f4f4; + color: #bbb; + } + +.leaflet-touch .leaflet-bar a { + width: 30px; + height: 30px; + line-height: 30px; + } + + +/* zoom control */ + +.leaflet-control-zoom-in, +.leaflet-control-zoom-out { + font: bold 18px 'Lucida Console', Monaco, monospace; + text-indent: 1px; + } +.leaflet-control-zoom-out { + font-size: 20px; + } + +.leaflet-touch .leaflet-control-zoom-in { + font-size: 22px; + } +.leaflet-touch .leaflet-control-zoom-out { + font-size: 24px; + } + + +/* layers control */ + +.leaflet-control-layers { + box-shadow: 0 1px 5px rgba(0,0,0,0.4); + background: #fff; + border-radius: 5px; + } +.leaflet-control-layers-toggle { + background-image: url(images/layers.png); + width: 36px; + height: 36px; + } +.leaflet-retina .leaflet-control-layers-toggle { + background-image: url(images/layers-2x.png); + background-size: 26px 26px; + } +.leaflet-touch .leaflet-control-layers-toggle { + width: 44px; + height: 44px; + } +.leaflet-control-layers .leaflet-control-layers-list, +.leaflet-control-layers-expanded .leaflet-control-layers-toggle { + display: none; + } +.leaflet-control-layers-expanded .leaflet-control-layers-list { + display: block; + position: relative; + } +.leaflet-control-layers-expanded { + padding: 6px 10px 6px 6px; + color: #333; + background: #fff; + } +.leaflet-control-layers-selector { + margin-top: 2px; + position: relative; + top: 1px; + } +.leaflet-control-layers label { + display: block; + } +.leaflet-control-layers-separator { + height: 0; + border-top: 1px solid #ddd; + margin: 5px -10px 5px -6px; + } + + +/* attribution and scale controls */ + +.leaflet-container .leaflet-control-attribution { + background: #fff; + background: rgba(255, 255, 255, 0.7); + margin: 0; + } +.leaflet-control-attribution, +.leaflet-control-scale-line { + padding: 0 5px; + color: #333; + } +.leaflet-control-attribution a { + text-decoration: none; + } +.leaflet-control-attribution a:hover { + text-decoration: underline; + } +.leaflet-container .leaflet-control-attribution, +.leaflet-container .leaflet-control-scale { + font-size: 11px; + } +.leaflet-left .leaflet-control-scale { + margin-left: 5px; + } +.leaflet-bottom .leaflet-control-scale { + margin-bottom: 5px; + } +.leaflet-control-scale-line { + border: 2px solid #777; + border-top: none; + line-height: 1.1; + padding: 2px 5px 1px; + font-size: 11px; + white-space: nowrap; + overflow: hidden; + -moz-box-sizing: content-box; + box-sizing: content-box; + + background: #fff; + background: rgba(255, 255, 255, 0.5); + } +.leaflet-control-scale-line:not(:first-child) { + border-top: 2px solid #777; + border-bottom: none; + margin-top: -2px; + } +.leaflet-control-scale-line:not(:first-child):not(:last-child) { + border-bottom: 2px solid #777; + } + +.leaflet-touch .leaflet-control-attribution, +.leaflet-touch .leaflet-control-layers, +.leaflet-touch .leaflet-bar { + box-shadow: none; + } +.leaflet-touch .leaflet-control-layers, +.leaflet-touch .leaflet-bar { + border: 2px solid rgba(0,0,0,0.2); + background-clip: padding-box; + } + + +/* popup */ + +.leaflet-popup { + position: absolute; + text-align: center; + } +.leaflet-popup-content-wrapper { + padding: 1px; + text-align: left; + border-radius: 12px; + } +.leaflet-popup-content { + margin: 13px 19px; + line-height: 1.4; + } +.leaflet-popup-content p { + margin: 18px 0; + } +.leaflet-popup-tip-container { + margin: 0 auto; + width: 40px; + height: 20px; + position: relative; + overflow: hidden; + } +.leaflet-popup-tip { + width: 17px; + height: 17px; + padding: 1px; + + margin: -10px auto 0; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + } +.leaflet-popup-content-wrapper, +.leaflet-popup-tip { + background: white; + + box-shadow: 0 3px 14px rgba(0,0,0,0.4); + } +.leaflet-container a.leaflet-popup-close-button { + position: absolute; + top: 0; + right: 0; + padding: 4px 4px 0 0; + text-align: center; + width: 18px; + height: 14px; + font: 16px/14px Tahoma, Verdana, sans-serif; + color: #c3c3c3; + text-decoration: none; + font-weight: bold; + background: transparent; + } +.leaflet-container a.leaflet-popup-close-button:hover { + color: #999; + } +.leaflet-popup-scrolled { + overflow: auto; + border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; + } + +.leaflet-oldie .leaflet-popup-content-wrapper { + zoom: 1; + } +.leaflet-oldie .leaflet-popup-tip { + width: 24px; + margin: 0 auto; + + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; + filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); + } +.leaflet-oldie .leaflet-popup-tip-container { + margin-top: -1px; + } + +.leaflet-oldie .leaflet-control-zoom, +.leaflet-oldie .leaflet-control-layers, +.leaflet-oldie .leaflet-popup-content-wrapper, +.leaflet-oldie .leaflet-popup-tip { + border: 1px solid #999; + } + + +/* div icon */ + +.leaflet-div-icon { + background: #fff; + border: 1px solid #666; + } diff --git a/Map_2/css/main.css b/Map_2/css/main.css new file mode 100644 index 0000000..66fb61c --- /dev/null +++ b/Map_2/css/main.css @@ -0,0 +1,18 @@ +/* All taken from https://docs.mapbox.com/mapbox-gl-js/example/measure/ */ +.distance-container { +position: absolute; +top: 10px; +left: 10px; +z-index: 1; +} + +.distance-container > * { +background-color: rgba(0, 0, 0, 0.5); +color: #fff; +font-size: 11px; +line-height: 18px; +display: block; +margin: 0; +padding: 5px 10px; +border-radius: 3px; +} diff --git a/Map_2/css/reset.css b/Map_2/css/reset.css new file mode 100644 index 0000000..f9b2386 --- /dev/null +++ b/Map_2/css/reset.css @@ -0,0 +1,9 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} + +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} diff --git a/Map_2/css/style.css b/Map_2/css/style.css new file mode 100644 index 0000000..e290bbe --- /dev/null +++ b/Map_2/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_2/index.html b/Map_2/index.html new file mode 100644 index 0000000..e4bedcb --- /dev/null +++ b/Map_2/index.html @@ -0,0 +1,25 @@ + + + + + +Map 2 Ian Schwarzenberg + + + + + + + + +
+
+ + + + + + diff --git a/Map_2/js/main.js b/Map_2/js/main.js new file mode 100644 index 0000000..66c6fe8 --- /dev/null +++ b/Map_2/js/main.js @@ -0,0 +1,174 @@ +//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-v8', //Makes markers appear normally +center: [-75.163623, 39.952297], //Centered on Philly +zoom: 12 +}); + + + + + +//ADDS POINTS TO MAP (found out how to do from https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/): +map.on('load', function () { + +map.addLayer({ +"id": "points", +"type": "symbol", +"source": { +"type": "geojson", +"data": { +"type": "FeatureCollection", +"features": [{ +"type": "Feature", +"geometry": { +"type": "Point", +"coordinates": [-75.193675, 39.951799] +}, +"properties": { +"title": "Penn", +"icon": "marker" +} +}, { +"type": "Feature", +"geometry": { +"type": "Point", +"coordinates": [-75.155820, 39.981337] +}, +"properties": { +"title": "Temple", +"icon": "marker" +} +}, { +"type": "Feature", +"geometry": { +"type": "Point", +"coordinates": [-75.156009, 39.947895] +}, +"properties": { +"title": "TJU", +"icon": "marker" +} +}] +} +}, +"layout": { +"icon-image": "{icon}-15", +"text-field": "{title}", +"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], +"text-offset": [0, 0.6], +"text-anchor": "top" +} +}); +}); + + +//MAKES IT SO DISTANCES CAN BE MEASURED (essentially taken from https://docs.mapbox.com/mapbox-gl-js/example/measure/): +var distanceContainer = document.getElementById('distance'); + +// GeoJSON object to hold our measurement features +var geojson = { +"type": "FeatureCollection", +"features": [] +}; + +// Used to draw a line between points +var linestring = { +"type": "Feature", +"geometry": { +"type": "LineString", +"coordinates": [] +} +}; + +map.on('load', function() { +map.addSource('geojson', { +"type": "geojson", +"data": geojson +}); + +// Add styles to the map +map.addLayer({ +id: 'measure-points', +type: 'circle', +source: 'geojson', +paint: { +'circle-radius': 6, +'circle-color': '#FC350D' +}, +filter: ['in', '$type', 'Point'] +}); + +map.addLayer({ +id: 'measure-lines', +type: 'line', +source: 'geojson', +layout: { +'line-cap': 'round', +'line-join': 'round' +}, +paint: { +'line-color': '#FC350D', +'line-width': 1.5 +}, +filter: ['in', '$type', 'LineString'] +}); + +map.on('click', function(e) { +var features = map.queryRenderedFeatures(e.point, { layers: ['measure-points'] }); + +// Remove the linestring from the group +// So we can redraw it based on the points collection +if (geojson.features.length > 1) geojson.features.pop(); + +// Clear the Distance container to populate it with a new value +distanceContainer.innerHTML = ''; + +// If a feature was clicked, remove it from the map +if (features.length) { +var id = features[0].properties.id; +geojson.features = geojson.features.filter(function(point) { +return point.properties.id !== id; +}); +} else { +var point = { +"type": "Feature", +"geometry": { +"type": "Point", +"coordinates": [ +e.lngLat.lng, +e.lngLat.lat +] +}, +"properties": { +"id": String(new Date().getTime()) +} +}; + +geojson.features.push(point); +} + +if (geojson.features.length > 1) { +linestring.geometry.coordinates = geojson.features.map(function(point) { +return point.geometry.coordinates; +}); + +geojson.features.push(linestring); + +// Populate the distanceContainer with total distance +var value = document.createElement('pre'); +value.textContent = 'Total distance: ' + turf.lineDistance(linestring, 'miles').toLocaleString() + 'mi'; //Makes it so distance appears in miles (in original template, this distance was in km) +distanceContainer.appendChild(value); +} + +map.getSource('geojson').setData(geojson); +}); +}); + +/* map.on('mousemove', function (e) { +var features = map.queryRenderedFeatures(e.point, { layers: ['measure-points'] }); +// UI indicator for clicking/hovering a point on the map +map.getCanvas().style.cursor = (features.length) ? 'pointer' : 'crosshair'; +}); */ //This block of code from the original template was messing things up, so I commented it out