Notes

.gitignore

@@ -19,3 +19,5 @@ land.html
 /css/img
 /test/css
 /test/img
+
+\.vscode/

ARCHITECTURE.md

@@ -352,7 +352,7 @@ Drawing is then accomplished with
         .merge(footer);
 
     footer
-        .call(uiViewOnOSM(context).entityID(entityID));
+        .call(uiViewOnOSM(context).what(entity));
 ```
 
 Some components are reconfigurable, and some provide functionality beyond

css/65_data.css

@@ -0,0 +1,162 @@
+
+/* OSM Notes Layer */
+.layer-notes {
+    pointer-events: none;
+}
+.layer-notes .note * {
+    pointer-events: none;
+}
+.layer-notes .note .note-fill {
+    pointer-events: visible;
+    cursor: pointer; /* Opera */
+    cursor: url(img/cursor-select-point.png), pointer; /* FF */
+}
+
+.note-header-icon .note-shadow,
+.layer-notes .note .note-shadow {
+    color: #000;
+}
+.note-header-icon .note-fill,
+.layer-notes .note .note-fill {
+    color: #ff3300;
+    stroke: #333;
+}
+.note-header-icon.closed .note-fill,
+.layer-notes .note.closed .note-fill {
+    color: #55dd00;
+    stroke: #333;
+}
+.layer-notes .note.hovered .note-fill {
+    color: #eebb00;
+    stroke: #333;
+}
+.layer-notes .note.selected .note-fill {
+    color: #ffee00;
+    stroke: #333;
+}
+
+/* slight adjustments to preset icon for note icons */
+.note-header-icon .preset-icon-28 {
+    top: 18px;
+}
+
+.note-header-icon .note-icon-annotation {
+    position: absolute;
+    top: 21px;
+    left: 21px;
+    margin: auto;
+}
+
+.note-header-icon .note-icon-annotation .icon {
+    width: 18px;
+    height: 18px;
+}
+
+
+/* OSM Note UI */
+.note-header {
+    background-color: #f6f6f6;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+.note-header-icon {
+    background-color: #fff;
+    padding: 10px;
+    flex: 0 0 62px;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-right: 1px solid #ccc;
+    border-radius: 5px 0 0 5px;
+}
+[dir='rtl'] .note-header-icon {
+    border-right: unset;
+    border-left: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
+}
+
+.note-header-icon .icon-wrap {
+    position: absolute;
+    top: 0px;
+}
+
+.note-header-label {
+    background-color: #f6f6f6;
+    padding: 0 15px;
+    flex: 1 1 100%;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0 5px 5px 0;
+}
+[dir='rtl'] .note-header-label {
+    border-radius: 5px 0 0 5px;
+}
+
+.comments-container {
+    background: #ececec;
+    padding: 1px 10px;
+    margin: 10px 0;
+    border-radius: 8px;
+}
+
+.comment {
+    background-color: #fff;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin: 10px auto;
+    display: flex;
+    flex-flow: row nowrap;
+}
+.comment-avatar {
+    padding: 10px;
+    flex: 0 0 62px;
+}
+.comment-avatar .icon.comment-avatar-icon {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+}
+.comment-main {
+    padding: 10px;
+    flex: 1 1 100%;
+    flex-flow: column nowrap;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+.comment-metadata {
+    flex-flow: row nowrap;
+    justify-content: space-between;
+}
+.comment-author {
+    font-weight: bold;
+    color: #333;
+}
+.comment-date {
+    color: #aaa;
+}
+.comment-text {
+    color: #333;
+    margin-top: 10px;
+    overflow-y: auto;
+    max-height: 250px;
+}
+.comment-text::-webkit-scrollbar {
+    border-left: none;
+}
+
+#new-comment-input {
+    width: 100%;
+    height: 100px;
+    max-height: 300px;
+    min-height: 100px;
+}
+
+.note-report {
+    float: right;
+}

css/80_app.css

@@ -689,13 +689,15 @@ button.save.has-count .count::before {
 }
 
 .field-help-title button.close,
+.sidebar-component .header button.note-editor-close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
     right: 0;
     top: 0;
 }
 [dir='rtl'] .field-help-title button.close,
+[dir='rtl'] .sidebar-component .header button.note-editor-close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
@@ -733,11 +735,21 @@ button.save.has-count .count::before {
 .footer {
     position: absolute;
     bottom: 0;
+    margin: 0;
     padding: 5px 20px 5px 20px;
     border-top: 1px solid #ccc;
     background-color: #fafafa;
     width: 100%;
     z-index: 1;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    list-style: none;
+    display: flex;
+
+}
+
+.footer > a {
+    justify-content: center;
 }
 
 .sidebar-component .body {
@@ -1290,6 +1302,7 @@ a.hide-toggle {
 .inspector-hover .preset-input-wrap .label,
 .inspector-hover .form-field-multicombo,
 .inspector-hover .structure-extras-wrap,
+.inspector-hover .comments-container .comment,
 .inspector-hover input,
 .inspector-hover textarea,
 .inspector-hover label {
@@ -1329,14 +1342,14 @@ a.hide-toggle {
 /* hide but preserve in layout */
 .inspector-hover .entity-editor-pane button.minor,
 .inspector-hover .combobox-caret,
-.inspector-hover .entity-editor-pane .header button,
+.inspector-hover .header button,
 .inspector-hover .spin-control,
 .inspector-hover .form-field-multicombo .chips .remove,
 .inspector-hover .hide-toggle:before,
 .inspector-hover .more-fields,
 .inspector-hover .form-label-button-wrap,
 .inspector-hover .tag-reference-button,
-.inspector-hover .view-on-osm {
+.inspector-hover .footer * {
     opacity: 0;
 }
 
@@ -3566,10 +3579,17 @@ img.tile-debug {
     vertical-align: middle;
 }
 
+.save-section .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-bottom: 30px;
+}
+
 .save-section .buttons .action,
 .save-section .buttons .secondary-action {
-    display: inline-block;
-    margin: 0 20px 0 0;
+    width: 45%;
+    margin: 10px auto;
     text-align: center;
     vertical-align: middle;
 }

data/core.yaml

@@ -441,6 +441,9 @@ en:
       osm:
         tooltip: Map data from OpenStreetMap
         title: OpenStreetMap data
+      notes:
+        tooltip: Note data from OpenStreetMap
+        title: OpenStreetMap notes
     fill_area: Fill Areas
     map_features: Map Features
     autohidden: "These features have been automatically hidden because too many would be shown on the screen.  You can zoom in to edit them."
@@ -607,6 +610,20 @@ en:
     title: "Photo Overlay (OpenStreetCam)"
   openstreetcam:
     view_on_openstreetcam: "View this image on OpenStreetCam"
+  note:
+    note: Note
+    title: Edit note
+    anonymous: anonymous
+    closed: "(Closed)"
+    commentTitle: Comments
+    newComment: New Comment
+    inputPlaceholder: Enter a comment to share with other users.
+    close: Close Note
+    open: Reopen Note
+    comment: Comment
+    close_comment: Close and Comment
+    open_comment: Reopen and Comment
+    report: Report
   help:
     title: Help
     key: H

dist/locales/en.json

@@ -536,6 +536,10 @@
                 "osm": {
                     "tooltip": "Map data from OpenStreetMap",
                     "title": "OpenStreetMap data"
+                },
+                "notes": {
+                    "tooltip": "Note data from OpenStreetMap",
+                    "title": "OpenStreetMap notes"
                 }
             },
             "fill_area": "Fill Areas",
@@ -739,6 +743,21 @@
         "openstreetcam": {
             "view_on_openstreetcam": "View this image on OpenStreetCam"
         },
+        "note": {
+            "note": "Note",
+            "title": "Edit note",
+            "anonymous": "anonymous",
+            "closed": "(Closed)",
+            "commentTitle": "Comments",
+            "newComment": "New Comment",
+            "inputPlaceholder": "Enter a comment to share with other users.",
+            "close": "Close Note",
+            "open": "Reopen Note",
+            "comment": "Comment",
+            "close_comment": "Close and Comment",
+            "open_comment": "Reopen and Comment",
+            "report": "Report"
+        },
         "help": {
             "title": "Help",
             "key": "H",

modules/behavior/hover.js

@@ -6,7 +6,10 @@ import {
 } from 'd3-selection';
 
 import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
-import { osmEntity } from '../osm';
+import {
+    osmEntity,
+    osmNote
+} from '../osm';
 import { utilRebind } from '../util/rebind';
 
 
@@ -108,7 +111,7 @@ export function behaviorHover(context) {
                 .classed('hover-suppressed', false);
 
             var entity;
-            if (datum instanceof osmEntity) {
+            if (datum instanceof osmNote || datum instanceof osmEntity) {
                 entity = datum;
             } else {
                 entity = datum && datum.properties && datum.properties.entity;
@@ -122,7 +125,7 @@ export function behaviorHover(context) {
                     return;
                 }
 
-                var selector = '.' + entity.id;
+                var selector =  (datum instanceof osmNote) ? 'note-' + entity.id : '.' + entity.id;
 
                 if (entity.type === 'relation') {
                     entity.members.forEach(function(member) {
@@ -135,7 +138,11 @@ export function behaviorHover(context) {
                 _selection.selectAll(selector)
                     .classed(suppressed ? 'hover-suppressed' : 'hover', true);
 
-                dispatch.call('hover', this, !suppressed && entity.id);
+                if (datum instanceof osmNote) {
+                    dispatch.call('hover', this, !suppressed && entity);
+                } else {
+                    dispatch.call('hover', this, !suppressed && entity.id);
+                }
 
             } else {
                 dispatch.call('hover', this, null);