Annotation layer

examples/annotations/example.json

@@ -0,0 +1,9 @@
+{
+  "path": "annotations",
+  "title": "Annotation Layer",
+  "exampleCss": ["main.css"],
+  "exampleJs": ["main.js"],
+  "about": {
+    "text": "This example shows how to add annotations, such as marked rectangles, to a map.  Left click to add a polygon, right click to add a rectangle."
+  }
+}

examples/annotations/index.jade

@@ -0,0 +1,75 @@
+extends ../common/templates/index.jade
+
+block append mainContent
+  #controls
+    .form-group.annotationtype(title='Select the type of annotation to add.')
+      .shortlabel Add
+      button#rectangle.lastused(next='polygon') Rectangle
+      button#polygon(next='point') Polygon
+      button#point(next='rectangle') Point
+    .form-group
+      #instructions(annotation='none')
+        .annotation.none
+        .annotation.polygon Left-click points in the polygon.  Double click, right click, or click the starting point to close the polygon.
+        .annotation.rectangle Left click-and-drag to draw a rectangle.
+        .annotation.point Left click to create a point.
+    .form-group(title='If enabled, left-click to add another annotation, and right-click to switch annotation type.  Otherwise, you must click a button above.')
+      label(for='clickadd') Click to add annotation
+      input#clickadd(param-name='clickadd', type='checkbox', placeholder='true', checked='checked')
+    .form-group(title='If enabled, immediately after adding one annotation, you can add another without either left-clicking or selecting a button.')
+      label(for='keepadding') Keep adding annotations
+      input#keepadding(param-name='keepadding', type='checkbox', placeholder='false')
+    .form-group#annotationheader
+      .shortlabel Created Annotations
+      a.entry-remove-all(action='remove-all', title='Delete all annotations') ✖
+    .form-group
+      #annotationlist
+        .entry#sample
+          span.entry-name Sample
+          a.entry-edit(action='edit', title='Edit name and properties') ✎
+          a.entry-remove(action='remove', title='Delete this annotation') ✖
+    // add buttons to copy annotations as geojson and to paste geojson to annotations
+
+  #editdialog.modal.fade
+    .modal-dialog
+      form.modal-content
+        .modal-header
+          button.close(type='button', data-dismiss='modal') ×
+          h4.modal-title Edit Annotation
+        .modal-body
+          .form-group
+            label(for='edit-name') Name
+            input#edit-name(option='name')
+          .form-group(annotation-types='point')
+            label(for='edit-radius') Radius
+            input#edit-radius(option='radius', format='positive')
+          .form-group(annotation-types='point polygon rectangle')
+            label(for='edit-fill') Fill
+            select#edit-stroke(option='fill', format='boolean')
+              option(value='true') Yes
+              option(value='false') No
+          .form-group(annotation-types='point polygon rectangle')
+            label(for='edit-fillColor') Fill Color
+            input#edit-fillColor(option='fillColor', format='color')
+          .form-group(annotation-types='point polygon rectangle')
+            label(for='edit-fillOpacity') Fill Opacity
+            input#edit-fillOpacity(option='fillOpacity', format='opacity')
+          .form-group(annotation-types='point polygon rectangle')
+            label(for='edit-stroke') Stroke 
+            select#edit-stroke(option='stroke', format='boolean')
+              option(value='true') Yes
+              option(value='false') No
+          .form-group(annotation-types='point polygon rectangle')
+            label(for='edit-strokeWidth') Stroke Width
+            input#edit-strokeWidth(option='strokeWidth', format='positive')
+          .form-group(annotation-types='point polygon rectangle')
+            label(for='edit-strokeColor') Stroke Color
+            input#edit-strokeColor(option='strokeColor', format='color')
+          .form-group(annotation-types='point polygon rectangle')
+            label(for='edit-strokeOpacity') Stroke Opacity
+            input#edit-strokeOpacity(option='strokeOpacity', format='opacity')
+          .form-group
+            #edit-validation-error
+        .modal-footer
+          button.btn.btn-sm.btn-primary#edit-update(type='submit') Update
+          button.btn.btn-sm.btn-secondary(data-dismiss='modal') Cancel

examples/annotations/main.css

@@ -0,0 +1,101 @@
+#controls {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  left: 10px;
+  top: 80px;
+  z-index: 1;
+  border-radius: 5px;
+  border: 1px solid grey;
+  box-shadow: 1px 1px 3px black;
+  opacity: 0.5;
+  transition: opacity 250ms ease;
+  background: #CCC;
+  color: black;
+  padding: 4px;
+  font-size: 14px;
+  max-height: calc(100% - 100px);
+  min-width: 310px;
+}
+#controls:hover {
+  opacity: 1;
+}
+#controls .form-group {
+  margin-bottom: 0;
+}
+#controls label {
+  min-width: 160px;
+}
+#controls.no-controls {
+  display: none;
+}
+.annotationtype button.lastused {
+  color: #373a3c;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.annotationtype button.active {
+  color: white;
+  background-color: #025aa5;
+  border-color: #01549b;
+}
+.shortlabel {
+  margin-bottom: 5px;
+  font-weight: bold;
+  display: inline-block;
+}
+#instructions .annotation {
+  display: none;
+  max-width: 300px;
+  font-size: 12px;
+  line-height: 1.42857em;
+  min-height: 2.85714em;
+}
+#instructions[annotation="polygon"] .annotation.polygon,
+#instructions[annotation="rectangle"] .annotation.rectangle,
+#instructions[annotation="point"] .annotation.point,
+#instructions[annotation="none"] .annotation.none {
+  display: block;
+}
+#controls a {
+  color: #333;
+  cursor: pointer;
+}
+.entry span, .entry a {
+  display: inline-block;
+}
+.entry .entry-name {
+  width: 86%;
+}
+.entry .entry-edit {
+  width: 7%;
+  text-align: right;
+  font-weight: bold;
+}
+.entry .entry-remove {
+  width: 7%;
+  text-align: right;
+}
+.entry-remove-all {
+  float: right;
+}
+#annotationheader, .entry#sample {
+  display: none;
+}
+#editdialog {
+  font-size: 14px;
+}
+#editdialog .form-group {
+  margin-bottom: 0px;
+}
+#editdialog #edit-update {
+  float: right;
+  margin-left: 10px;
+}
+#editdialog label {
+  min-width: 105px;
+}
+#editdialog #edit-validation-error {
+  color: red;
+  font-weight: bold;
+}