Leaflet');
const tileLight = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
const tileDark = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
const attr = '© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors © <a href=\"https://carto.com/attributions\">CARTO</a>';
const isDark = () => document.documentElement.classList.contains('dark');
const tiles = L.tileLayer(isDark() ? tileDark : tileLight, {
attribution: attr, maxZoom: 19, subdomains: 'abcd',
}).addTo(this.map);
new MutationObserver(() => tiles.setUrl(isDark() ? tileDark : tileLight))
.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
if (this.lat && this.lng) {
this.marker = L.marker([this.lat, this.lng], { icon: this.icon, draggable: true }).addTo(this.map);
this.marker.on('dragend', e => {
const ll = e.target.getLatLng();
this.place(ll.lat, ll.lng);
});
}
this.map.on('click', e => this.place(e.latlng.lat, e.latlng.lng));
},
place(lat, lng) {
const wireLat = 'lat';
const wireLng = 'lng';
lat = parseFloat(parseFloat(lat).toFixed(7));
lng = parseFloat(parseFloat(lng).toFixed(7));
if (this.marker) {
this.marker.setLatLng([lat, lng]);
} else {
this.marker = L.marker([lat, lng], { icon: this.icon, draggable: true }).addTo(this.map);
this.marker.on('dragend', e => {
const ll = e.target.getLatLng();
this.place(ll.lat, ll.lng);
});
}
this.lat = lat;
this.lng = lng;
$wire.set(wireLat, String(lat));
$wire.set(wireLng, String(lng));
},
clear() {
const wireLat = 'lat';
const wireLng = 'lng';
if (this.marker) { this.map.removeLayer(this.marker); this.marker = null; }
this.lat = null;
this.lng = null;
$wire.set(wireLat, null);
$wire.set(wireLng, null);
},
async search() {
if (!this.query.trim()) return;
this.searching = true;
try {
const url = 'https://nominatim.openstreetmap.org/search?format=json&limit=1&countrycodes=py&q='
+ encodeURIComponent(this.query);
const res = await fetch(url, {
headers: {
'Accept-Language': 'pt',
'User-Agent': 'ViaParaguay/1.0 (
[email protected])',
},
});
const data = await res.json();
if (data.length) {
const ll = { lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon) };
this.map.setView([ll.lat, ll.lng], 15, { animate: true });
this.place(ll.lat, ll.lng);
}
} catch (e) {
console.error('[map-picker] Nominatim error:', e);
} finally {
this.searching = false;
}
},
}"
@map-picker-recenter.window="map && map.setView([$event.detail.lat, $event.detail.lng], 13, { animate: true })"
>
Clique no mapa para marcar a localização
✓