forked from MapComplete/MapComplete
Add a little hand, inviting the user to drag location inputs
This commit is contained in:
parent
bbee0bce5d
commit
6dcc710cc2
4 changed files with 101 additions and 71 deletions
|
|
@ -11,6 +11,7 @@ import {GeoOperations} from "../../Logic/GeoOperations";
|
|||
import ShowDataLayer from "../ShowDataLayer";
|
||||
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
|
||||
import * as L from "leaflet";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
|
||||
export default class LocationInput extends InputElement<Loc> {
|
||||
|
||||
|
|
@ -128,7 +129,7 @@ export default class LocationInput extends InputElement<Loc> {
|
|||
})
|
||||
|
||||
}
|
||||
this.mapBackground = options.mapBackground ?? State.state.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto)
|
||||
this.mapBackground = options.mapBackground ?? State.state?.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto)
|
||||
this.SetClass("block h-full")
|
||||
}
|
||||
|
||||
|
|
@ -147,7 +148,7 @@ export default class LocationInput extends InputElement<Loc> {
|
|||
{
|
||||
location: this._centerLocation,
|
||||
background: this.mapBackground,
|
||||
attribution: this.mapBackground !== State.state.backgroundLayer,
|
||||
attribution: this.mapBackground !== State.state?.backgroundLayer,
|
||||
lastClickLocation: clickLocation
|
||||
}
|
||||
)
|
||||
|
|
@ -219,7 +220,6 @@ export default class LocationInput extends InputElement<Loc> {
|
|||
)
|
||||
}
|
||||
}
|
||||
|
||||
this.mapBackground.map(layer => {
|
||||
const leaflet = map.leafletMap.data
|
||||
if (leaflet === undefined || layer === undefined) {
|
||||
|
|
@ -231,20 +231,31 @@ export default class LocationInput extends InputElement<Loc> {
|
|||
leaflet.setZoom(layer.max_zoom - 1)
|
||||
|
||||
}, [map.leafletMap])
|
||||
|
||||
const animatedHand = Svg.hand_ui()
|
||||
.SetStyle("width: 2rem; height: unset;")
|
||||
.SetClass("hand-drag-animation block pointer-events-none")
|
||||
|
||||
return new Combine([
|
||||
new Combine([
|
||||
Svg.move_arrows_ui()
|
||||
.SetClass("block relative pointer-events-none")
|
||||
.SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem")
|
||||
]).SetClass("block w-0 h-0 z-10 relative")
|
||||
.SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%"),
|
||||
.SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%; opacity: 0.5"),
|
||||
|
||||
new Combine([
|
||||
animatedHand])
|
||||
.SetClass("block w-0 h-0 z-10 relative")
|
||||
.SetStyle("left: calc(50% + 3rem); top: calc(50% + 2rem); opacity: 0.7"),
|
||||
|
||||
map
|
||||
.SetClass("z-0 relative block w-full h-full bg-gray-100")
|
||||
|
||||
]).ConstructElement();
|
||||
} catch (e) {
|
||||
console.error("Could not generate LocationInputElement:", e)
|
||||
return undefined;
|
||||
return new FixedUiElement("Constructing a locationInput failed due to" + e).SetClass("alert").ConstructElement();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,15 +3,12 @@
|
|||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="28.561806"
|
||||
height="39.557907"
|
||||
id="svg6"
|
||||
sodipodi:docname="Right-pointing_hand_in_green_octagon.svg"
|
||||
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
|
||||
height="39.557907"
|
||||
width="28.561806"
|
||||
version="1.1">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
|
|
@ -19,35 +16,15 @@
|
|||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10"/>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1003"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.6875"
|
||||
inkscape:cx="-15.38013"
|
||||
inkscape:cy="19.778954"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6"/>
|
||||
id="defs10" />
|
||||
<path
|
||||
d="m 7.931404,38.692909 h 16.078583 l 3.686819,-10.34355 V 16.367203 c 0,-1.666145 -5.427816,-2.851496 -5.427816,-1.945801 V 18.1082 12.782817 c 0,-0.971193 -5.398869,-1.707156 -5.398869,0 v 3.994037 -4.406807 c -0.573718,-0.956195 -5.354332,-1.343658 -5.354332,0 V 17.084093 2.6404066 c -0.191239,-2.28522003 -4.938353,-2.44771503 -5.416439,0 V 24.048061 18.20547 c 0.02267,-1.537788 -5.14447599,-1.703651 -5.23434999,0 v 6.14983 z"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.73000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
|
||||
id="path4"
|
||||
inkscape:connector-curvature="0"/>
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.73000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
|
||||
d="m 7.931404,38.692909 h 16.078583 l 3.686819,-10.34355 V 16.367203 c 0,-1.666145 -5.427816,-2.851496 -5.427816,-1.945801 V 18.1082 12.782817 c 0,-0.971193 -5.398869,-1.707156 -5.398869,0 v 3.994037 -4.406807 c -0.573718,-0.956195 -5.354332,-1.343658 -5.354332,0 V 17.084093 2.6404066 c -0.191239,-2.28522003 -4.938353,-2.44771503 -5.416439,0 V 24.048061 18.20547 c 0.02267,-1.537788 -5.14447599,-1.703651 -5.23434999,0 v 6.14983 z" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1.3 KiB |
46
index.css
46
index.css
|
|
@ -307,6 +307,7 @@ li::marker {
|
|||
|
||||
|
||||
@keyframes slide {
|
||||
/* This is the animation on the marker to add a new point - it slides through all the possible presets */
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
|
@ -316,6 +317,51 @@ li::marker {
|
|||
}
|
||||
}
|
||||
|
||||
.hand-drag-animation {
|
||||
animation: hand-drag-animation 6s ease-in-out infinite;
|
||||
transform-origin: 50% 125%;
|
||||
}
|
||||
|
||||
@keyframes hand-drag-animation {
|
||||
/* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
6% {
|
||||
opacity: 1;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
12% {
|
||||
opacity: 1;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
24% {
|
||||
opacity: 1;
|
||||
transform: rotate(-00deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
|
||||
36% {
|
||||
opacity: 0;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**************************************/
|
||||
|
||||
|
||||
|
|
|
|||
26
test.ts
26
test.ts
|
|
@ -1,16 +1,12 @@
|
|||
const client_token = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"
|
||||
import LocationInput from "./UI/Input/LocationInput";
|
||||
import Loc from "./Models/Loc";
|
||||
import {UIEventSource} from "./Logic/UIEventSource";
|
||||
|
||||
const image_id = '196804715753265';
|
||||
const api_url = 'https://graph.mapillary.com/' + image_id + '?fields=thumb_1024_url&&access_token=' + client_token;
|
||||
fetch(api_url,
|
||||
{
|
||||
headers: {'Authorization': 'OAuth ' + client_token}
|
||||
}
|
||||
).then(response => {
|
||||
return response.json()
|
||||
}).then(
|
||||
json => {
|
||||
const thumbnail_url = json["thumb_1024"]
|
||||
console.log(thumbnail_url)
|
||||
}
|
||||
)
|
||||
new LocationInput({
|
||||
centerLocation: new UIEventSource<Loc>({
|
||||
lat: 51.1110,
|
||||
lon: 3.3701,
|
||||
zoom : 14
|
||||
})
|
||||
}).SetStyle("height: 500px")
|
||||
.AttachTo("maindiv");
|
||||
Loading…
Add table
Add a link
Reference in a new issue