From 5b9dcf3bccb08b0463a6cb5c911762c69787beb3 Mon Sep 17 00:00:00 2001
From: Andrew Harvey <andrew@alantgeo.com.au>
Date: Thu, 28 Feb 2019 15:53:50 +1100
Subject: [PATCH] show vertices toggle

---
 views/layers.ejs | 34 ++++++++++++++++++++++++++++++++++
 views/menu.ejs   | 29 +++++++++++++++++++++++++++++
 views/vector.ejs |  4 +++-
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/views/layers.ejs b/views/layers.ejs
index b9c3e36..96f4f1f 100644
--- a/views/layers.ejs
+++ b/views/layers.ejs
@@ -32,6 +32,22 @@
     }
   });
 
+  map.addLayer({
+    'id': '<%= layer.id %>-polygons-vertices',
+    'type': 'circle',
+    'source': '<%= sid %>',
+    'source-layer': '<%= layer.id %>',
+    'filter': ["==", "$type", "Polygon"],
+    'layout': {
+      'visibility': 'none',
+    },
+    'paint': {
+      'circle-color': layerColor,
+      'circle-radius': 2,
+      'circle-opacity': 0.75
+    }
+  });
+
   map.addLayer({
     'id': '<%= layer.id %>-lines',
     'type': 'line',
@@ -49,6 +65,22 @@
     }
   });
 
+  map.addLayer({
+    'id': '<%= layer.id %>-lines-vertices',
+    'type': 'circle',
+    'source': '<%= sid %>',
+    'source-layer': '<%= layer.id %>',
+    'filter': ["==", "$type", "LineString"],
+    'layout': {
+      'visibility': 'none',
+    },
+    'paint': {
+      'circle-color': layerColor,
+      'circle-radius': 2,
+      'circle-opacity': 0.75
+    }
+  });
+
   map.addLayer({
     'id': '<%= layer.id %>-pts',
     'type': 'circle',
@@ -66,5 +98,7 @@
   layers.polygons.push('<%= layer.id %>-polygons-outline');
   layers.lines.push('<%= layer.id %>-lines');
   layers.pts.push('<%= layer.id %>-pts');
+  layers.polygonsVertices.push('<%= layer.id %>-polygons-vertices');
+  layers.linesVertices.push('<%= layer.id %>-lines-vertices');
 
 <% }); %>
diff --git a/views/menu.ejs b/views/menu.ejs
index 1361f34..010eeae 100644
--- a/views/menu.ejs
+++ b/views/menu.ejs
@@ -32,6 +32,10 @@
     <input id='filter-pts' type='radio' name='rtoggle' value='pts'>
     <label for='filter-pts'>points</label>
   </div>
+  <div id="menu-vertices" onchange="menuFilter()" class='rounded-toggle short inline'>
+    <input id='show-vertices' type='checkbox' name='ptoggle' value='all''>
+    <label for='show-vertices'>show vertices</label>
+  </div>
   <h4>Popup</h4>
   <div id="menu-popup" onchange="menuPopup()" class='rounded-toggle short inline'>
     <input id='show-popup' type='checkbox' name='ptoggle' value='all''>
@@ -64,18 +68,43 @@ function menuFilter() {
     paint(layers.pts, 'visible');
     paint(layers.lines, 'visible');
     paint(layers.polygons, 'visible');
+
+    if (document.querySelector("#show-vertices").checked) {
+      paint(layers.linesVertices, 'visible');
+      paint(layers.polygonsVertices, 'visible');
+    } else {
+      paint(layers.linesVertices, 'none');
+      paint(layers.polygonsVertices, 'none');
+    }
   } else if (document.querySelector("#filter-pts").checked) {
     paint(layers.pts, 'visible');
     paint(layers.lines, 'none');
     paint(layers.polygons, 'none');
+    paint(layers.linesVertices, 'none');
+    paint(layers.polygonsVertices, 'none');
   } else if (document.querySelector("#filter-lines").checked) {
     paint(layers.pts, 'none');
     paint(layers.lines, 'visible');
     paint(layers.polygons, 'none');
+
+    if (document.querySelector("#show-vertices").checked) {
+      paint(layers.linesVertices, 'visible');
+      paint(layers.polygonsVertices, 'none');
+    } else {
+      paint(layers.linesVertices, 'none');
+      paint(layers.polygonsVertices, 'none');
+    }
   } else if (document.querySelector("#filter-polygons").checked) {
     paint(layers.pts, 'none');
     paint(layers.lines, 'none');
     paint(layers.polygons, 'visible');
+    if (document.querySelector("#show-vertices").checked) {
+      paint(layers.linesVertices, 'none');
+      paint(layers.polygonsVertices, 'visible');
+    } else {
+      paint(layers.linesVertices, 'none');
+      paint(layers.polygonsVertices, 'none');
+    }
   }
 
   function paint(layers, val) {
diff --git a/views/vector.ejs b/views/vector.ejs
index ad93a0c..3355c56 100644
--- a/views/vector.ejs
+++ b/views/vector.ejs
@@ -69,7 +69,9 @@ var map = new mapboxgl.Map({
 var layers = {
   pts: [],
   lines: [],
-  polygons: []
+  polygons: [],
+  linesVertices: [],
+  polygonsVertices: []
 }
 
 var lightColors = [