@@ -174,8 +174,8 @@ const initializeMap = (datasets) => {
174174 centerX: lat,
175175 centerY: long,
176176 minimumZoom: 4 ,
177- maximumZoom: 16 ,
178- defaultZoom: 13 ,
177+ maximumZoom: 18 ,
178+ defaultZoom: 10 ,
179179 enableHomeControl: true ,
180180 enableZoomControl: true ,
181181 enableBoxZoomControl: true ,
@@ -329,97 +329,46 @@ const filteredLocations = computed(() => {
329329});
330330
331331// Add search handler
332- const handleSearch = (query ) => {
333- searchQuery .value = query;
334- const map = mapRef .value ;
335-
336- if (! map) return ;
337-
338- // Clear existing search markers
339- searchMarkers .value .forEach (marker => {
340- if (marker && map .hasLayer (marker)) {
341- map .removeLayer (marker);
342- }
343- });
344- searchMarkers .value = [];
345-
346- if (! query) {
347- // Show all markers again when search is cleared
348- clusters .value .forEach (({ cluster }) => {
349- if (cluster && ! map .hasLayer (cluster)) {
350- map .addLayer (cluster);
351- }
352- });
353- return ;
354- }
355-
356- // Hide all regular markers
357- clusters .value .forEach (({ cluster }) => {
358- if (cluster && map .hasLayer (cluster)) {
359- map .removeLayer (cluster);
360- }
361- });
362-
363- // Create markers for search results and zoom to bounds
364- const searchBounds = L .latLngBounds ();
365- let hasValidResults = false ;
366-
367- filteredLocations .value .forEach (location => {
368- if (location? .geometry ? .coordinates ) {
369- if (location .geometry .type === ' MultiPoint'
370- location .geometry .coordinates .forEach (coord => {
371- if (Array .isArray (coord) && coord .length >= 2 ) {
372- const latlng = L .latLng (coord[1 ], coord[0 ]);
373- addSearchMarker (latlng, location);
374- searchBounds .extend (latlng);
375- hasValidResults = true ;
376- }
377- });
378- } else {
379- const coords = location .geometry .coordinates ;
380- if (Array .isArray (coords) && coords .length >= 2 ) {
381- const latlng = L .latLng (coords[1 ], coords[0 ]);
382- addSearchMarker (latlng, location);
383- searchBounds .extend (latlng);
384- hasValidResults = true ;
385- }
386- }
387- }
388- });
332+ const handleSearch = async (query ) => {
333+ searchQuery .value = query;
334+ const map = mapRef .value ;
335+
336+ if (! map || ! query) return ;
337+
338+ try {
339+ const response = await fetch (
340+ ` https://nominatim.openstreetmap.org/search?format=json&q=${ encodeURIComponent (query)} `
341+ );
342+ const results = await response .json ();
343+
344+ if (results .length > 0 ) {
345+ const { lat , lon } = results[0 ]; // Take the first (most relevant) match.
346+ const latLng = L .latLng (parseFloat (lat), parseFloat (lon));
347+ const targetIcon = L .icon ({
348+ iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
349+ iconSize: [' auto' 24 ],
350+ iconAnchor: [0 , 24 ],
351+ popupAnchor: [8 , - 7 ]
352+ });
389353
390- if (hasValidResults) {
391- // Zoom to results with padding
392- map .fitBounds (searchBounds, {
393- padding: [50 , 50 ],
394- maxZoom: 15
395- });
396- }
397- };
354+ const targetMarker = L .marker (latLng, {icon: targetIcon})
398355
399- // Helper function to add search result markers
400- const addSearchMarker = (latlng , location ) => {
401- const map = mapRef .value ;
402- if (! map || ! latlng || ! location) return ;
356+ if (map && map ._loaded ) {
357+ map .setView (latLng, 15 );
358+ } // Zoom in on the found location.
403359
404- try {
405- const icon = makeMarkerIcon (L , {
406- marker: location .properties ? .marker ,
407- defaultColor: props .primaryColor ,
408- });
360+ // remove old targetMarker if present.
361+ if (targetMarker) {
362+ targetMarker .remove ();
363+ }
409364
410- const marker = new L.Marker (latlng, {
411- icon,
412- zIndexOffset: 1000 // Ensure search results appear above other markers
413- });
414-
415- if (marker) {
416- attachEvents (marker, location, { id: location .datasetId });
417- marker .addTo (map);
418- searchMarkers .value .push (marker);
419- }
420- } catch (error) {
421- console .error (' Error adding search marker:'
422- }
365+ // Add new targetMarker.
366+ targetMarker .addTo (map);
367+ targetMarker .bindPopup (" Gevonden locatie"
368+ }
369+ } catch (error) {
370+ console .error (" Error in retrieving location:"
371+ }
423372};
424373< / script>
425374
@@ -432,7 +381,8 @@ const addSearchMarker = (latlng, location) => {
432381 }"
433382 >
434383 < div class = " owc-openkaarten-streetmap__controls" >
435- < BaseSearchInput
384+ < BaseSearchInput
385+ : placeholder= " 'Zoek op straat en/of plaats of postcode'"
436386 : primary- color= " primaryColor"
437387 @search= " handleSearch"
438388 : results- count= " filteredLocations.length"
0 commit comments