Replies: 3 comments 4 replies
-
|
I was just working on this myself and so am interested in if anyone has any example or tips. |
Beta Was this translation helpful? Give feedback.
-
|
As a starting point, I was thinking that for at least HTML-like map elements, custom attributes could be used to target a map context. For example: ...and then custom attributes for hx-map & hx-latlng would send the element to the map context instead of the DOM. I'm not exactly thrilled with that...but just wanted to kick the discussion off with something. |
Beta Was this translation helpful? Give feedback.
-
|
I've built something like this using Alpine JS and htmx. Alpine to deal with the maps API. htmx to load the marker data from the server as a list with data attributes for each marker that include coordinates, icon image, etc. You can also have separate attributes for that, but I use a json encoded data on the list which I read with Alpine. This approach works great for me because I show the locations as regular list, and also as a map with a toggle. You can listen to map events using htmx, and then reload the list, and in turn update the markers on the map. Here's roughly the code in case it helps: <div x-data="{
searchPanel: 'closed',
loadingState: 'hide',
showViewToggle: false,
viewMoreHref: '#',
view: htmx.find('#xyz-widget').dataset.defaultView ?? 'list',
hidePanel() {
this.searchPanel = 'closed';
this.clearMarkers();
if (window?.xyzMap?.infowindow) {
window.xyzMap.infowindow.close();
}
},
hideResults($event) {
// Don't close on click outside when detault values fed into widget form
if (typeof xyzSetInitialFormValues == 'function') {
return;
}
if (Array.from($event.target.classList).includes('gm-ui-hover-effect')) {
return;
}
if ($event.target.closest('#xyz-modal')) {
return;
}
if (['xyz-keywords', 'xyz-address'].includes($event.target.id)) {
return;
}
this.searchPanel = 'closed';
},
showResults(eventData) {
this.$nextTick(() => {
this.viewMoreHref = eventData.view_more,
this.searchPanel = 'open';
this.loadingState = 'hide';
if (typeof google !== 'object') {
this.view = 'list';
this.showViewToggle = false;
} else {
this.showViewToggle = true;
}
if (eventData.count) {
if (this.view == 'map') {
this.loadMap();
}
} else {
this.clearMarkers();
this.showViewToggle = false;
}
});
},
toggleView() {
this.view = this.view == 'map' ? 'list' : 'map';
if (this.view == 'map') {
this.$nextTick(() => {
this.loadMap();
});
}
},
getMapResults() {
var markerData = htmx.findAll(htmx.find('#xyz-results-list'), '[data-marker]');
return Array.from(markerData).filter( (elt) => {
var data = JSON.parse(elt.dataset.marker);
return [1,-1].includes(Math.sign(data.lat)) && [1,-1].includes(Math.sign(data.lng));
}).map( (elt) => JSON.parse(elt.dataset.marker));
},
clearMarkers() {
if (! window.xyzMap) return;
window.xyzMap.markers.forEach( (marker) => marker.setMap(null) );
window.xyzMap.markers = [];
google.maps.event.trigger(window.xyzMap,'resize')
},
loadMap() {
var markerData = this.getMapResults();
if (!markerData.length) {
this.clearMarkers();
return;
}
var firstMarker = markerData[0];
var styles = [
{ featureType: 'poi', stylers: [{ visibility: 'off' }] },
{ featureType: 'transit', stylers: [{ visibility: 'off' }] },
{ featureType: 'administrative', stylers: [{ visibility: 'off' }] },
];
if (! window.xyzMap) {
window.xyzMap = new google.maps.Map(document.getElementById('xyz-map'), {
center: new google.maps.LatLng(firstMarker.lat, firstMarker.lng),
zoom: 8,
overviewMapControl: false,
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
styles: styles,
});
window.xyzMap.markers = [];
} else {
this.clearMarkers();
}
window.xyzMap.bounds = new google.maps.LatLngBounds();
window.xyzMap.infowindow = new google.maps.InfoWindow();
var icons = {
'place' : {
url: 'https://xyz.com/icons/place.png',
},
'business': {
url: 'https://xyz.com/icons/business.png'
}
};
markerData.forEach( (data, index) => {
const latLng = new google.maps.LatLng(data.lat, data.lng);
const marker = new google.maps.Marker({
index: index,
position: latLng,
icon: icons[data.icon],
payload: data,
});
marker.addListener('click', (e) => {
var listing = htmx.find(`#item-index-${marker.index}`);
var content = document.createElement('a');
content.setAttribute('href', listing.getAttribute('href'));
content.innerHTML = listing.innerHTML.replace('sm:grid-cols-4', '').replace('grid-cols-2', 'grid-cols-1');
Array.from(listing.attributes).forEach((attr) => {
if (attr.name.startsWith('hx-')) {
content.setAttribute(attr.name, attr.value);
}
});
htmx.process(content);
window.xyzMap.infowindow.setOptions({
content: content,
minWidth: 300,
maxWidth: 370,
});
window.xyzMap.infowindow.open({
anchor: marker,
map: window.xyzMap,
shouldFocus: false,
});
});
window.xyzMap.markers.push(marker);
window.xyzMap.bounds.extend(latLng);
});
window.xyzMap.markers.forEach( (marker) => marker.setMap(window.xyzMap) );
google.maps.event.addListener(window.xyzMap, 'zoom_changed', () => {
var listener = google.maps.event.addListener(window.xyzMap, 'bounds_changed', (event) => {
if (window.xyzMap.getZoom() > 13 && window.xyzMap.initialized == true) {
window.xyzMap.setZoom(13);
window.xyzMap.initialized = false;
}
google.maps.event.removeListener(listener);
});
});
window.xyzMap.initialized = true;
window.xyzMap.fitBounds(window.xyzMap.bounds);
},
}" x-on:xyz-hide-loading-state="loadingState = 'hide'" x-on:xyz-close-results.window="hidePanel()" x-on:xyz-open-results.window="showResults($event.detail)">
<form hx-get="/results" hx-target="#xyz-results" hx-trigger="do-xyz-search" hx-include="this *" id="xyz-form" x-data="{
place_id: null,
address: 'Boston, MA, USA',
lat: '',
lng: '',
cat: '78',
placesApi: null,
geocoderApi: null,
addressSuggestions: [],
showAddressSuggestions: false,
init() {
this.placesApi = new google.maps.places.AutocompleteService();
this.geocoderApi = new google.maps.Geocoder();
if (this.address || (this.lat && this.lng)) {
this.doSearch();
}
},
clearAddress() {
this.addressSuggestions = [];
this.showAddressSuggestions = false;
Object.assign(this, { place_id: null, lat: '', lng: '' });
this.$nextTick(() => this.$dispatch('do-xyz-search'));
},
doSearch() {
if (this.place_id) {
this.geocodePlace(this.place_id, (place) => {
Object.assign(this, place);
this.$nextTick(() => this.$dispatch('do-xyz-search'));
});
return;
}
if (this.address && (! this.lat || ! this.lng)) {
this.geocodeAddress(this.address, (results) => {
this.geocodePlace(results[0].place_id, (place) => {
Object.assign(this, place);
this.$nextTick(() => this.$dispatch('do-xyz-search'));
});
});
return;
}
this.$nextTick(() => this.$dispatch('do-xyz-search'));
},
addressSearch(address) {
this.geocodeAddress(address, (results) => {
this.addressSuggestions = results;
this.showAddressSuggestions = true;
});
},
geocodeAddress(address, callback) {
this.placesApi.getPlacePredictions({ input: address, limit: 10, componentRestrictions: { country: 'us' }, types: ['geocode'] }, (results, status) => {
if (status === 'OK' && results.length) {
callback(results)
}
});
},
geocodePlace(placeId, callback) {
this.geocoderApi.geocode({ placeId: placeId }, (results, status) => {
if (status === 'OK') {
callback({
lat: results[0].geometry.location.toJSON().lat,
lng: results[0].geometry.location.toJSON().lng,
address: results[0].formatted_address
});
}
});
},
}" x-on:htmx:xhr:loadstart="searchPanel = 'open'; loadingState = 'loading'" class="">
<input type="hidden" name="lat" x-model="lat" value="fill-initial-lat-here">
<input type="hidden" name="lng" x-model="lng" value="fill-initial-lng-here">
<div class="flex flex-col space-y-1.5 sm:flex-row sm:space-y-0 sm:space-x-2 p-4 bg-gray-100 border border-gray-50 rounded shadow-sm">
<div class="relative">
<input id="xyz-address" x-model="address" x-ref="address" type="search" name="address" placeholder="Enter a location" x-on:keyup.debounce.450ms="addressSearch($event.target.value)" x-on:focus="showAddressSuggestions = addressSuggestions.length ? true : false;" x-on:search="clearAddress()" class="w-full border-gray-300 rounded sm:w-auto">
<ul x-show="showAddressSuggestions" x-on:click.outside="showAddressSuggestions = $event.target.name == 'address' ? true : false" class="z-40 w-80 bg-white absolute origin-top-left divide-y divide-solid divide-gray-100 shadow border border-gray-100 rounded" style="display: none;">
<template x-for="suggestion in addressSuggestions" :key="suggestion.place_id">
<li role="button" x-text="suggestion.description" x-on:click="showAddressSuggestions = false; place_id = suggestion.place_id; doSearch();" class="bg-white hover:bg-gray-100 py-1.5 px-3 text-sm text-gray-600"></li>
</template>
<li class="py-1.5 px-3 flex justify-end">
<img style="width: 100px; height: 12px;" src="https://xyzoints.com/google-logo.png">
</li>
</ul>
</div>
<select id="xyz-radius" name="radius" x-on:change="if (lat && lng) $dispatch('do-xyz-search')" class="border-gray-300 rounded">
<option value="50">50 mi
</option><option value="100">100 mi
</option></select>
<input id="xyz-keywords" x-on:keyup.debounce.300ms="doSearch()" x-on:search="doSearch()" type="search" name="keywords" placeholder="Business Name" class="w-full border-gray-300 rounded sm:w-auto">
</div>
</form>
<div x-show="searchPanel == 'open'" x-on:click.outside="hideResults($event)" class="absolute origin-top-left w-full flex flex-col bg-white shadow-sm border border-gray-200 rounded-b-md">
<!-- results loading -->
<div id="xyz-results-loading" x-show="loadingState == 'loading'" class="absolute h-full z-20 w-full" style="display: none;">
<div class="absolute w-full h-full bg-gray-50 opacity-30"></div>
<div class="absolute w-full h-full flex justify-center items-center">
<svg class="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
<div id="xyz-results" :class="{ 'hidden': view == 'map' }" class=""><div id="xyz-results-list" class="flex flex-col divide-y divide-gray-100 max-h-80 overflow-y-scroll lg:max-h-[35rem]">
<a id="item-index-0" href="https://xyz.com/place-1" class="no-underline px-4 py-2 hover:bg-gray-50" data-marker="{"lat":"42.3635824","lng":"-71.1093811","icon":"place","title":"Place 1","url":"https:\/\/xyz.com\/place-1","image":false}">
<div class="flex flex-row">
<!-- Location html here -->
</div>
</a>
<!-- more list items here with data-marker attribtues-->
</div>
<!-- map placeholder -->
<div id="xyz-map" class="h-80 lg:h-[35rem]" :class="{ 'hidden': view == 'list' }"></div>
<!-- footer -->
<div class="flex items-center justify-between px-2 py-2 bg-gray-100 border-t border-gray-200 rounded-b-md sm:px-4 ">
<button class="inline-flex items-center justify-center p-3 rounded-full bg-brand hover:bg-brand-lighter shadow-lg" x-on:click="toggleView()" x-show="showViewToggle">
<svg x-show="view == 'list'" xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 text-white h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
</svg>
<svg x-show="view == 'map'" xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 text-white h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
this is great !! Is it hosted somewhere on GitHub ? |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately no. I pulled this from a private client project. If you DM me on Twitter/X I can do that. Username is getJReviews. The map is actually a widget that is embedded on a 3rd party website. |
Beta Was this translation helpful? Give feedback.
-
|
We really need a community project for golang htmx and sub components like Google Maps, etc There are a few golang htmx GitHub projects but none with sub components using tailwind for example. |
Beta Was this translation helpful? Give feedback.
-
There was a great project called Hyperleaflet that went a long way to implementing this in a HTMX compatible way. The original author archived the repo recently, but I have a fork where I've been implementing new features in a develop branch. I've released it on npm under I'm hoping to reduce the amount of wrapping code needed to patch missing features by making a one to one mapping between leaflet constructor options and data attributes. The tricky bit will be the change handlers needed to update layers on the map. |
Beta Was this translation helpful? Give feedback.
-
Are there any suggested ways of interacting with a maps API instance with HTMX? Or are SPA-style tools generally more the way to go? Maybe a mix of the two?
Beta Was this translation helpful? Give feedback.
All reactions