Merge pull request #5243 from openstreetmap/gpx-mvt

Vector Tiles pt 2
openstreetmap · Aug 25, 2018 · 35593c3 · 35593c3
2 parents ec80e44 + 5368aa1
commit 35593c3
Show file tree

Hide file tree

Showing 49 changed files with 1,810 additions and 1,341 deletions.
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
@@ -324,7 +324,7 @@ correspondence with entities:
 * `iD.svgLayers` - sets up a number of layers that ensure that map elements
   appear in an appropriate z-order.
 * `iD.svgOsm` - sets up the OSM-specific data layers
-* `iD.svgGpx` - draws gpx traces
+* `iD.svgData` - draws any other overlaid vector data (gpx, kml, geojson, mvt, pbf)
 * `iD.svgDebug` - draws debugging information
 
 ### Other UI

diff --git a/build_src.js b/build_src.js
@@ -27,7 +27,10 @@ module.exports = function buildSrc() {
                 input: './modules/id.js',
                 plugins: [
                     includePaths( {
-                        paths: ['node_modules/d3/node_modules']  // npm2 or windows
+                        paths: ['node_modules/d3/node_modules'],  // npm2 or windows
+                        include: {
+                            'martinez-polygon-clipping': 'node_modules/martinez-polygon-clipping/dist/martinez.umd.js'
+                        }
                     }),
                     nodeResolve({
                         module: true,

diff --git a/css/20_map.css b/css/20_map.css
@@ -306,63 +306,3 @@ g.turn circle {
     stroke: #68f;
 }
 
-
-/* GPX Paths */
-
-.layer-gpx {
-    pointer-events: none;
-}
-
-path.gpx {
-    stroke: #ff26d4;
-    stroke-width: 2;
-    fill: none;
-}
-
-text.gpxlabel-halo,
-text.gpxlabel {
-    font-size: 10px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-text.gpxlabel {
-    fill: #ff26d4;
-}
-
-text.gpxlabel-halo {
-    opacity: 0.7;
-    stroke: #000;
-    stroke-width: 5px;
-    stroke-miterlimit: 1;
-}
-
-/* MVT Paths */
-
-.layer-mvt {
-    pointer-events: none;
-}
-
-path.mvt {
-    stroke: #ff26d4;
-    stroke-width: 2;
-    fill: none;
-}
-
-text.mvtlabel-halo,
-text.mvtlabel {
-    font-size: 10px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-text.mvtlabel {
-    fill: #ff26d4;
-}
-
-text.mvtlabel-halo {
-    opacity: 0.7;
-    stroke: #000;
-    stroke-width: 5px;
-    stroke-miterlimit: 1;
-}
diff --git a/css/65_data.css b/css/65_data.css
@@ -8,6 +8,7 @@
 }
 .mode-browse .layer-notes .note .note-fill,
 .mode-select .layer-notes .note .note-fill,
+.mode-select-data .layer-notes .note .note-fill,
 .mode-select-note .layer-notes .note .note-fill {
     pointer-events: visible;
     cursor: pointer; /* Opera */
@@ -41,140 +42,76 @@
 .note-header-icon .preset-icon-28 {
     top: 18px;
 }
-
 .note-header-icon .note-icon-annotation {
     position: absolute;
     top: 22px;
     left: 22px;
     margin: auto;
 }
-
 .note-header-icon .note-icon-annotation .icon {
     width: 15px;
     height: 15px;
 }
 
 
-/* OSM Note UI */
-.note-header {
-    background-color: #f6f6f6;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-}
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
 
-.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;
+.layer-mapdata {
+    pointer-events: none;
 }
 
-.note-header-icon .icon-wrap {
-    position: absolute;
-    top: 0px;
+.layer-mapdata path.shadow {
+    pointer-events: stroke;
+    stroke: #f6634f;
+    stroke-width: 16;
+    stroke-opacity: 0;
+    fill: none;
 }
-
-.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;
+.layer-mapdata path.MultiPoint.shadow,
+.layer-mapdata path.Point.shadow {
+    pointer-events: fill;
+    fill: #f6634f;
+    fill-opacity: 0;
 }
-[dir='rtl'] .note-header-label {
-    border-radius: 5px 0 0 5px;
+.layer-mapdata path.shadow.hover:not(.selected) {
+    stroke-opacity: 0.4;
 }
-
-.note-category {
-    margin: 20px 0px;
+.layer-mapdata path.shadow.selected {
+    stroke-opacity: 0.7;
 }
 
-.comments-container {
-    background: #ececec;
-    padding: 1px 10px;
-    border-radius: 8px;
-    margin-top: 20px;
+.layer-mapdata path.stroke {
+    stroke: #ff26d4;
+    stroke-width: 2;
+    fill: none;
 }
 
-.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 10px 10px 0;
-    flex: 1 1 100%;
-    flex-flow: column nowrap;
-    overflow: hidden;
-    overflow-wrap: break-word;
-}
-[dir='rtl'] .comment-main {
-    padding: 10px 0 10px 10px;
+.layer-mapdata path.fill {
+    stroke-width: 0;
+    stroke-opacity: 0.3;
+    stroke: #ff26d4;
+    fill: #ff26d4;
+    fill-opacity: 0.3;
+    fill-rule: evenodd;
 }
 
-.comment-metadata {
-    flex-flow: row nowrap;
-    justify-content: space-between;
-}
-.comment-author {
+.layer-mapdata text.label-halo,
+.layer-mapdata text.label {
+    font-size: 10px;
     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;
+    dominant-baseline: middle;
 }
-
-.note-save {
-    padding: 10px;
+.layer-mapdata text.label {
+    fill: #ff26d4;
 }
-
-.note-save #new-comment-input {
-    width: 100%;
-    height: 100px;
-    max-height: 300px;
-    min-height: 100px;
+.layer-mapdata text.label.hover,
+.layer-mapdata text.label.selected {
+    fill: #f6634f;
 }
-
-.note-save .detail-section {
-    margin: 10px 0;
+.layer-mapdata text.label-halo {
+    opacity: 0.7;
+    stroke: #000;
+    stroke-width: 5px;
+    stroke-miterlimit: 1;
 }
 
-.note-report {
-    float: right;
-}
diff --git a/css/70_fills.css b/css/70_fills.css
@@ -7,6 +7,11 @@
     stroke-dasharray: none !important;
     fill: none !important;
 }
+.low-zoom.fill-wireframe .layer-mapdata path.stroke,
+.fill-wireframe .layer-mapdata path.stroke {
+    stroke-width: 2 !important;
+    stroke-opacity: 1 !important;
+}
 
 .low-zoom.fill-wireframe path.shadow,
 .fill-wireframe path.shadow {