add credits

pissang · Jul 24, 2018 · c031972 · c031972
1 parent e380325
commit c031972
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 9 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,5 +1,6 @@
 body {
     overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 #viewport {
     position: absolute;
@@ -13,13 +14,137 @@ body {
 }
 
 #map {
-    width: 450px;
-    height: 300px;
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: inherit;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     transform: scale(0.6, 0.6);
     transform-origin: 100% 100%;
-}
+}
+#map-main {
+    width: 450px;
+    height: 300px;
+}
+
+#map h3 {
+    width: 450px;
+    height: 50px;
+    line-height: 50px;
+    margin: 0;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 18px;
+    padding-left: 10px;
+    background: #aaa;
+    color: white;
+}
+
+#map .maptalks-attribution {
+    font-size: 25px;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #fff;
+    padding: 5px;
+}
+
+#credits {
+    position: absolute;
+    width: 350px;
+    bottom: 10px;
+    left: 50%;
+    margin-left: -175px;
+    text-align: center;
+    z-index: 1000;
+    font-size: 12px;
+    color: #333;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 5px;
+    padding: 5px;
+    line-height: 20px;
+}
+
+#credits .source {
+    color: #000;
+    font-size: 14px;
+    margin-right: 14px;
+}
+#credits a {
+    color: #111;
+}
+
+.pace {
+    -webkit-pointer-events: none;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.pace-inactive {
+    display: none;
+}
+
+.pace .pace-progress {
+    background: #29d;
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    right: 100%;
+    width: 100%;
+    height: 2px;
+}
+
+.pace .pace-progress-inner {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+    opacity: 1.0;
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -moz-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    -o-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+}
+
+.pace .pace-activity {
+    display: block;
+    position: fixed;
+    z-index: 2000;
+    top: 15px;
+    right: 15px;
+    width: 14px;
+    height: 14px;
+    border: solid 2px transparent;
+    border-top-color: #29d;
+    border-left-color: #29d;
+    border-radius: 10px;
+    -webkit-animation: pace-spinner 400ms linear infinite;
+    -moz-animation: pace-spinner 400ms linear infinite;
+    -ms-animation: pace-spinner 400ms linear infinite;
+    -o-animation: pace-spinner 400ms linear infinite;
+    animation: pace-spinner 400ms linear infinite;
+}
+
+@-webkit-keyframes pace-spinner {
+0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-moz-keyframes pace-spinner {
+0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
+100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-o-keyframes pace-spinner {
+0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
+100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-ms-keyframes pace-spinner {
+0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
+100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@keyframes pace-spinner {
+0% { transform: rotate(0deg); transform: rotate(0deg); }
+100% { transform: rotate(360deg); transform: rotate(360deg); }
+}
diff --git a/index.html b/index.html
@@ -6,10 +6,29 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Little Big City</title>
     <link rel="stylesheet" href="./css/main.css">
+    <script>
+        paceOptions = {
+            ajax: true,
+            document: true
+        };
+    </script>
+    <script src="lib/pace.min.js"></script>
 </head>
 <body>
     <div id="viewport"></div>
-    <div id="map"></div>
+    <div id="map">
+        <h3>Drag the map to select the area</h3>
+        <div id="map-main"></div>
+    </div>
+    <div id="credits">
+        <a href="https://github.com/pissang/little-big-city" target="_blank" class="source">Source Code</a>
+        Built on top of
+            <a href="https://github.com/pissang/claygl" target="_blank">ClayGL</a> by
+            <a href="https://twitter.com/pissang1" target="_blank">@pissang</a>
+        <div class="data-source">
+            Vector tile data is from <a target="_blank" href="https://developers.nextzen.org/about.html">nextzen</a>.
+        </div>
+    </div>
     <script src="lib/FileSaver.js"></script>
     <script src="./dist/bundle.js"></script>
 </body>

diff --git a/lib/pace.min.js b/lib/pace.min.js
diff --git a/src/main.js b/src/main.js
@@ -69,14 +69,14 @@ const config = {
     }
 };
 
-const mvtUrlTpl = 'https://tile.nextzen.org/tilezen/vector/v1/256/all/{z}/{x}/{y}.mvt?api_key=EWFsMD1DSEysLDWd2hj2cw';
+const mvtUrlTpl = 'https://{s}.tile.nextzen.org/tilezen/vector/v1/256/all/{z}/{x}/{y}.mvt?api_key=EWFsMD1DSEysLDWd2hj2cw';
 
 const mainLayer = new maptalks.TileLayer('base', {
     tileSize: [256, 256],
     urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
     subdomains: ['a', 'b', 'c']
 });
-const map = new maptalks.Map('map', {
+const map = new maptalks.Map('map-main', {
     // center: [-0.113049, 51.498568],
     // center: [-73.97332, 40.76462],
     center: [-74.0130345, 40.70635160000003],
@@ -275,7 +275,7 @@ const app = application.create('#viewport', {
                 const scale = 1e4;
 
                 if (elConfig.type === 'roads') {
-                    subdivideLineFeatures(features, 5e-4);
+                    subdivideLineFeatures(features, 4e-4);
                 }
                 // if (elConfig.type === 'water') {
                 //     console.log(JSON.stringify({ type: 'FeatureCollection', features: features}));
@@ -358,15 +358,17 @@ const app = application.create('#viewport', {
             }
 
             const tiles = mainLayer.getTiles();
-
+            const subdomains = ['a', 'b', 'c'];
             tiles.tileGrids[0].tiles.forEach((tile, idx) => {
                 const fetchId = this._id;
                 if (idx >= 6) {
                     return;
                 }
+
                 const url = mvtUrlTpl.replace('{z}', tile.z)
                     .replace('{x}', tile.x)
-                    .replace('{y}', tile.y);
+                    .replace('{y}', tile.y)
+                    .replace('{s}', subdomains[idx % 3]);
 
                 if (mvtCache.get(url)) {
                     const features = mvtCache.get(url);