update demos

maptalks · Nov 28, 2022 · cfe2f68 · cfe2f68
1 parent 5a59a84
commit cfe2f68
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 8 deletions.
diff --git a/test/base.html b/test/base.html
@@ -2,7 +2,7 @@
 <html>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>base</title>
+<title>base-colorin</title>
 <style type="text/css">
     html,
     body {
@@ -25,7 +25,7 @@
         margin-left: 10px;
     }
 </style>
-<script src="./../dist/colorin.js"></script>
+<script src="https://unpkg.com/colorin/dist/colorin.js"></script>
 <script type="text/javascript" src="./debug.js"></script>
 <body>
     <div class="container"></div>

diff --git a/test/customsize.html b/test/customsize.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>custom imagedata size-colorin</title>
+<style type="text/css">
+    html,
+    body {
+        margin: 0px;
+        height: 100%;
+        width: 100%;
+        /* display: flex; */
+    }
+
+    .container {
+        width: 100%;
+        height: 50%;
+        display: flex;
+    }
+
+    .colorpanel {
+        width: 20px;
+        height: 20px;
+        margin-right: 20px;
+        margin-left: 10px;
+    }
+</style>
+<script src="https://unpkg.com/colorin/dist/colorin.js"></script>
+<script type="text/javascript" src="./debug.js"></script>
+
+<body>
+    <!-- <div class="container"></div> -->
+    <script>
+        const colors = [
+            [0, 'green'],
+            [180, 'yellow'],
+            [360, 'red']
+        ];
+        const ci = new colorin.ColorIn(colors, { width: 400, height: 50 });
+
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 256;
+        document.body.appendChild(canvas);
+
+        const ctx = canvas.getContext('2d');
+        for (let i = 1; i <= 360; i += 10) {
+            const startAngle = (i - 10) / 360 * Math.PI * 2;
+            const endAngle = (i) / 360 * Math.PI * 2;
+            const x = canvas.width / 2, y = canvas.height / 2;
+            const [r, g, b, a] = ci.getColor(i);
+            const color = `rgba(${r},${g},${b},${a})`;
+            ctx.fillStyle = color;
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            ctx.arc(x, y, canvas.width / 2, startAngle, endAngle);
+            ctx.fill();
+
+        }
+
+
+        showColorPanel(ci);
+
+    </script>
+</body>
+
+</html>
diff --git a/test/mtk-points.html b/test/mtk-points.html
@@ -2,7 +2,7 @@
 <html>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Map - Display a map</title>
+<title>maptalks points--colorin</title>
 <style type="text/css">
     html,
     body {
@@ -18,7 +18,7 @@
 </style>
 <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
 <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
-<script type="text/javascript" src="../dist/colorin.js"></script>
+<script src="https://unpkg.com/colorin/dist/colorin.js"></script>
 <script type="text/javascript" src="./debug.js"></script>
 
 <body>

diff --git a/test/mtk-polygons.html b/test/mtk-polygons.html
@@ -2,7 +2,7 @@
 <html>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Map - Display a map</title>
+<title>maptalks-polygons-colorin</title>
 <style type="text/css">
     html,
     body {
@@ -18,7 +18,7 @@
 </style>
 <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
 <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
-<script type="text/javascript" src="../dist/colorin.js"></script>
+<script src="https://unpkg.com/colorin/dist/colorin.js"></script>
 <script type="text/javascript" src="./debug.js"></script>
 <body>
 

diff --git a/test/pie.html b/test/pie.html
@@ -2,7 +2,7 @@
 <html>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>pie</title>
+<title>pie-colorin</title>
 <style type="text/css">
     html,
     body {
@@ -25,7 +25,7 @@
         margin-left: 10px;
     }
 </style>
-<script src="./../dist/colorin.js"></script>
+<script src="https://unpkg.com/colorin/dist/colorin.js"></script>
 <script type="text/javascript" src="./debug.js"></script>
 
 <body>

diff --git a/test/zoomstop.html b/test/zoomstop.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>zoom stops -colorin</title>
+<style type="text/css">
+    html,
+    body {
+        margin: 0px;
+        height: 100%;
+        width: 100%
+    }
+
+    .container {
+        width: 100%;
+        height: 50%
+    }
+</style>
+<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
+<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
+<script src="https://unpkg.com/colorin/dist/colorin.js"></script>
+<script type="text/javascript" src="./debug.js"></script>
+
+<body>
+
+    <div id="map" class="container"></div>
+
+    <script>
+        var map = new maptalks.Map('map', {
+            center: [114.19891751318755, 22.351176279117993],
+            zoom: 11,
+            baseLayer: new maptalks.TileLayer('base', {
+                urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+                subdomains: ["a", "b", "c", "d"],
+                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
+            })
+        });
+
+        // '#226412': [0, 200],
+        //     '#4C931B': [200, 400],
+        //     '#80BD3F': [400, 650],
+        //     '#B9E287': [650, 880],
+        //     '#E7F5D1': [880, 1100],
+        //     '#F7F7F7': [1100, 1300],
+        //     '#FDE1EF': [1300, 1450],
+        //     '#F1B7DB': [1450, 1600],
+        //     '#DF78AF': [1600, 2000],
+        //     '#C6147E': [2000, 2500],
+        //     '#8F0051': [2500, Infinity]
+
+        const colors = [
+            [0, '#226412'],
+            [2, '#4C931B'],
+            [4, '#80BD3F'],
+            [6, '#B9E287'],
+            [8, '#E7F5D1'],
+            [10, '#F7F7F7'],
+            [13, '#226412'],
+            [16, '#80BD3F'],
+            [18, '#F1B7DB'],
+            [22, '#DF78AF'],
+            [24, '#C6147E'],
+            [26, '#8F0051']
+        ];
+        const ci = new colorin.ColorIn(colors);
+        showColorPanel(ci);
+
+
+        const layer = new maptalks.VectorLayer('layer').addTo(map);
+        // layer.addGeometry(points);
+
+        fetch('./HK.geojson').then(res => res.json()).then(geojson => {
+            const polygons = maptalks.GeoJSON.toGeometry(geojson);
+            layer.addGeometry(polygons);
+            updatePolygonSymbol();
+        })
+
+        function updatePolygonSymbol() {
+            const zoom = map.getZoom();
+            const [r, g, b, a] = ci.getColor(zoom);
+            const color = `rgba(${r},${g},${b},${a})`;
+            layer.getGeometries().forEach(p => {
+                p.updateSymbol({ polygonFill: color })
+            });
+        }
+        map.on('zoomend', updatePolygonSymbol);
+
+    </script>
+</body>
+
+</html>