SEO/AEO, Farb schema, breadcrumbs

This commit is contained in:
2025-11-29 23:41:54 +01:00
parent 4fa24c8f3d
commit d2953fd0d9
87 changed files with 5672 additions and 579 deletions

View File

@@ -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: '&copy; 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