Widget:LeafletWWW
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<style>
- map {
width:100%; height:88vh; border:3px solid black; border-radius:10px; }
.layerbox { background:rgba(255,255,255,0.9); padding:10px; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.3); font-size:14px; max-height:70vh; overflow-y:auto; }
.search-input { width:100%; margin-bottom:6px; padding:4px; border:1px solid #ccc; border-radius:4px; }
- map-frame {
position:relative; }
- map-title {
position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:1000; background:rgba(255,255,255,0.85); padding:6px 14px; font-weight:bold; font-size:18px; border-radius:6px; box-shadow:0 0 6px rgba(0,0,0,0.3); }
- map-footer {
position:absolute; bottom:10px; left:10px; z-index:1000; background:rgba(255,255,255,0.85); padding:4px 10px; border-radius:6px; font-size:13px; box-shadow:0 0 6px rgba(0,0,0,0.3); }
- map-footer a {
color:red; text-decoration:none; font-weight:bold; }
</style>
<script>
var map = L.map('map',{ preferCanvas:true, tap: window.screen.width < 600, zoomSnap:0.5, zoomDelta:0.5 }).setView([50.95,6.95],12);
var osm = L.tileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
{maxZoom:19, attribution:'© OpenStreetMap'}
);
var satellite = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {attribution:'Tiles © Esri'} );
osm.addTo(map);
L.control.layers( { "Open Street Map":osm, "Satellit":satellite } ).addTo(map);
L.Control.geocoder({
position:'topleft',
defaultMarkGeocode:true,
placeholder:"Suche ..."
}).addTo(map);
var nutzungColors = {
'Hof':'red',
'Mühle':'blue',
'Fabrik':'black',
'Gewerbe':'gray',
'Verwaltung':'orange',
'Bahn':'brown',
'Brücke':'navy',
'Hafen':'blue',
'Flughafen':'green',
'Versorgung':'gray',
'Tankstelle':'maroon',
'Brauerei':'yellow',
'Ziegelei':'red',
'Kloster':'orange',
'Kirche':'purple',
'Synagoge':'violet',
'Krankenhaus':'red',
'Friedhof':'green',
'Hochbunker':'black',
'Militär':'green',
'Wohnen':'brown',
'Schule':'red',
'Freizeit':'green'
};
var geojsonLayer = L.geoJSON(null,{
renderer: L.canvas(),
style:function(feature){
return{
color:nutzungColors[feature.properties.Nutzung] || "black",
weight:2,
fillOpacity:0.4
};
}
}).addTo(map);
fetch('/alteskoeln/WWW.geojson')
.then(res=>res.json())
.then(data=>{
geojsonLayer.addData(data);
});
</script>