103 lines
10 KiB
HTML
103 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
<title>Schuldekane Württemberg – Karte (mit Fotos)</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
||
<style>
|
||
html,body,#map{height:100%;margin:0}
|
||
/* runde Avatar-Pins */
|
||
.avatar-pin{
|
||
width:44px;height:44px;border-radius:50%;
|
||
background-size:cover;background-position:center;
|
||
box-shadow:0 0 0 2px #fff, 0 1px 6px rgba(0,0,0,.3);
|
||
}
|
||
.avatar-pin.fallback{
|
||
display:flex;align-items:center;justify-content:center;
|
||
font:700 12px/1.2 system-ui,Arial,sans-serif;background:#ddd;color:#555;
|
||
}
|
||
.leaflet-popup-content img{
|
||
max-width:220px;height:auto;border-radius:8px;display:block;margin:.25rem 0;
|
||
}
|
||
</style>
|
||
<div id="map"></div>
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script>
|
||
const features = {
|
||
"type": "FeatureCollection",
|
||
"features": [
|
||
{"type":"Feature","id":3131,"properties":{"name":"Dr. Til Elbe-Seiffart","bezirk":"Hohenlohe; Weinsberg-Neuenstadt","url":"https://www.kirche-und-religionsunterricht.de/website/de/oehr","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50260_50315_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.50558,49.200474]}},
|
||
{"type":"Feature","id":3138,"properties":{"name":"Jürgen Heuschele","bezirk":"Heilbronn-Brackenheim","url":"https://www.kirche-und-religionsunterricht.de/website/de/hn","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50262_50317_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.221243,49.13931]}},
|
||
{"type":"Feature","id":3191,"properties":{"name":"Dr. Joachim Bayer","bezirk":"Bad Urach-Münsingen; Reutlingen","url":"https://reutlingen.schuldek.de/","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50298_50353_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.211347,48.489777]}},
|
||
{"type":"Feature","id":3192,"properties":{"name":"Dr. Uwe Böhm","bezirk":"Bad Cannstatt; Zuffenhausen","url":"https://www.kirche-und-religionsunterricht.de/website/de/stg","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50316_50371_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.17275,48.777695]}},
|
||
{"type":"Feature","id":3194,"properties":{"name":"Hans Jörg Dieter","bezirk":"Freudenstadt; Sulz am Neckar","url":"https://www.kirche-und-religionsunterricht.de/website/de/fds","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50296_50351_450_300.jpg"},"geometry":{"type":"Point","coordinates":[8.414273,48.466618]}},
|
||
{"type":"Feature","id":3195,"properties":{"name":"Samuel Holzhäuer","bezirk":"Ravensburg","url":"https://www.schuldekan-ravensburg.de","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_52289_53045_450_300.jpeg"},"geometry":{"type":"Point","coordinates":[9.610583,47.779552]}},
|
||
{"type":"Feature","id":3196,"properties":{"name":"Dr. Andreas Hinz","bezirk":"Leonberg; Mühlacker","url":"https://www.schuldekan-ditzingen.de","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50312_50367_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.013048,48.797268]}},
|
||
{"type":"Feature","id":3197,"properties":{"name":"Andrea Holm","bezirk":"Biberach","url":"https://www.kirche-und-religionsunterricht.de/website/de/bc","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_51122_51447_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.997218,48.39738]}},
|
||
{"type":"Feature","id":3198,"properties":{"name":"Thomas Holm","bezirk":"Ulm; Blaubeuren","url":"https://www.kirche-und-religionsunterricht.de/website/de/ul","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_51123_51448_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.99753,48.397354]}},
|
||
{"type":"Feature","id":3199,"properties":{"name":"Dr. Harry Jungbauer","bezirk":"Aalen; Schwäbisch Gmünd; Heidenheim","url":"https://www.kirche-und-religionsunterricht.de/website/de/sgm","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_51124_51449_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.801916,48.798893]}},
|
||
{"type":"Feature","id":3200,"properties":{"name":"Gabriele Karle","bezirk":"Vaihingen-Ditzingen","url":"https://www.kirche-und-religionsunterricht.de/website/de/vai","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50304_50359_450_300.jpg"},"geometry":{"type":"Point","coordinates":[8.956262,48.933044]}},
|
||
{"type":"Feature","id":3201,"properties":{"name":"Simon Keefer","bezirk":"Crailsheim-Blaufelden; Schwäbisch Hall-Gaildorf","url":"https://www.kirche-und-religionsunterricht.de/website/de/sha","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50320_50375_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.732796,49.11233]}},
|
||
{"type":"Feature","id":3202,"properties":{"name":"Dr. Andreas Löw","bezirk":"Besigheim; Ludwigsburg","url":"https://www.kirche-und-religionsunterricht.de/website/de/lb","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50292_50347_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.19276,48.890415]}},
|
||
{"type":"Feature","id":3203,"properties":{"name":"Andreas Lorenz","bezirk":"Schorndorf; Waiblingen","url":"https://www.schuldekan-schorndorf.de/","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50299_50354_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.528753,48.80538]}},
|
||
{"type":"Feature","id":3204,"properties":{"name":"Dorothee Moser","bezirk":"Kirchheim/Teck; Nürtingen","url":"https://www.kirche-und-religionsunterricht.de/website/de/nt","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50283_50338_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.381407,48.67402]}},
|
||
{"type":"Feature","id":3205,"properties":{"name":"Büro des Schuldekans","bezirk":"Böblingen; Herrenberg (Vakaturvertretung)","url":"https://www.kirche-und-religionsunterricht.de/website/de/bb","photo":null},"geometry":{"type":"Point","coordinates":[9.012948,48.79732]}},
|
||
{"type":"Feature","id":3206,"properties":{"name":"Joachim Ruopp","bezirk":"Tübingen","url":"https://www.kirche-und-religionsunterricht.de/website/de/tue","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50277_50332_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.06084,48.51435]}},
|
||
{"type":"Feature","id":3207,"properties":{"name":"Christoph Salzger","bezirk":"Bernhausen; Esslingen","url":"https://www.kirche-und-religionsunterricht.de/website/de/es","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50267_50322_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.381299,48.674015]}},
|
||
{"type":"Feature","id":3208,"properties":{"name":"Stephan Schiek","bezirk":"Geislingen-Göppingen","url":"https://www.kirche-und-religionsunterricht.de/website/de/gp","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50318_50373_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.653888,48.708866]}},
|
||
{"type":"Feature","id":3209,"properties":{"name":"Amrei Steinfort","bezirk":"Balingen; Rottweil","url":"https://www.schuldekan-balingen.de","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50270_50325_450_300.jpg"},"geometry":{"type":"Point","coordinates":[8.85267,48.27358]}},
|
||
{"type":"Feature","id":3210,"properties":{"name":"Dr. Elke Theurer-Vogt","bezirk":"Stuttgart; Degerloch","url":"https://www.kirche-und-religionsunterricht.de/website/de/stg","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50280_50335_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.172444,48.777855]}},
|
||
{"type":"Feature","id":3211,"properties":{"name":"Silvia Trautwein","bezirk":"Backnang; Marbach","url":"https://www.kirche-und-religionsunterricht.de/website/de/bk","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50306_50361_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.430006,48.945168]}},
|
||
{"type":"Feature","id":3212,"properties":{"name":"Thorsten Trautwein","bezirk":"Calw-Nagold; Neuenbürg","url":"https://www.schuldekan-calw.de","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50289_50344_450_300.jpg"},"geometry":{"type":"Point","coordinates":[8.764139,48.712784]}},
|
||
{"type":"Feature","id":4692,"properties":{"name":"Gudrun Bertsch (Co)","bezirk":"Bad Urach-Münsingen; Reutlingen","url":"https://reutlingen.schuldek.de/","photo":"https://www.kirche-und-religionsunterricht.de/system/getthumb/images/__tn4__ecics_50323_50378_450_300.jpg"},"geometry":{"type":"Point","coordinates":[9.211525,48.489597]}}
|
||
]
|
||
}
|
||
|
||
|
||
const map = L.map('map').setView([48.66, 9.02], 8);
|
||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: '© OpenStreetMap'
|
||
}).addTo(map);
|
||
|
||
/** Avatar-Marker als DivIcon (mit Bild oder Fallback-Initialen) */
|
||
function avatarIcon(photo, name){
|
||
if(photo){
|
||
return L.divIcon({
|
||
className:'', // wir stylen selbst
|
||
html:`<div class="avatar-pin" style="background-image:url('${photo.replace(/"/g,'"')}')"></div>`,
|
||
iconSize:[44,44],
|
||
iconAnchor:[22,22],
|
||
popupAnchor:[0,-18]
|
||
});
|
||
}
|
||
// Fallback: Initialen-Kreis
|
||
const initials = (name||'').split(/\s+/).map(s=>s[0]).slice(0,2).join('').toUpperCase() || '??';
|
||
return L.divIcon({
|
||
className:'',
|
||
html:`<div class="avatar-pin fallback">${initials}</div>`,
|
||
iconSize:[44,44],
|
||
iconAnchor:[22,22],
|
||
popupAnchor:[0,-18]
|
||
});
|
||
}
|
||
|
||
function onEachFeature(f, layer){
|
||
const p=f.properties||{};
|
||
const name = p.name || 'Unbekannt';
|
||
const bez = p.bezirk || '';
|
||
const url = p.url ? `<p><a href="${p.url}" target="_blank" rel="noopener">Homepage</a></p>` : '';
|
||
const img = p.photo ? `<img alt="${name}" src="${p.photo}">` : '';
|
||
layer.bindPopup(`<b>${name}</b><br>${bez}${img}${url}`);
|
||
}
|
||
|
||
const layer = L.geoJSON(features, {
|
||
pointToLayer: (f, latlng) => {
|
||
const p=f.properties||{};
|
||
return L.marker(latlng, { icon: avatarIcon(p.photo, p.name) });
|
||
},
|
||
onEachFeature
|
||
}).addTo(map);
|
||
|
||
map.fitBounds(layer.getBounds(), { padding:[20,20] });
|
||
</script>
|
||
</html>
|