SEO/AEO, Farb schema, breadcrumbs
This commit is contained in:
@@ -31,18 +31,42 @@ export abstract class BaseDetailsComponent {
|
||||
|
||||
if (latitude && longitude) {
|
||||
this.mapCenter = latLng(latitude, longitude);
|
||||
|
||||
// Build address string from available location data
|
||||
const addressParts = [];
|
||||
if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
|
||||
if (this.listing.location.street) addressParts.push(this.listing.location.street);
|
||||
if (this.listing.location.name) addressParts.push(this.listing.location.name);
|
||||
else if (this.listing.location.county) addressParts.push(this.listing.location.county);
|
||||
if (this.listing.location.state) addressParts.push(this.listing.location.state);
|
||||
if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
|
||||
|
||||
const fullAddress = addressParts.join(', ');
|
||||
|
||||
const marker = new Marker([latitude, longitude], {
|
||||
icon: icon({
|
||||
...Icon.Default.prototype.options,
|
||||
iconUrl: 'assets/leaflet/marker-icon.png',
|
||||
iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
|
||||
shadowUrl: 'assets/leaflet/marker-shadow.png',
|
||||
}),
|
||||
});
|
||||
|
||||
// Add popup to marker with address
|
||||
if (fullAddress) {
|
||||
marker.bindPopup(`
|
||||
<div style="padding: 8px;">
|
||||
<strong>Location:</strong><br/>
|
||||
${fullAddress}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
this.mapLayers = [
|
||||
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
}),
|
||||
new Marker([latitude, longitude], {
|
||||
icon: icon({
|
||||
...Icon.Default.prototype.options,
|
||||
iconUrl: 'assets/leaflet/marker-icon.png',
|
||||
iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
|
||||
shadowUrl: 'assets/leaflet/marker-shadow.png',
|
||||
}),
|
||||
}),
|
||||
marker
|
||||
];
|
||||
this.mapOptions = {
|
||||
...this.mapOptions,
|
||||
@@ -52,17 +76,26 @@ export abstract class BaseDetailsComponent {
|
||||
}
|
||||
}
|
||||
onMapReady(map: Map) {
|
||||
if (this.listing.location.street) {
|
||||
// Build comprehensive address for the control
|
||||
const addressParts = [];
|
||||
if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
|
||||
if (this.listing.location.street) addressParts.push(this.listing.location.street);
|
||||
if (this.listing.location.name) addressParts.push(this.listing.location.name);
|
||||
else if (this.listing.location.county) addressParts.push(this.listing.location.county);
|
||||
if (this.listing.location.state) addressParts.push(this.listing.location.state);
|
||||
if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
|
||||
|
||||
if (addressParts.length > 0) {
|
||||
const addressControl = new Control({ position: 'topright' });
|
||||
|
||||
addressControl.onAdd = () => {
|
||||
const container = DomUtil.create('div', 'address-control bg-white p-2 rounded shadow');
|
||||
const address = `${this.listing.location.housenumber ? this.listing.location.housenumber : ''} ${this.listing.location.street}, ${
|
||||
this.listing.location.name ? this.listing.location.name : this.listing.location.county
|
||||
}, ${this.listing.location.state}`;
|
||||
const address = addressParts.join(', ');
|
||||
container.innerHTML = `
|
||||
${address}<br/>
|
||||
<a href="#" id="view-full-map">View larger map</a>
|
||||
<div style="max-width: 250px;">
|
||||
${address}<br/>
|
||||
<a href="#" id="view-full-map" style="color: #2563eb; text-decoration: underline;">View larger map</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Verhindere, dass die Karte durch das Klicken des Links bewegt wird
|
||||
|
||||
Reference in New Issue
Block a user