wip: first shot on merging data browser and features browser

umap/static/umap/base.css

@@ -975,6 +975,13 @@ input:invalid {
         right: 0;
         visibility: visible;
     }
+    #umap-ui-container.condensed {
+        margin-top: 10px;
+        margin-right: 10px;
+        max-height: 300px;
+        width: 390px;
+        border-radius: 10px;
+    }
 }
 @media all and (orientation:portrait) {
     #umap-ui-container {

umap/static/umap/img/24-white.svg

@@ -33,7 +33,6 @@
    <path id="rect4058-1-2" d="m2.8498 33.337v0.13229 0.79375 0.13229h0.13229 0.34727l-0.42168 3.7042h-0.45475-0.13229v0.13229 0.79375 0.13229h0.13229 0.79375 0.13229v-0.13229-0.42169s3.6292-2.8856 3.6298-2.8856h0.47129 0.13229v-0.13229-0.79375-0.13229h-0.13229-0.79375-0.13229v0.13229 0.21497l-2.6458-0.95086v-0.58703-0.13229h-0.13229-0.79375zm0.26458 0.26458h0.52917v0.52917h-0.52917zm3.7042 1.3229h0.52917v0.52917h-0.52917zm-4.2333 3.4396h0.52917v0.52917h-0.52917z" color="#000000" style="text-decoration-line:none;text-indent:0;text-transform:none"/>
    <path id="rect4058-1-2-0" d="m4.9168 40.217h-0.92604-0.13229v0.13229 0.79375 0.13229h0.13229 0.79375 0.13229v-0.13229-0.42167l2.6458-0.1819v0.33898 0.13229h0.13229 0.79375 0.13229v-0.13229-0.79375-0.13229h-0.13229-0.30592l-0.64492-2.1167h0.47129 0.13229v-0.13229-0.79375-0.13229h-0.13229-0.79375-0.1819v0.79375s-2.0671 2.6458-2.1167 2.6458zm2.4309-3.175h0.52917v0.52917h-0.52917zm0.47956 3.175h0.52917v0.52917h-0.52917zm-3.7042 0.26458h0.52917v0.52917h-0.52917z" color="#000000" style="text-decoration-line:none;text-indent:0;text-transform:none"/>
   </g>
-  <path id="download" class="sprite" d="m23.812 26.987c1.7535 0 3.175-1.4215 3.175-3.175 0-1.7535-1.4215-3.175-3.175-3.175-1.7535 0-3.175 1.4215-3.175 3.175 0 1.7535 1.4215 3.175 3.175 3.175zm0-1.3229-1.8521-1.8521h1.3229v-1.5875h1.0583v1.5875h1.3229z" fill="#f2f2f2" stroke="#999" stroke-width=".066146"/>
   <g id="multiline" fill="#f2f2f2" stroke="#999" stroke-width=".066146">
    <path id="rect4058-9" d="m11.906 29.898v0.13229 0.79375 0.13229h0.13229 0.79375 0.13229v-0.13229-0.09096l2.6458 1.0583v0.35555 0.11576l0.28939 0.0164h0.63665 0.13229v-0.13229-0.79375-0.13229h-0.13229-0.79375-0.13229v0.13229 0.14883l-2.6458-1.0583v-0.41341-0.13229h-0.13229-0.79375zm0.26458 0.26458h0.52917v0.52917h-0.52917zm3.7042 1.3229h0.52917v0.52917h-0.52917z" color="#000000" style="text-decoration-line:none;text-indent:0;text-transform:none"/>
    <path id="rect4058-9-5" d="m12.989 32.32v0.35555 0.11576l1.8769 2.927h0.63665 0.13229v0.13229 0.79375 0.13229h-0.13229-0.79375-0.13229v-0.13229-0.79375-0.09922l-1.8769-2.9435h-0.63665-0.13229v-0.13229-0.79375-0.13229h0.13229 0.79375 0.13229v0.13229 0.14883zm-0.26458-0.30591h-0.52917v0.52917h0.52917zm2.6458 3.9688h-0.52917v0.52917h0.52917z" color="#000000" style="text-decoration-line:none;text-indent:0;text-transform:none"/>
@@ -58,5 +57,8 @@
    </g>
    <path id="path1286" d="m24.352 6.3088h0.03307v-3.6125h-3.7796v3.6125h0.03307zm-3.9787-4.1591h4.2439c0.06157 0 0.12062 0.024461 0.16417 0.068002s0.068 0.1026 0.068 0.16417v4.2439c0 0.061569-0.02445 0.12062-0.068 0.16417-0.04355 0.04355-0.1026 0.067998-0.16417 0.067998h-4.2439c-0.06158 0-0.12063-0.024447-0.16417-0.067998-0.04354-0.04355-0.068-0.10261-0.068-0.16417v-4.2439c0-0.061577 0.02446-0.12063 0.068-0.16417 0.04354-0.043541 0.1026-0.068002 0.16417-0.068002z" fill="#f2f2f2" stroke="#999" stroke-width=".065719"/>
   </g>
+  <g id="info" transform="matrix(.33073 0 0 .33073 -11.642 -255.84)" stroke-width=".8">
+   <path id="path3762" d="m108 838.36a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 2.5a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5zm-1 4.5h2v6h-2v-6z" fill="#f2f2f2" stroke="#999" stroke-width=".2"/>
+  </g>
  </g>
 </svg>

umap/static/umap/img/24.svg

@@ -12,10 +12,6 @@
    <text id="text4455" x="49.170559" y="964.36218" font-family="sans-serif" letter-spacing="0px" word-spacing="0px" style="line-height:0%" xml:space="preserve"><tspan id="tspan4457" x="49.170559" y="964.36218" fill="#4d4d4d" font-family="sans-serif" font-size="8px" font-weight="bold" style="line-height:1.25">0</tspan></text>
    <text id="text4459" x="65.048965" y="964.36218" font-family="sans-serif" letter-spacing="0px" word-spacing="0px" style="line-height:0%" xml:space="preserve"><tspan id="tspan4461" x="65.048965" y="964.36218" fill="#4d4d4d" font-family="sans-serif" font-size="8px" font-weight="bold" style="line-height:1.25">1</tspan></text>
   </g>
-  <g id="copyleft" class="sprite" transform="matrix(.26458 0 0 .26458 1.5821 -226.06)">
-   <circle id="circle3841" transform="matrix(.020408 0 0 .020408 74 934.36)" cx="490" cy="490" r="440" fill="none" stroke="#4d4d4d" stroke-width="100"/>
-   <path id="path3843" d="m83.918 938.75c-2.6531 0-4.8775 1.8572-5.449 4.3469h2.6735c0.48979-1.0612 1.551-1.7959 2.7755-1.7959 1.6939 0 3.0612 1.3673 3.0612 3.0612 0 1.6938-1.3674 3.0612-3.0612 3.0612-1.2245 0-2.2857-0.73467-2.7755-1.7755h-2.6735c0.57142 2.4694 2.7959 4.3266 5.449 4.3266 3.102 0 5.6122-2.5102 5.6122-5.6122 0-3.1021-2.5102-5.6122-5.6122-5.6122z" fill="#4d4d4d"/>
-  </g>
   <g id="markers" class="sprite" transform="matrix(.26458 0 0 .26458 14.287 -226.05)" fill="#4d4d4d">
    <path id="rect2985" d="m105.25 934.36c-3.1775 0-6.346 2.1278-7.2539 6.3794 0 2.551 1.8067 7.6679 7.2539 13.62 1.4637-1.5994 2.6694-3.1177 3.644-4.5613-1.4505-2.1639-2.415-4.0873-2.9628-5.7095-0.22599 0.041-0.44225 0.063-0.68112 0.063-2.0056 0-3.644-1.5346-3.644-3.413 0-1.8785 1.6384-3.3811 3.644-3.3811 0.51205 0 0.98854 0.076 1.4303 0.2552 0.64347-0.9222 1.4345-1.6571 2.3158-2.169-1.1444-0.7114-2.4463-1.0845-3.7461-1.0845z"/>
    <path id="path3378" d="m111 934.36c-3.0625 0-6.125 2.1277-7 6.383 0 2.5532 1.75 7.6596 7 13.617 5.25-5.9574 7-11.064 7-13.617-0.875-4.2553-3.9375-6.383-7-6.383zm0 2.9788c1.933 0 3.5 1.5241 3.5 3.4042s-1.567 3.4043-3.5 3.4043c-1.933 0-3.5-1.5242-3.5-3.4043s1.567-3.4042 3.5-3.4042z"/>
@@ -86,5 +82,8 @@
    </g>
    <path id="path2378" d="m25.147 1.8521h-4.2439c-0.07035 0-0.13782 0.027946-0.18756 0.077689-0.04974 0.049744-0.07769 0.11721-0.07769 0.18756v4.2439c0 0.070353 0.02795 0.13782 0.07769 0.18756 0.04974 0.049742 0.11721 0.077682 0.18756 0.077682h4.2439c0.07035 0 0.13782-0.02794 0.18756-0.077682 0.04974-0.049742 0.07768-0.11721 0.07768-0.18756v-4.2439c0-0.070349-0.02794-0.13782-0.07768-0.18756-0.04974-0.049743-0.11721-0.077689-0.18756-0.077689zm-0.26524 4.1591h-3.7135v-3.5463h3.7135z" fill="#464646" stroke-width=".26458"/>
   </g>
+  <g id="info" transform="matrix(.33073 0 0 .33073 -11.906 -256.1)" stroke-width=".8">
+   <path id="path3762" d="m108 838.36a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 2.5a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5zm-1 4.5h2v6h-2v-6z" fill="#464646"/>
+  </g>
  </g>
 </svg>

umap/static/umap/img/source/24-white.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
-<svg width="180" height="180" viewBox="0 0 47.624994 47.624994" version="1.1" id="svg2876" inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" sodipodi:docname="24-white.svg" inkscape:export-filename="../24-white.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<svg width="180" height="180" viewBox="0 0 47.624994 47.624994" version="1.1" id="svg2876" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" sodipodi:docname="24-white.svg" inkscape:export-filename="../24-white.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview id="namedview2878" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="8.6832784" inkscape:cx="145.10648" inkscape:cy="121.84338" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
+  <sodipodi:namedview id="namedview2878" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="8.2673128" inkscape:cx="89.509133" inkscape:cy="93.077402" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
     <inkscape:grid type="xygrid" id="grid2997" empspacing="4" originx="0" originy="0" spacingy="0.2645833" spacingx="0.2645833" units="px" visible="true" />
     <sodipodi:guide position="9.525,47.625" orientation="-1,0" id="guide3404" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
     <sodipodi:guide position="0,38.099995" orientation="0,1" id="guide3408" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
@@ -54,7 +54,6 @@
       <path style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.0661458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" d="m 2.8497553,33.337461 v 0.132292 0.79375 0.132292 h 0.132292 0.347266 l -0.42168,3.704166 h -0.454753 -0.132291 v 0.132292 0.79375 0.132292 h 0.132291 0.79375 0.132292 v -0.132292 -0.421693 c 0,0 3.6291619,-2.885599 3.6297519,-2.885599 h 0.47129 0.132291 v -0.132291 -0.79375 -0.132292 h -0.132291 -0.79375 -0.132292 v 0.132292 0.214974 l -2.645833,-0.95086 v -0.587031 -0.132292 h -0.132292 -0.7937499 z m 0.264584,0.264584 h 0.5291659 v 0.529166 h -0.5291659 z m 3.7041659,1.322916 h 0.529167 v 0.529167 h -0.529167 z m -4.2333329,3.439584 h 0.529167 v 0.529166 h -0.529167 z" id="rect4058-1-2" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccc" />
       <path style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.0661458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" d="m 4.9168132,40.216628 h -0.926042 -0.132292 v 0.132292 0.79375 0.132291 h 0.132292 0.79375 0.132292 v -0.132291 -0.421667 l 2.645833,-0.181901 v 0.338984 0.132292 h 0.132292 0.793749 0.132292 v -0.132292 -0.79375 -0.132291 h -0.132292 -0.305924 l -0.644922,-2.116667 h 0.471289 0.132292 v -0.132292 -0.79375 -0.132291 h -0.132292 -0.79375 -0.181901 c 0,0.79375 0,0.79375 0,0.79375 0,0 -2.067057,2.645833 -2.116666,2.645833 z m 2.430859,-3.175 h 0.529167 v 0.529167 h -0.529167 z m 0.479557,3.175 h 0.529167 v 0.529167 h -0.529167 z m -3.704166,0.264583 c 0.529166,0 0,0 0.529166,0 v 0.529167 h -0.529166 z" id="rect4058-1-2-0" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccc" />
     </g>
-    <path style="fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.0661458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 23.812498,26.987496 c 1.753504,0 3.175,-1.4215 3.175,-3.175 0,-1.753499 -1.421496,-3.174999 -3.175,-3.174999 -1.753505,0 -3.175,1.4215 -3.175,3.174999 0,1.7535 1.421495,3.175 3.175,3.175 z m 0,-1.322916 -1.852083,-1.852084 h 1.322916 v -1.587499 h 1.058333 v 1.587499 h 1.322917 z" id="download" class="sprite" />
     <g id="multiline">
       <path inkscape:connector-curvature="0" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.0661458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" d="m 11.906249,29.898045 v 0.132292 0.79375 0.132292 h 0.132291 0.79375 0.132292 v -0.132292 -0.09096 l 2.645832,1.058334 v 0.355547 0.115755 l 0.289388,0.0164 h 0.636654 0.132292 v -0.132292 -0.79375 -0.132291 h -0.132292 -0.79375 -0.132292 v 0.132291 0.148829 l -2.645832,-1.058334 v -0.413411 -0.132292 h -0.132292 -0.79375 z m 0.264583,0.264584 h 0.529167 v 0.529166 h -0.529167 z m 3.704166,1.322916 h 0.529166 v 0.529167 h -0.529166 z" id="rect4058-9" sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccc" />
       <path inkscape:connector-curvature="0" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.0661458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" d="m 12.989387,32.320492 v 0.355547 0.115755 l 1.876888,2.926953 h 0.636653 0.132292 v 0.132292 0.79375 0.132291 h -0.132292 -0.79375 -0.132291 v -0.132291 -0.79375 -0.09922 l -1.876888,-2.94349 h -0.636654 -0.132292 v -0.132291 -0.79375 -0.132292 h 0.132292 0.79375 0.132292 v 0.132292 0.148828 z m -0.264584,-0.305912 h -0.529166 v 0.529167 h 0.529166 z m 2.645834,3.96875 h -0.529167 v 0.529167 h 0.529167 z" id="rect4058-9-5" sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccc" />
@@ -79,5 +78,8 @@
       </g>
       <path d="m 24.352274,6.3088036 h 0.03307 v -0.033073 -3.5463449 -0.033073 h -0.03307 -3.713451 -0.03307 v 0.033073 3.5463449 0.033073 h 0.03307 z m -3.978696,-4.1590643 h 4.24394 c 0.06157,0 0.120624,0.024461 0.164174,0.068002 0.04355,0.043541 0.068,0.102595 0.068,0.1641723 v 4.2439399 c 0,0.061569 -0.02445,0.1206236 -0.068,0.164174 -0.04355,0.04355 -0.102605,0.067998 -0.164174,0.067998 h -4.24394 c -0.06158,0 -0.120631,-0.024447 -0.164172,-0.067998 -0.04354,-0.04355 -0.068,-0.1026054 -0.068,-0.164174 v -4.2439399 c 0,-0.061577 0.02446,-0.1206315 0.068,-0.1641723 0.04354,-0.043541 0.102595,-0.068002 0.164172,-0.068002 z" fill="#f2f2f2" stroke="#999999" stroke-width="0.0657188" id="path1286" />
     </g>
+    <g id="info" transform="matrix(0.33072916,0,0,0.33072916,-11.641666,-255.83957)" style="stroke-width:0.8">
+      <path id="path3762" style="fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.19999998;stroke-opacity:1;stroke-dasharray:none" d="M 107.99999 838.36217 A 8 8 0 0 0 99.999992 846.36217 A 8 8 0 0 0 107.99999 854.36217 A 8 8 0 0 0 115.99999 846.36217 A 8 8 0 0 0 107.99999 838.36217 z M 107.99999 840.86217 A 1.5 1.5 0 0 1 109.49999 842.36217 A 1.5 1.5 0 0 1 107.99999 843.86217 A 1.5 1.5 0 0 1 106.49999 842.36217 A 1.5 1.5 0 0 1 107.99999 840.86217 z M 106.99999 845.36217 L 108.99999 845.36217 L 108.99999 851.36217 L 106.99999 851.36217 L 106.99999 845.36217 z " />
+    </g>
   </g>
 </svg>

umap/static/umap/img/source/24.svg

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
-<svg width="180" height="180" viewBox="0 0 47.624999 47.624999" version="1.1" id="svg6237" inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" sodipodi:docname="24.svg" inkscape:export-filename="../24.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<svg width="180" height="180" viewBox="0 0 47.624999 47.624999" version="1.1" id="svg6237" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" sodipodi:docname="24.svg" inkscape:export-filename="../24.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview id="namedview6239" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="17.994316" inkscape:cx="76.551951" inkscape:cy="18.089045" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
+  <sodipodi:namedview id="namedview6239" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="11.97607" inkscape:cx="98.446318" inkscape:cy="77.696607" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
-    <inkscape:grid type="xygrid" id="grid6358" empspacing="4" originx="0" originy="0" />
+    <inkscape:grid type="xygrid" id="grid6358" empspacing="4" originx="0" originy="0" spacingy="1" spacingx="1" units="px" visible="true" />
     <sodipodi:guide position="9.5249999,47.624999" orientation="-1,0" id="guide6360" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
     <sodipodi:guide position="19.05,47.625" orientation="-1,0" id="guide6362" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
     <sodipodi:guide position="28.574999,47.625" orientation="-1,0" id="guide6364" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
@@ -32,10 +32,6 @@
       <text id="text4455" y="964.36218" x="49.170559" style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none" xml:space="preserve"><tspan style="font-weight:bold;font-size:8px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'Sans Bold';fill:#4d4d4d;fill-opacity:1" y="964.36218" x="49.170559" id="tspan4457" sodipodi:role="line">0</tspan></text>
       <text xml:space="preserve" style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none" x="65.048965" y="964.36218" id="text4459"><tspan sodipodi:role="line" id="tspan4461" x="65.048965" y="964.36218" style="font-weight:bold;font-size:8px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'Sans Bold';fill:#4d4d4d;fill-opacity:1">1</tspan></text>
     </g>
-    <g id="copyleft" transform="matrix(0.26458333,0,0,0.26458333,1.5821002,-226.05539)" class="sprite">
-      <circle transform="matrix(0.02040816,0,0,0.02040816,74,934.36218)" id="circle3841" r="440" cy="490" cx="490" style="fill:none;stroke:#4d4d4d;stroke-width:100;stroke-opacity:1" />
-      <path style="fill:#4d4d4d;fill-opacity:1" id="path3843" d="m 83.918365,938.74993 c -2.653058,0 -4.877549,1.85717 -5.448974,4.34692 h 2.673466 c 0.489792,-1.06125 1.551017,-1.79592 2.775508,-1.79592 1.693875,0 3.061225,1.36734 3.061225,3.06125 0,1.69384 -1.36735,3.06117 -3.061225,3.06117 -1.224491,0 -2.285716,-0.73467 -2.775508,-1.7755 h -2.673466 c 0.571425,2.46942 2.795916,4.32658 5.448974,4.32658 3.102041,0 5.612241,-2.51025 5.612241,-5.61225 0,-3.10208 -2.5102,-5.61225 -5.612241,-5.61225 z" inkscape:connector-curvature="0" />
-    </g>
     <g id="markers" transform="matrix(0.26458333,0,0,0.26458333,14.287499,-226.04994)" class="sprite">
       <path sodipodi:nodetypes="sccccsssccs" inkscape:connector-curvature="0" id="rect2985" d="m 105.25387,934.36268 c -3.17753,0 -6.346004,2.1278 -7.25387,6.3794 0,2.551 1.806672,7.6679 7.25387,13.6201 1.46368,-1.5994 2.66945,-3.1177 3.64397,-4.5613 -1.4505,-2.1639 -2.41497,-4.0873 -2.96285,-5.7095 -0.22599,0.041 -0.44225,0.063 -0.68112,0.063 -2.0056,0 -3.64396,-1.5346 -3.64396,-3.413 0,-1.8785 1.63836,-3.3811 3.64396,-3.3811 0.51205,0 0.98854,0.076 1.43034,0.2552 0.64347,-0.9222 1.4345,-1.6571 2.31579,-2.169 -1.14444,-0.7114 -2.44633,-1.0845 -3.74613,-1.0845 z" style="fill:#4d4d4d;fill-opacity:1;stroke:none" />
       <path id="path3378" d="m 111,934.36218 c -3.0625,0 -6.125,2.1277 -7,6.383 0,2.5532 1.75,7.6596 7,13.617 5.25,-5.9574 7,-11.0638 7,-13.617 -0.875,-4.2553 -3.9375,-6.383 -7,-6.383 z m 0,2.9788 c 1.933,0 3.5,1.5241 3.5,3.4042 0,1.8801 -1.567,3.4043 -3.5,3.4043 -1.93299,0 -3.5,-1.5242 -3.5,-3.4043 0,-1.8801 1.56701,-3.4042 3.5,-3.4042 z" style="fill:#4d4d4d;fill-opacity:1;stroke:none" inkscape:connector-curvature="0" />
@@ -106,5 +102,8 @@
       </g>
       <path d="m 25.146689,1.8520833 h -4.243941 c -0.07035,0 -0.137815,0.027946 -0.187558,0.077689 -0.04974,0.049744 -0.07769,0.1172099 -0.07769,0.1875586 v 4.2439405 c 0,0.070353 0.02795,0.1378215 0.07769,0.1875632 0.04974,0.049742 0.11721,0.077682 0.187558,0.077682 h 4.243941 c 0.07035,0 0.137821,-0.02794 0.187563,-0.077682 0.04974,-0.049742 0.07768,-0.1172105 0.07768,-0.1875632 v -4.2439405 c 0,-0.070349 -0.02794,-0.1378151 -0.07768,-0.1875586 -0.04974,-0.049743 -0.11721,-0.077689 -0.187563,-0.077689 z m -0.265245,4.1590648 h -3.713451 v -3.5463453 h 3.713451 z" fill="#464646" id="path2378" style="stroke-width:0.264583" />
     </g>
+    <g id="info" transform="matrix(0.33072916,0,0,0.33072916,-11.90625,-256.10415)" style="stroke-width:0.8">
+      <path id="path3762" style="fill:#464646;fill-opacity:1;stroke:none;stroke-width:0.8" d="M 108 838.36217 A 8 8 0 0 0 100 846.36217 A 8 8 0 0 0 108 854.36217 A 8 8 0 0 0 116 846.36217 A 8 8 0 0 0 108 838.36217 z M 108 840.86217 A 1.5 1.5 0 0 1 109.5 842.36217 A 1.5 1.5 0 0 1 108 843.86217 A 1.5 1.5 0 0 1 106.5 842.36217 A 1.5 1.5 0 0 1 108 840.86217 z M 107 845.36217 L 109 845.36217 L 109 851.36217 L 107 851.36217 L 107 845.36217 z " />
+    </g>
   </g>
 </svg>

umap/static/umap/js/modules/browser.js

@@ -1,10 +1,13 @@
-// Uses `L._`` from Leaflet.i18n which we cannot import as a module yet
 import { DomUtil, DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js'
+import Orderable from './orderable.js'
+import {translate} from './i18n.js'
 
 export default class Browser {
   constructor(map) {
     this.map = map
     this.map.on('moveend', this.onMoveEnd, this)
+    this.map.on('edit:enabled', this.onEnableEdit, this)
+    this.map.on('edit:disabled', this.onDisableEdit, this)
     this.options = {
       filter: '',
       inBbox: false,
@@ -24,9 +27,9 @@ export default class Browser {
       symbol = feature._getIconUrl
         ? U.Icon.prototype.formatUrl(feature._getIconUrl(), feature)
         : null
-    zoom_to.title = L._('Bring feature to center')
+    zoom_to.title = translate('Bring feature to center')
-    edit.title = L._('Edit this feature')
+    edit.title = translate('Edit this feature')
-    del.title = L._('Delete this feature')
+    del.title = translate('Delete this feature')
     title.textContent = feature.getDisplayName() || '—'
     const bgcolor = feature.getDynamicOption('color')
     colorBox.style.backgroundColor = bgcolor
@@ -69,18 +72,20 @@ export default class Browser {
   }
 
   addDataLayer(datalayer, parent) {
-    const container = DomUtil.create('div', datalayer.getHidableClass(), parent),
+    const container = DomUtil.create(
-      headline = DomUtil.create('h5', '', container),
+        'div',
-      counter = DomUtil.create('span', 'datalayer-counter', headline)
+        `orderable ${datalayer.getHidableClass()}`,
+        parent
+      ),
+      headline = DomUtil.create('h5', '', container)
     container.id = this.datalayerId(datalayer)
-    datalayer.renderToolbox(headline)
-    DomUtil.add('span', '', headline, datalayer.options.name)
     const ul = DomUtil.create('ul', '', container)
     this.updateDatalayer(datalayer)
     datalayer.on('datachanged', this.onDataLayerChanged, this)
     this.map.ui.once('panel:closed', () => {
       datalayer.off('datachanged', this.onDataLayerChanged, this)
     })
+    container.dataset.id = L.stamp(datalayer)
   }
 
   updateDatalayer(datalayer) {
@@ -90,16 +95,22 @@ export default class Browser {
     // Panel is not open
     if (!parent) return
     DomUtil.classIf(parent, 'off', !datalayer.isVisible())
-    const container = parent.querySelector('ul'),
+    const container = parent.querySelector('ul')
-      counter = parent.querySelector('.datalayer-counter')
+    const headline = parent.querySelector('h5')
+    const toggleList = () => parent.classList.toggle('show-list')
+    headline.innerHTML = ''
+    const toggle = DomUtil.create('i', 'datalayer-toggle-list', headline)
+    DomEvent.on(toggle, 'click', toggleList)
+    datalayer.renderToolbox(headline)
+    const name = DomUtil.create('span', 'datalayer-name', headline)
+    DomEvent.on(name, 'click', toggleList)
     container.innerHTML = ''
     datalayer.eachFeature((feature) => this.addFeature(feature, container))
 
     let total = datalayer.count(),
       current = container.querySelectorAll('li').length,
       count = total == current ? total : `${current}/${total}`
-    counter.textContent = count
+    name.textContent = `${datalayer.options.name} (${count})`
-    counter.title = L._('Features in this layer: {count}', { count: count })
   }
 
   onFormChange() {
@@ -127,19 +138,14 @@ export default class Browser {
     // https://github.com/Leaflet/Leaflet/pull/9052
     DomEvent.disableClickPropagation(container)
 
-    const title = DomUtil.add(
+    const title = DomUtil.add('h3', 'umap-browse-title', container, translate('Browse data'))
-      'h3',
-      'umap-browse-title',
-      container,
-      this.map.getOption('name')
-    )
 
     const formContainer = DomUtil.create('div', '', container)
     const dataContainer = DomUtil.create('div', 'umap-browse-features', container)
 
     const fields = [
-      ['options.filter', { handler: 'Input', placeholder: L._('Filter') }],
+      ['options.filter', { handler: 'Input', placeholder: translate('Filter') }],
-      ['options.inBbox', { handler: 'Switch', label: L._('Current map view') }],
+      ['options.inBbox', { handler: 'Switch', label: translate('Current map view') }],
     ]
     const builder = new U.FormBuilder(this, fields, {
       makeDirty: false,
@@ -150,10 +156,36 @@ export default class Browser {
     this.map.ui.openPanel({
       data: { html: container },
       actions: [this.map._aboutLink()],
+      className: 'condensed'
     })
 
     this.map.eachBrowsableDataLayer((datalayer) => {
       this.addDataLayer(datalayer, dataContainer)
     })
+    // After datalayers have been added.
+    const orderable = new Orderable(dataContainer, L.bind(this.onReorder, this))
+  }
+
+  onReorder(src, dst, initialIndex, finalIndex) {
+    const layer = this.map.datalayers[src.dataset.id],
+      other = this.map.datalayers[dst.dataset.id],
+      minIndex = Math.min(layer.getRank(), other.getRank()),
+      maxIndex = Math.max(layer.getRank(), other.getRank())
+    if (finalIndex === 0) layer.bringToTop()
+    else if (finalIndex > initialIndex) layer.insertBefore(other)
+    else layer.insertAfter(other)
+    this.map.eachDataLayerReverse((datalayer) => {
+      if (datalayer.getRank() >= minIndex && datalayer.getRank() <= maxIndex)
+        datalayer.isDirty = true
+    })
+    this.map.indexDatalayers()
+  }
+
+  onEnableEdit () {
+    this.map.ui._panel.classList.add('dark')
+  }
+
+  onDisableEdit () {
+    this.map.ui._panel.classList.remove('dark')
   }
 }

umap/static/umap/js/modules/orderable.js

@@ -0,0 +1,84 @@
+import { DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js'
+
+export default class Orderable {
+  constructor(parent, onDrop, selector = '.orderable') {
+    this.parent = parent
+    this.onCommit = onDrop
+    this.src = null
+    this.dst = null
+    this.els = this.parent.querySelectorAll(selector)
+    for (let i = 0; i < this.els.length; i++) this.makeDraggable(this.els[i])
+  }
+
+  makeDraggable(node) {
+    node.draggable = true
+    DomEvent.on(node, 'dragstart', this.onDragStart, this)
+    DomEvent.on(node, 'dragenter', this.onDragEnter, this)
+    DomEvent.on(node, 'dragover', this.onDragOver, this)
+    DomEvent.on(node, 'dragleave', this.onDragLeave, this)
+    DomEvent.on(node, 'drop', this.onDrop, this)
+    DomEvent.on(node, 'dragend', this.onDragEnd, this)
+  }
+
+  nodeIndex(node) {
+    return Array.prototype.indexOf.call(this.parent.children, node)
+  }
+
+  findTarget(node) {
+    while (node) {
+      if (this.nodeIndex(node) !== -1) return node
+      node = node.parentNode
+    }
+  }
+
+  onDragStart(e) {
+    // e.target is the source node.
+    const realSrc = document.elementFromPoint(e.clientX, e.clientY);
+    // Only allow drag from the handle
+    if (!realSrc.classList.contains('drag-handle')) {
+      e.preventDefault()
+      return
+    }
+    this.src = e.target
+    this.initialIndex = this.nodeIndex(this.src)
+    this.src.classList.add('ordering')
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/html', this.src.innerHTML)
+  }
+
+  onDragOver(e) {
+    DomEvent.stop(e)
+    if (e.preventDefault) e.preventDefault() // Necessary. Allows us to drop.
+    e.dataTransfer.dropEffect = 'move'
+    return false
+  }
+
+  onDragEnter(e) {
+    DomEvent.stop(e)
+    // e.target is the current hover target.
+    const dst = this.findTarget(e.target)
+    if (!dst || dst === this.src) return
+    this.dst = dst
+    const targetIndex = this.nodeIndex(this.dst),
+      srcIndex = this.nodeIndex(this.src)
+    if (targetIndex > srcIndex) this.parent.insertBefore(this.dst, this.src)
+    else this.parent.insertBefore(this.src, this.dst)
+  }
+
+  onDragLeave(e) {
+    // e.target is previous target element.
+  }
+
+  onDrop(e) {
+    // e.target is current target element.
+    if (e.stopPropagation) e.stopPropagation() // Stops the browser from redirecting.
+    if (!this.dst) return
+    this.onCommit(this.src, this.dst, this.initialIndex, this.nodeIndex(this.src))
+    return false
+  }
+
+  onDragEnd(e) {
+    // e.target is the source node.
+    this.src.classList.remove('ordering')
+  }
+}

umap/static/umap/js/modules/schema.js

@@ -372,6 +372,11 @@ export const SCHEMA = {
     impacts: ['ui'],
     label: translate('Allow scroll wheel zoom?'),
   },
+  captionControl: {
+    type: Boolean,
+    label: translate('Display the caption control'),
+    default: true,
+  },
   searchControl: {
     type: Boolean,
     impacts: ['ui'],

umap/static/umap/js/umap.controls.js

@@ -53,17 +53,6 @@ U.ChangeTileLayerAction = U.BaseAction.extend({
   },
 })
 
-U.ManageDatalayersAction = U.BaseAction.extend({
-  options: {
-    className: 'dark manage-datalayers',
-    tooltip: L._('Manage layers'),
-  },
-
-  addHooks: function () {
-    this.map.manageDatalayers()
-  },
-})
-
 U.UpdateExtentAction = U.BaseAction.extend({
   options: {
     className: 'update-map-extent dark',
@@ -488,174 +477,48 @@ U.PermanentCreditsControl = L.Control.extend({
   },
 })
 
-U.DataLayersControl = L.Control.extend({
+L.Control.Button = L.Control.extend({
-  options: {
-    position: 'topleft',
-  },
-
-  labels: {
-    zoomToLayer: L._('Zoom to layer extent'),
-    toggleLayer: L._('Show/hide layer'),
-    editLayer: L._('Edit'),
-  },
-
   initialize: function (map, options) {
     this.map = map
     L.Control.prototype.initialize.call(this, options)
   },
 
-  _initLayout: function (map) {
+  onAdd: function (map) {
-    const container = (this._container = L.DomUtil.create(
+    const container = L.DomUtil.create('div', `${this.options.className} umap-control`)
-        'div',
+    const button = L.DomUtil.createButton(
-        'leaflet-control-browse umap-control'
+      '',
-      )),
-      actions = L.DomUtil.create('div', 'umap-browse-actions', container)
-    this._datalayers_container = L.DomUtil.create(
-      'ul',
-      'umap-browse-datalayers',
-      actions
-    )
-
-    L.DomUtil.createButton(
-      'umap-browse-link',
-      actions,
-      L._('Browse data'),
-      map.openBrowser,
-      map
-    )
-
-    const toggleButton = L.DomUtil.createButton(
-      'umap-browse-toggle',
       container,
-      L._('See data layers')
+      this.options.title,
-    )
+      this.onClick,
-    L.DomEvent.on(toggleButton, 'click', L.DomEvent.stop)
-
-    map.whenReady(function () {
-      this.update()
-    }, this)
-
-    if (L.Browser.pointer) {
-      L.DomEvent.disableClickPropagation(container)
-      L.DomEvent.on(container, 'wheel', L.DomEvent.stopPropagation)
-      L.DomEvent.on(container, 'MozMousePixelScroll', L.DomEvent.stopPropagation)
-    }
-    if (!L.Browser.touch) {
-      L.DomEvent.on(
-        container,
-        {
-          mouseenter: this.expand,
-          mouseleave: this.collapse,
-        },
       this
     )
-    } else {
+    L.DomEvent.on(button, 'dblclick', L.DomEvent.stopPropagation)
-      L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation)
-      L.DomEvent.on(toggleButton, 'click', L.DomEvent.stop).on(
-        toggleButton,
-        'click',
-        this.expand,
-        this
-      )
-      map.on('click', this.collapse, this)
-    }
-
     return container
   },
+})
 
-  onAdd: function (map) {
+U.DataLayersControl = L.Control.Button.extend({
-    if (!this._container) this._initLayout(map)
+  options: {
-    if (map.options.datalayersControl === 'expanded') this.expand()
+    position: 'topright',
-    return this._container
+    className: 'leaflet-control-browse',
+    title: L._('Show datalayers'),
   },
 
-  onRemove: function (map) {
+  onClick: function () {
-    this.collapse()
+    this.map.openBrowser()
+  },
+})
+
+U.CaptionControl = L.Control.Button.extend({
+  options: {
+    position: 'topright',
+    className: 'leaflet-control-caption',
+    title: L._('About'),
   },
 
-  update: function () {
+  onClick: function () {
-    if (this._datalayers_container && this._map) {
+    if (this.map.editEnabled) this.map.editCaption()
-      this._datalayers_container.innerHTML = ''
+    else this.map.displayCaption()
-      this.map.eachDataLayerReverse(function (datalayer) {
-        this.addDataLayer(this._datalayers_container, datalayer)
-      }, this)
-    }
-  },
-
-  expand: function () {
-    L.DomUtil.addClass(this._container, 'expanded')
-  },
-
-  collapse: function () {
-    if (this.map.options.datalayersControl === 'expanded') return
-    L.DomUtil.removeClass(this._container, 'expanded')
-  },
-
-  addDataLayer: function (container, datalayer, draggable) {
-    const datalayerLi = L.DomUtil.create('li', '', container)
-    if (draggable)
-      L.DomUtil.element(
-        'i',
-        { className: 'drag-handle', title: L._('Drag to reorder') },
-        datalayerLi
-      )
-    datalayer.renderToolbox(datalayerLi)
-    const title = L.DomUtil.add(
-      'span',
-      'layer-title',
-      datalayerLi,
-      datalayer.options.name
-    )
-
-    datalayerLi.id = `browse_data_toggle_${L.stamp(datalayer)}`
-    L.DomUtil.classIf(datalayerLi, 'off', !datalayer.isVisible())
-
-    title.textContent = datalayer.options.name
-  },
-
-  newDataLayer: function () {
-    const datalayer = this.map.createDataLayer({})
-    datalayer.edit()
-  },
-
-  openPanel: function () {
-    if (!this.map.editEnabled) return
-    const container = L.DomUtil.create('ul', 'umap-browse-datalayers')
-    const title = L.DomUtil.create('h3', '', container)
-    title.textContent = L._('Manage layers')
-    this.map.eachDataLayerReverse(function (datalayer) {
-      this.addDataLayer(container, datalayer, true)
-    }, this)
-    const orderable = new U.Orderable(container)
-    orderable.on(
-      'drop',
-      function (e) {
-        const layer = this.map.datalayers[e.src.dataset.id],
-          other = this.map.datalayers[e.dst.dataset.id],
-          minIndex = Math.min(layer.getRank(), other.getRank()),
-          maxIndex = Math.max(layer.getRank(), other.getRank())
-        if (e.finalIndex === 0) layer.bringToTop()
-        else if (e.finalIndex > e.initialIndex) layer.insertBefore(other)
-        else layer.insertAfter(other)
-        this.map.eachDataLayerReverse((datalayer) => {
-          if (datalayer.getRank() >= minIndex && datalayer.getRank() <= maxIndex)
-            datalayer.isDirty = true
-        })
-        this.map.indexDatalayers()
-      },
-      this
-    )
-
-    const bar = L.DomUtil.create('div', 'button-bar', container)
-    L.DomUtil.createButton(
-      'show-on-edit block add-datalayer button',
-      bar,
-      L._('Add a layer'),
-      this.newDataLayer,
-      this
-    )
-
-    this.map.ui.openPanel({ data: { html: container }, className: 'dark' })
   },
 })
 
@@ -667,6 +530,11 @@ U.DataLayer.include({
   },
 
   renderToolbox: function (container) {
+    L.DomUtil.element(
+      'i',
+      { className: 'drag-handle', title: L._('Drag to reorder') },
+      container
+    )
     const toggle = L.DomUtil.create('i', 'layer-toggle', container),
       zoomTo = L.DomUtil.create('i', 'layer-zoom_to', container),
       edit = L.DomUtil.create('i', 'layer-edit show-on-edit', container),
@@ -698,7 +566,6 @@ U.DataLayer.include({
     L.DomEvent.on(zoomTo, 'click', this.zoomTo, this)
     L.DomUtil.addClass(container, this.getHidableClass())
     L.DomUtil.classIf(container, 'off', !this.isVisible())
-    container.dataset.id = L.stamp(this)
   },
 
   getHidableElements: function () {
@@ -748,7 +615,6 @@ const ControlsMixin = {
     'locate',
     'measure',
     'editinosm',
-    'datalayers',
     'star',
     'tilelayers',
   ],

umap/static/umap/js/umap.core.js

@@ -531,94 +531,6 @@ U.Help = L.Class.extend({
   ),
 })
 
-U.Orderable = L.Evented.extend({
-  options: {
-    selector: 'li',
-    color: '#374E75',
-  },
-
-  initialize: function (parent, options) {
-    L.Util.setOptions(this, options)
-    this.parent = parent
-    this.src = null
-    this.dst = null
-    this.els = this.parent.querySelectorAll(this.options.selector)
-    for (let i = 0; i < this.els.length; i++) this.makeDraggable(this.els[i])
-  },
-
-  makeDraggable: function (node) {
-    node.draggable = true
-    L.DomEvent.on(node, 'dragstart', this.onDragStart, this)
-    L.DomEvent.on(node, 'dragenter', this.onDragEnter, this)
-    L.DomEvent.on(node, 'dragover', this.onDragOver, this)
-    L.DomEvent.on(node, 'dragleave', this.onDragLeave, this)
-    L.DomEvent.on(node, 'drop', this.onDrop, this)
-    L.DomEvent.on(node, 'dragend', this.onDragEnd, this)
-  },
-
-  nodeIndex: function (node) {
-    return Array.prototype.indexOf.call(this.parent.children, node)
-  },
-
-  findTarget: function (node) {
-    while (node) {
-      if (this.nodeIndex(node) !== -1) return node
-      node = node.parentNode
-    }
-  },
-
-  onDragStart: function (e) {
-    // e.target is the source node.
-    this.src = e.target
-    this.initialIndex = this.nodeIndex(this.src)
-    this.srcBackgroundColor = this.src.style.backgroundColor
-    this.src.style.backgroundColor = this.options.color
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/html', this.src.innerHTML)
-  },
-
-  onDragOver: function (e) {
-    L.DomEvent.stop(e)
-    if (e.preventDefault) e.preventDefault() // Necessary. Allows us to drop.
-    e.dataTransfer.dropEffect = 'move'
-    return false
-  },
-
-  onDragEnter: function (e) {
-    L.DomEvent.stop(e)
-    // e.target is the current hover target.
-    const dst = this.findTarget(e.target)
-    if (!dst || dst === this.src) return
-    this.dst = dst
-    const targetIndex = this.nodeIndex(this.dst),
-      srcIndex = this.nodeIndex(this.src)
-    if (targetIndex > srcIndex) this.parent.insertBefore(this.dst, this.src)
-    else this.parent.insertBefore(this.src, this.dst)
-  },
-
-  onDragLeave: function (e) {
-    // e.target is previous target element.
-  },
-
-  onDrop: function (e) {
-    // e.target is current target element.
-    if (e.stopPropagation) e.stopPropagation() // Stops the browser from redirecting.
-    if (!this.dst) return
-    this.fire('drop', {
-      src: this.src,
-      initialIndex: this.initialIndex,
-      finalIndex: this.nodeIndex(this.src),
-      dst: this.dst,
-    })
-    return false
-  },
-
-  onDragEnd: function (e) {
-    // e.target is the source node.
-    this.src.style.backgroundColor = this.srcBackgroundColor
-  },
-})
-
 L.LatLng.prototype.isValid = function () {
   return (
     isFinite(this.lat) &&

umap/static/umap/js/umap.forms.js

@@ -1009,9 +1009,6 @@ U.FormBuilder = L.FormBuilder.extend({
           case 'iconUrl':
             schema.handler = 'IconUrl'
             break
-          case 'datalayersControl':
-            schema.handler = 'DataLayersControl'
-            break
           case 'licence':
             schema.handler = 'LicenceChooser'
             break

umap/static/umap/js/umap.js

@@ -140,6 +140,9 @@ U.Map = L.Map.extend({
       }
       delete this.options.displayDataBrowserOnLoad
     }
+    if (this.options.datalayersControl === 'expanded') {
+      this.options.onLoadPanel = 'databrowser'
+    }
 
     this.ui.on(
       'panel:closed',
@@ -302,7 +305,7 @@ U.Map = L.Map.extend({
     // Specific case for datalayersControl
     // which accepts "expanded" value, on top of true/false/null
     if (L.Util.queryString('datalayersControl') === 'expanded') {
-      L.Util.setFromQueryString(options, 'datalayersControl')
+      options.datalayersControl = 'expanded'
     }
   },
 
@@ -326,7 +329,6 @@ U.Map = L.Map.extend({
       const editActions = [
         U.ImportAction,
         U.EditPropertiesAction,
-        U.ManageDatalayersAction,
         U.ChangeTileLayerAction,
         U.UpdateExtentAction,
         U.UpdatePermsAction,
@@ -338,6 +340,7 @@ U.Map = L.Map.extend({
       zoomOutTitle: L._('Zoom out'),
     })
     this._controls.datalayers = new U.DataLayersControl(this)
+    this._controls.caption = new U.CaptionControl(this)
     this._controls.locate = new U.Locate(this, {
       strings: {
         title: L._('Center map on your location'),
@@ -427,6 +430,8 @@ U.Map = L.Map.extend({
         L.DomUtil.addClass(control._container, 'display-on-more')
       else L.DomUtil.removeClass(control._container, 'display-on-more')
     }
+    if (this.getOption('datalayersControl')) this._controls.datalayers.addTo(this)
+    if (this.getOption('captionControl')) this._controls.caption.addTo(this)
     if (this.getOption('permanentCredit')) this._controls.permanentCredit.addTo(this)
     if (this.getOption('moreControl')) this._controls.more.addTo(this)
     if (this.getOption('scaleControl')) this._controls.scale.addTo(this)
@@ -460,7 +465,6 @@ U.Map = L.Map.extend({
       if (!pane.dataset || !pane.dataset.id) continue
       this.datalayers_index.push(this.datalayers[pane.dataset.id])
     }
-    this.updateDatalayersControl()
   },
 
   ensurePanesOrder: function () {
@@ -489,10 +493,6 @@ U.Map = L.Map.extend({
     return this
   },
 
-  updateDatalayersControl: function () {
-    if (this._controls.datalayers) this._controls.datalayers.update()
-  },
-
   backupOptions: function () {
     this._backupOptions = L.extend({}, this.options)
     this._backupOptions.tilelayer = L.extend({}, this.options.tilelayer)
@@ -951,7 +951,6 @@ U.Map = L.Map.extend({
     })
     this.ensurePanesOrder()
     this.dirty_datalayers = []
-    this.updateDatalayersControl()
     this.initTileLayers()
     this.isDirty = false
   },
@@ -1157,6 +1156,7 @@ U.Map = L.Map.extend({
       UIFields.push(`options.${this.HIDDABLE_CONTROLS[i]}Control`)
     }
     UIFields = UIFields.concat([
+      'options.datalayersControl',
       'options.moreControl',
       'options.scrollWheelZoom',
       'options.miniMap',
@@ -1459,19 +1459,6 @@ U.Map = L.Map.extend({
     slideshow.appendChild(slideshowBuilder.build())
   },
 
-  _editCredits: function (container) {
-    const credits = L.DomUtil.createFieldset(container, L._('Credits'))
-    const creditsFields = [
-      'options.licence',
-      'options.shortCredit',
-      'options.longCredit',
-      'options.permanentCredit',
-      'options.permanentCreditBackground',
-    ]
-    const creditsBuilder = new U.FormBuilder(this, creditsFields)
-    credits.appendChild(creditsBuilder.build())
-  },
-
   _advancedActions: function (container) {
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
@@ -1514,18 +1501,39 @@ U.Map = L.Map.extend({
     )
   },
 
-  edit: function () {
+  editCaption: function () {
     if (!this.editEnabled) return
     if (this.options.editMode !== 'advanced') return
     const container = L.DomUtil.create('div', 'umap-edit-container'),
       metadataFields = ['options.name', 'options.description'],
       title = L.DomUtil.create('h3', '', container)
-    title.textContent = L._('Edit map properties')
+    title.textContent = L._('Edit map details')
     const builder = new U.FormBuilder(this, metadataFields, {
       className: 'map-metadata',
     })
     const form = builder.build()
     container.appendChild(form)
+
+    const credits = L.DomUtil.createFieldset(container, L._('Credits'))
+    const creditsFields = [
+      'options.licence',
+      'options.shortCredit',
+      'options.longCredit',
+      'options.permanentCredit',
+      'options.permanentCreditBackground',
+    ]
+    const creditsBuilder = new U.FormBuilder(this, creditsFields)
+    credits.appendChild(creditsBuilder.build())
+    this.ui.openPanel({ data: { html: container }, className: 'dark' })
+
+  },
+
+  edit: function () {
+    if (!this.editEnabled) return
+    if (this.options.editMode !== 'advanced') return
+    const container = L.DomUtil.create('div', 'umap-edit-container')
+      title = L.DomUtil.create('h3', '', container)
+    title.textContent = L._('Edit map properties')
     this._editControls(container)
     this._editShapeProperties(container)
     this._editDefaultProperties(container)
@@ -1534,7 +1542,6 @@ U.Map = L.Map.extend({
     this._editOverlay(container)
     this._editBounds(container)
     this._editSlideshow(container)
-    this._editCredits(container)
     this._advancedActions(container)
 
     this.ui.openPanel({ data: { html: container }, className: 'dark' })

umap/static/umap/js/umap.layer.js

@@ -845,7 +845,6 @@ U.DataLayer = L.Evented.extend({
       if (L.Util.indexOf(this.map.datalayers_index, this) === -1)
         this.map.datalayers_index.push(this)
     }
-    this.map.updateDatalayersControl()
   },
 
   _dataUrl: function () {
@@ -1153,7 +1152,6 @@ U.DataLayer = L.Evented.extend({
     delete this.map.datalayers[L.stamp(this)]
     this.map.datalayers_index.splice(this.getRank(), 1)
     this.parentPane.removeChild(this.pane)
-    this.map.updateDatalayersControl()
     this.fire('erase')
     this._leaflet_events_bk = this._leaflet_events
     this.map.off('moveend', this.onMoveEnd, this)

umap/static/umap/map.css

@@ -841,23 +841,21 @@ ul.photon-autocomplete {
 /*   Datalayers Control              */
 /* ********************************* */
 
-.leaflet-control-browse .umap-browse-toggle {
+.leaflet-control-caption [type="button"],
+.leaflet-control-browse [type="button"] {
     background-image: url('./img/24.svg');
-    width: 36px;
+    width: 40px;
-    height: 36px;
+    height: 40px;
-    background-position: -36px -72px;
+    background-position: -34px -70px;
     background-size: 180px;
 }
-.leaflet-control-browse .umap-browse-actions {
+.leaflet-control-caption [type="button"] {
-    background-color: #fff;
+    background-position: -70px -70px;
-    padding: 10px;
-    display: none;
-    line-height: 24px;
-    border-radius: 2px;
 }
-.leaflet-control-browse .umap-browse-datalayers {
+.umap-edit-enabled .leaflet-control-caption [type="button"],
-    max-height: 15em;
+.umap-edit-enabled .leaflet-control-browse [type="button"] {
-    overflow-y: auto;
+    background-image: url('./img/24-white.svg');
+    background-color: var(--color-darkGray);
 }
 .search-result-tools i,
 .leaflet-inplace-toolbar a,
@@ -876,11 +874,20 @@ ul.photon-autocomplete {
 .dark .umap-browse-datalayers i {
     background-image: url('./img/16-white.svg');
 }
-.umap-browse-datalayers li[draggable] .drag-handle {
+.umap-browse-features ul {
-    float: right;
+    display: none;
+}
+.show-list ul {
+    display: initial;
+}
+[draggable] .drag-handle {
+    display: none;
+}
+.umap-edit-enabled [draggable] .drag-handle {
     background-position: -72px -72px;
     margin-right: 5px;
     cursor: move;
+    display: initial;
 }
 .leaflet-inplace-toolbar a {
     background-image: url('./img/16-white.svg');
@@ -892,9 +899,6 @@ ul.photon-autocomplete {
 .leaflet-inplace-toolbar a:hover {
     background-color: #353c3e!important;
 }
-.leaflet-control-browse .umap-browse-datalayers .off i {
-    cursor: inherit;
-}
 .layer-toggle {
     background-position: -49px -31px;
 }
@@ -958,8 +962,7 @@ ul.photon-autocomplete {
 .umap-extract-shape-from-multi{
     background-position: -119px 2px;
 }
-.umap-browse-features .feature-title,
+.umap-browse-features .feature-title {
-.leaflet-control-browse .umap-browse-actions .layer-title {
     width: inherit;
     cursor: inherit;
     padding-left: 6px;
@@ -968,32 +971,7 @@ ul.photon-autocomplete {
     font-size: 12px;
     cursor: pointer;
 }
-.leaflet-control-browse .umap-browse-actions .off .layer-title {
+a.add-datalayer:before {
-    color: rgb(179, 179, 179);
-}
-.leaflet-control-browse.expanded > a,
-.leaflet-control-browse.expanded > button {
-    display: none;
-}
-.leaflet-control-browse.expanded .umap-browse-actions {
-    display: block;
-}
-.leaflet-control-browse .umap-browse-link {
-    background-image: none;
-    background-color: rgb(68, 68, 68);
-    color: white;
-    display: block;
-    height: 24px;
-    line-height: 24px;
-    margin-top: 14px;
-    padding: 0 5px;
-    text-align: right;
-    min-width: 160px;
-    width: 100%;
-    border-radius: 2px;
-}
-a.add-datalayer:before,
-.leaflet-control-browse .umap-browse-link:before {
     background-image: url('./img/16.svg');
     background-repeat: no-repeat;
     background-position: -45px -96px;
@@ -1006,8 +984,7 @@ a.add-datalayer:before,
 a.add-datalayer:before {
     background-position: -20px -20px;
 }
-a.add-datalayer:hover,
+a.add-datalayer:hover {
-.leaflet-control-browse .umap-browse-link:hover {
     background-color: rgb(99, 99, 99);
 }
 .umap-browse-data .off .feature {
@@ -1031,9 +1008,13 @@ a.add-datalayer:hover,
     padding-left: 5px;
     height: 30px;
     line-height: 30px;
-    background-color: #eeeee0;
+    background-color: var(--color-lightGray);
     color: #666;
 }
+.dark .umap-browse-features h5 {
+    background-color: initial;
+    color: white;
+}
 .umap-browse-features h5 span {
     margin-left: 10px;
 }
@@ -1095,9 +1076,16 @@ a.add-datalayer:hover,
     font-size: 0.9em;
     margin-bottom: 14px;
 }
-.datalayer-counter {
+.datalayer-toggle-list {
     float: right;
     margin-right: 5px;
+    background-position: -145px -70px;
+}
+.show-list .datalayer-toggle-list {
+    background-position: -145px -45px;
+}
+.datalayer-name {
+    cursor: pointer;
 }