troubleshoot

jakobzhao · Dec 3, 2017 · 8aa7caa · 8aa7caa
1 parent c11c97c
commit 8aa7caa
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 30 deletions.
diff --git a/labs/lab03/assets/counties-original.geojson b/labs/lab03/assets/counties-original.geojson
@@ -1,4 +1,4 @@
-
+{
 "type": "FeatureCollection",
 "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
 "features": [

diff --git a/troubleshoot/container/index.html b/troubleshoot/container/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Container shapes</title>
+ <!--stylesheets-->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"/>
+ <style type="text/css">
+ body{margin-top: 200px}
+ #map-circle {
+ width: 300px;
+ height: 300px;
+ border-radius: 150px;
+ z-index: 10 /* z-index is greater than the map panel */
+ }
+ #map-hexagon {
+
+ width: 346px;
+ height: 300px; /* width * 86.6025405%;*/
+ -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
+ -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
+ }
+
+ </style>
+ <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
+</head>
+<body>
+<div class="container">
+ <div class="row">
+ <div id="map-circle" class="col-md-2"></div>
+ <div class="col-md-1"></div>
+ <div id="map-hexagon" class="col-md-2"></div>
+ </div>
+</div>
+
+<script type="text/javascript">
+
+ var map1 = L.map('map-circle').setView([51.505, -0.09], 13);
+ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map1);
+
+ var map2 = L.map('map-hexagon').setView([51.505, -0.09], 13);
+ // L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png').addTo(map2);
+ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map2);
+
+</script>
+</body>
+</html>
diff --git a/troubleshoot/proj/assets/counties-sim.geojson b/troubleshoot/proj/assets/counties-sim.geojson
diff --git a/troubleshoot/proj/assets/counties.geojson b/troubleshoot/proj/assets/counties.geojson
diff --git a/troubleshoot/proj/assets/counties.topojson b/troubleshoot/proj/assets/counties.topojson
diff --git a/troubleshoot/proj/oregon.html b/troubleshoot/proj/oregon.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Projections: NAD83/ Oregon Lambert</title>
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"/>
+ <style type="text/css">
+ html, body, #map { width: 100%; height: 100%; margin: 0; background: #fff; }
+ </style>
+ <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
+ <script type="text/javascript" src="js/proj4js-compressed.js"></script>
+ <script type="text/javascript" src="js/proj4leaflet.js"></script>
+</head>
+<body>
+<div id="map"></div>
+<script type="text/javascript">
+
+ // crs: EPSG:2991
+ // http://www.spatialreference.org/ref/epsg/2991/
+
+ crs = new L.Proj.CRS('EPSG:2991',
+ '+proj=lcc +lat_1=43 +lat_2=45.5 +lat_0=41.75 +lon_0=-120.5 +x_0=400000 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs',
+ {
+ resolutions: [8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1] // example zoom level resolutions
+ }
+ );
+
+ var map = L.map('map', {
+ crs: crs
+ }).setView([43.83,-120.67],3);
+
+
+ var counties = L.geoJson.ajax("assets/counties-sim.geojson", {
+ style: {
+ color: '#4b4b4b',
+ weight: 0.5,
+ opacity: 1,
+ fillColor: '#fff996',
+ dashArray: "0 5 0",
+ fillOpacity: 1
+ }}).addTo(map);
+
+</script>
+</body>
+</html>
diff --git a/troubleshoot/proj/topojson.html b/troubleshoot/proj/topojson.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Projections: NAD83/ Oregon Lambert</title>
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"/>
+ <style type="text/css">
+ html, body, #map { width: 100%; height: 100%; margin: 0; background: #fff; }
+ </style>
+ <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
+ <script src="https://d3js.org/topojson.v1.min.js"></script>
+ <script type="text/javascript" src="js/proj4js-compressed.js"></script>
+ <script type="text/javascript" src="js/proj4leaflet.js"></script>
+</head>
+<body>
+<div id="map"></div>
+<script type="text/javascript">
+
+ // crs: EPSG:2991
+ // http://www.spatialreference.org/ref/epsg/2991/
+
+ crs = new L.Proj.CRS('EPSG:2991',
+ '+proj=lcc +lat_1=43 +lat_2=45.5 +lat_0=41.75 +lon_0=-120.5 +x_0=400000 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs',
+ {
+ resolutions: [8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1] // example zoom level resolutions
+ }
+ );
+
+ var map = L.map('map', {
+ crs: crs
+ }).setView([43.83,-120.67],3);
+
+
+ var counties = L.geoJson.ajax("assets/counties.topojson", {
+ style: {
+ color: '#4b4b4b',
+ weight: 0.5,
+ opacity: 1,
+ fillColor: '#fff996',
+ dashArray: "0 5 0",
+ fillOpacity: 1
+ }}).addTo(map);
+
+</script>
+</body>
+</html>
diff --git a/troubleshoot/swoopy/Leaflet.SwoopyArrow-customized.js b/troubleshoot/swoopy/Leaflet.SwoopyArrow-customized.js