wip: first shot on merging data browser and features browser
This commit is contained in:
Yohan Boniface
parent
517d3a1a81
commit
b92695dd7f
14 changed files with 268 additions and 370 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 24 KiB |
|
|
@ -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">
|
||||
<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">
|
||||
<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.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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
|
@ -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">
|
||||
<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">
|
||||
<inkscape:grid type="xygrid" id="grid6358" empspacing="4" originx="0" originy="0" />
|
||||
<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="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" 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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
|
@ -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')
|
||||
edit.title = L._('Edit this feature')
|
||||
del.title = L._('Delete this feature')
|
||||
zoom_to.title = translate('Bring feature to center')
|
||||
edit.title = translate('Edit 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),
|
||||
headline = DomUtil.create('h5', '', container),
|
||||
counter = DomUtil.create('span', 'datalayer-counter', headline)
|
||||
const container = DomUtil.create(
|
||||
'div',
|
||||
`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'),
|
||||
counter = parent.querySelector('.datalayer-counter')
|
||||
const container = parent.querySelector('ul')
|
||||
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
|
||||
counter.title = L._('Features in this layer: {count}', { count: count })
|
||||
name.textContent = `${datalayer.options.name} (${count})`
|
||||
}
|
||||
|
||||
onFormChange() {
|
||||
|
|
@ -127,19 +138,14 @@ export default class Browser {
|
|||
// https://github.com/Leaflet/Leaflet/pull/9052
|
||||
DomEvent.disableClickPropagation(container)
|
||||
|
||||
const title = DomUtil.add(
|
||||
'h3',
|
||||
'umap-browse-title',
|
||||
container,
|
||||
this.map.getOption('name')
|
||||
)
|
||||
const title = DomUtil.add('h3', 'umap-browse-title', container, translate('Browse data'))
|
||||
|
||||
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.inBbox', { handler: 'Switch', label: L._('Current map view') }],
|
||||
['options.filter', { handler: 'Input', placeholder: translate('Filter') }],
|
||||
['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')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
84
umap/static/umap/js/modules/orderable.js
Normal file
84
umap/static/umap/js/modules/orderable.js
Normal file
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
options: {
|
||||
position: 'topleft',
|
||||
},
|
||||
|
||||
labels: {
|
||||
zoomToLayer: L._('Zoom to layer extent'),
|
||||
toggleLayer: L._('Show/hide layer'),
|
||||
editLayer: L._('Edit'),
|
||||
},
|
||||
|
||||
L.Control.Button = L.Control.extend({
|
||||
initialize: function (map, options) {
|
||||
this.map = map
|
||||
L.Control.prototype.initialize.call(this, options)
|
||||
},
|
||||
|
||||
_initLayout: function (map) {
|
||||
const container = (this._container = L.DomUtil.create(
|
||||
'div',
|
||||
'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',
|
||||
onAdd: function (map) {
|
||||
const container = L.DomUtil.create('div', `${this.options.className} umap-control`)
|
||||
const button = L.DomUtil.createButton(
|
||||
'',
|
||||
container,
|
||||
L._('See data layers')
|
||||
this.options.title,
|
||||
this.onClick,
|
||||
this
|
||||
)
|
||||
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(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)
|
||||
}
|
||||
|
||||
L.DomEvent.on(button, 'dblclick', L.DomEvent.stopPropagation)
|
||||
return container
|
||||
},
|
||||
})
|
||||
|
||||
onAdd: function (map) {
|
||||
if (!this._container) this._initLayout(map)
|
||||
if (map.options.datalayersControl === 'expanded') this.expand()
|
||||
return this._container
|
||||
U.DataLayersControl = L.Control.Button.extend({
|
||||
options: {
|
||||
position: 'topright',
|
||||
className: 'leaflet-control-browse',
|
||||
title: L._('Show datalayers'),
|
||||
},
|
||||
|
||||
onRemove: function (map) {
|
||||
this.collapse()
|
||||
onClick: function () {
|
||||
this.map.openBrowser()
|
||||
},
|
||||
})
|
||||
|
||||
U.CaptionControl = L.Control.Button.extend({
|
||||
options: {
|
||||
position: 'topright',
|
||||
className: 'leaflet-control-caption',
|
||||
title: L._('About'),
|
||||
},
|
||||
|
||||
update: function () {
|
||||
if (this._datalayers_container && this._map) {
|
||||
this._datalayers_container.innerHTML = ''
|
||||
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' })
|
||||
onClick: function () {
|
||||
if (this.map.editEnabled) this.map.editCaption()
|
||||
else this.map.displayCaption()
|
||||
},
|
||||
})
|
||||
|
||||
|
|
@ -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',
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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) &&
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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' })
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
height: 36px;
|
||||
background-position: -36px -72px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-position: -34px -70px;
|
||||
background-size: 180px;
|
||||
}
|
||||
.leaflet-control-browse .umap-browse-actions {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
line-height: 24px;
|
||||
border-radius: 2px;
|
||||
.leaflet-control-caption [type="button"] {
|
||||
background-position: -70px -70px;
|
||||
}
|
||||
.leaflet-control-browse .umap-browse-datalayers {
|
||||
max-height: 15em;
|
||||
overflow-y: auto;
|
||||
.umap-edit-enabled .leaflet-control-caption [type="button"],
|
||||
.umap-edit-enabled .leaflet-control-browse [type="button"] {
|
||||
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 {
|
||||
float: right;
|
||||
.umap-browse-features ul {
|
||||
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,
|
||||
.leaflet-control-browse .umap-browse-actions .layer-title {
|
||||
.umap-browse-features .feature-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 {
|
||||
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 {
|
||||
a.add-datalayer: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,
|
||||
.leaflet-control-browse .umap-browse-link:hover {
|
||||
a.add-datalayer: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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue