Merge pull request #4 from MatRouillard/test-new-cluster

Test new cluster

examples/assets/data/cluster.carte

@@ -0,0 +1,264 @@
+{
+ "param": {
+  "lon": -0.2632504808230034,
+  "lat": 45.89028989496441,
+  "zoom": 7.810533891551703,
+  "rot": 0,
+  "controlParams": {
+   "zoomBtn": true,
+   "scaleLine": true,
+   "pSearchBar": false,
+   "legend": false,
+   "coords": false,
+   "selectLayer": true,
+   "geoloc": false,
+   "profil": false,
+   "printDlg": false
+  },
+  "proj": {
+   "valeur": "EPSG:4326"
+  }
+ },
+ "legende": {
+  "legendtitle": "Ma légende",
+  "lineHeight": 45,
+  "legendWidth": 300,
+  "legendParam": {
+   "width": 300,
+   "lineHeight": 45
+  },
+  "items": [],
+  "legendVisible": false
+ },
+ "layers": [
+  {
+   "id": 1,
+   "type": "Geoportail",
+   "name": "Plan IGN",
+   "title": "Plan IGN",
+   "visibility": true,
+   "opacity": 1,
+   "description": "Cartographie multi-échelles sur le territoire national, issue des bases de données vecteur de l’IGN, mis à jour régulièrement et réalisée selon un processus entièrement automatisé. Version actuellement en beta test",
+   "copyright": "",
+   "popupContent": {},
+   "grayscale": false,
+   "blendMode": "",
+   "minZoom": null,
+   "maxZoom": null,
+   "crop": {},
+   "layer": "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"
+  },
+  {
+   "dessin": true,
+   "attributes": [],
+   "id": 2,
+   "type": "Vector",
+   "name": "Dessin",
+   "title": "Dessin",
+   "visibility": true,
+   "opacity": 1,
+   "copyright": "",
+   "selectable": true,
+   "popupContent": {},
+   "grayscale": false,
+   "blendMode": "",
+   "minZoom": null,
+   "maxZoom": null,
+   "declutter": false,
+   "style": [],
+   "conditionStyle": [],
+   "mode": "cluster",
+   "cluster": true,
+   "radiusCluster": 40,
+   "clusterDistance": 40,
+   "crop": {},
+   "data": {
+    "type": "FeatureCollection",
+    "decimals": 3,
+    "hashProperties": [],
+    "features": [
+     [
+      "Ds@$.,[email protected]%/"
+     ],
+     [
+      "DxK/V,B@{HPB"
+     ],
+     [
+      "BiIs<,B[Dn9%"
+     ],
+     [
+      "B%?gt,B[`RQ6"
+     ],
+     [
+      "BO*WW,B]UmRJ"
+     ],
+     [
+      "Em/S1,B^7d#D"
+     ],
+     [
+      "EC6qI,B=R*3o"
+     ],
+     [
+      "}D%g,B=5p4P"
+     ],
+     [
+      "BT9R=,B>@)6V"
+     ],
+     [
+      "C+F_2,B??[7="
+     ],
+     [
+      "C9<  ,B?_V0r"
+     ],
+     [
+      "BZL2&,B>=N9["
+     ],
+     [
+      "+ihM,B?pX7O"
+     ],
+     [
+      "qA)t,B[gLP9"
+     ],
+     [
+      "L[d5,B??[7="
+     ],
+     [
+      "J#K>,B=ZB30"
+     ],
+     [
+      "mk!%,B]4qR&"
+     ],
+     [
+      "FvTl3,B=rD3["
+     ],
+     [
+      "CRiQ4,B^0K!["
+     ],
+     [
+      "B~f*?,B?XV6."
+     ],
+     [
+      "B`$$K,B>fe5e"
+     ],
+     [
+      "DOO:s,B@:YO:"
+     ],
+     [
+      "ChFgr,B@vnOc"
+     ],
+     [
+      "Bs$!~,B@:YO:"
+     ],
+     [
+      "B*1c~,B[%PQe"
+     ]
+    ],
+    "style": [
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     },
+     {
+      "zi": 0
+     }
+    ],
+    "popupContent": [
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {},
+     {}
+    ]
+   }
+  }
+ ],
+ "symbolLib": []
+}

examples/cluster.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Macarte-utils</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="description" content="Maps" />
+  <meta name="keywords" content="" />
+
+  <link rel="icon" type="image/png" href="./img/logo.png">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">
+  <link rel="apple-touch-icon" href="./img/logo.png">
+  <link rel="apple-touch-startup-image" href="./img/logo.png">
+
+  <meta name="format-detection" content="telephone=no"> 
+  <meta name="msapplication-tap-highlight" content="no">   
+
+</head>
+<body data-page="site">
+
+  <div data-role="content">
+    <h1>Cluster attributes</h1>
+
+    <div id="form">
+      <h3 data-help="statistique_attr">Attribut à afficher</h3>
+      <select data-stat="cols"></select>
+    </div><div id="map"></div>
+  </div>
+
+  <script type="module" src="./cluster/index.js"></script>
+
+</body>
+</html>

examples/cluster/index.css

@@ -0,0 +1,31 @@
+#form {
+  display: inline-block;
+  vertical-align: top;
+  padding-right: 1em;
+  width: 22em;
+  box-sizing: border-box;
+}
+#map {
+  display: inline-block;
+  width: calc(100% - 22em);
+  min-height: 70em;
+}
+
+.ol-popup-content tr td:first-child {
+  max-width: 10em;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#form > * {
+  display: block;
+  margin: .5em 0 0;
+  padding: 1em 0;
+  border-bottom: 5px solid #999;
+  width: 100%;
+}
+
+#form input[type="number"] {
+  max-width: 7em;
+  margin: 0 .25em;
+}