raucao/marco
1
0
Fork 0
Code Issues 12 Pull Requests Releases Activity

Improve map marker size and tap target

Browse Source
This commit is contained in:
Râu Cao 2026-01-19 13:09:03 +07:00
parent 6d2ddc71e2
commit fbdf5d6803
Signed by: raucao
GPG Key ID: 37036C356E56CC51
4 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/components/map.gjs
View File

@ -34,16 +34,25 @@ export default class MapComponent extends Component {
this.bookmarkSource = new VectorSource();
const bookmarkLayer = new VectorLayer({
source: this.bookmarkSource,
style: new Style({
image: new Circle({
radius: 7,
fill: new Fill({ color: '#ffcc33' }), // Gold/Yellow
stroke: new Stroke({
color: '#fff',
width: 2,
style: [
new Style({
image: new Circle({
radius: 10,
fill: new Fill({ color: 'rgba(0, 0, 0, 0.2)' }),
displacement: [0, -2],
}),
}),
}),
new Style({
image: new Circle({
radius: 9,
fill: new Fill({ color: '#ffcc33' }), // Gold/Yellow
stroke: new Stroke({
color: '#fff',
width: 2,
}),
}),
}),
],
zIndex: 10, // Ensure it sits above the map tiles
});
@ -78,7 +87,9 @@ export default class MapComponent extends Component {
// Change cursor to pointer when hovering over a clickable feature
this.mapInstance.on('pointermove', (e) => {
const pixel = this.mapInstance.getEventPixel(e.originalEvent);
const hit = this.mapInstance.hasFeatureAtPixel(pixel);
const hit = this.mapInstance.hasFeatureAtPixel(pixel, {
hitTolerance: 10,
});
this.mapInstance.getTarget().style.cursor = hit ? 'pointer' : '';
});
@ -151,7 +162,9 @@ export default class MapComponent extends Component {
handleMapClick = async (event) => {
// Check if user clicked on a rendered feature (POI or Bookmark) FIRST
const features = this.mapInstance.getFeaturesAtPixel(event.pixel);
const features = this.mapInstance.getFeaturesAtPixel(event.pixel, {
hitTolerance: 10,
});
let clickedBookmark = null;
let selectedFeatureName = null;
let selectedFeatureType = null;

2
dist/assets/main-BPbDmD4L.js → dist/assets/main-DDOd2EjB.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/modules-4-12-BEG81zpm.js → dist/assets/modules-4-12-B2PcfQoG.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -6,7 +6,7 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" crossorigin src="/assets/main-BPbDmD4L.js"></script>
<script type="module" crossorigin src="/assets/main-DDOd2EjB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main-BT7ZjILY.css">
</head>
<body>