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
4 changed files with 26 additions and 13 deletions
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(); this.bookmarkSource = new VectorSource();
const bookmarkLayer = new VectorLayer({ const bookmarkLayer = new VectorLayer({
source: this.bookmarkSource, source: this.bookmarkSource,
style: new Style({ style: [
image: new Circle({ new Style({
radius: 7, image: new Circle({
fill: new Fill({ color: '#ffcc33' }), // Gold/Yellow radius: 10,
stroke: new Stroke({ fill: new Fill({ color: 'rgba(0, 0, 0, 0.2)' }),
color: '#fff', displacement: [0, -2],
width: 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 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 // Change cursor to pointer when hovering over a clickable feature
this.mapInstance.on('pointermove', (e) => { this.mapInstance.on('pointermove', (e) => {
const pixel = this.mapInstance.getEventPixel(e.originalEvent); 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' : ''; this.mapInstance.getTarget().style.cursor = hit ? 'pointer' : '';
}); });
@@ -151,7 +162,9 @@ export default class MapComponent extends Component {
handleMapClick = async (event) => { handleMapClick = async (event) => {
// Check if user clicked on a rendered feature (POI or Bookmark) FIRST // 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 clickedBookmark = null;
let selectedFeatureName = null; let selectedFeatureName = null;
let selectedFeatureType = 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="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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"> <link rel="stylesheet" crossorigin href="/assets/main-BT7ZjILY.css">
</head> </head>
<body> <body>