search

mcguffin / acf-openstreetmap-field

WordPress ACF Field for OpenStreetMap
https://wordpress.org/plugins/acf-openstreetmap-field/
GNU General Public License v3.0
108 stars 22 forks source link

Tap and hold area disorder on mobile devices #124

Closed userisamir closed 1 month ago

userisamir commented 1 month ago

Hi, I'm encountering an issue that is related to add marker on mobile phone devices (ios & android - all browsers), The "Tap & Hold" action to add a new marker, only works on the very top left corner of the map container (almost near the zoom control buttoms +/-). Even the remove marker is working in whole container, but addMarker only works in that specific area. I've tried all the things from css to js manipulate, but couldn't find a solution. Could you give me a hint please ? Thank you.

mcguffin commented 1 month ago

Hi, I played around a bit and found that css .leaflet-map { user-select: none; -webkit-user-select: none; } would fix it. Can you confirm?

userisamir commented 1 month ago

Hi @mcguffin Thank you for your response. I've test your workaround and it prevents map container text selection on long press and hold, but still couldn't add new marker. I think it might be related to js and transform parameters.

mcguffin commented 1 month ago

Hi @userisamir To reproduce I need more specific intel on your field then.

userisamir commented 1 month ago

ACF pro 6.3.9 Wordpress 6.6.2 ACF OpenStreetMap Field 1.5.7

[ { "key": "group_671d210e7ef6b", "title": "MAP field test", "fields": [ { "center_lat": 53.55064, "center_lng": 10.00065, "zoom": 5, "height": 400, "return_format": "raw", "allow_map_layers": 0, "max_markers": 5, "layers": [ "OpenStreetMap.Mapnik" ], "key": "field_671d20e488fb4", "label": "open street test field", "name": "open_street_test_field", "aria-label": "", "type": "open_street_map", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "only_front": 0, "frontend_admin_display_mode": "edit", "no_values_message": "", "allow_in_bindings": 1, "leaflet_map": "{\"lat\":53.55064,\"lng\":10.00065,\"zoom\":5,\"layers\":[\"OpenStreetMap.Mapnik\"],\"markers\":[]}" } ], "location": [ [ { "param": "post_type", "operator": "==", "value": "post" } ] ], "menu_order": 0, "position": "normal", "style": "default", "label_placement": "top", "instruction_placement": "label", "hide_on_screen": "", "active": true, "description": "", "show_in_rest": 0, "no_values_message": "" } ]

mcguffin commented 1 month ago

Okay, got it! When I hold my finger on the map chrome is firing a lot of pointermove events – even when there is no movement. A pointermove event interrupts the touch-hold-timeout. Added a check if there was an actual pointer movement, which fixed the issue. Might take a few days to the next release, so patience please. Thank you for bringing this up!