Sie zeigen eine alte Version dieser Seite an. Zeigen Sie die aktuelle Version an.

Unterschiede anzeigen Seitenhistorie anzeigen

Version 1 Aktuelle »

 

Die beteiligten Städte sollen in einer Karte dargestellt werden, die interaktiv bedient werden kann.

Beispiel: https://hochschultage-bayern.de/dezentrale-veranstaltungen/

Technische Umsetzung

Leaflet

V1 - Eigener HTML-Code

https://hochschule-n-bw.de/interaktive-karte/

Code
<title>Quick Start - Leaflet</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>

<div id="mapid" style="width: 700px; height: 400px;"></div>
<script>

var mymap = L.map('mapid').setView([48.778365238750794, 9.174957275390625], 7);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 14,
minZoom: 7,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);

var markers = L.markerClusterGroup();

var marker_Universitaet_Stuttgart = L.marker([48.74588213808276, 9.105391502380371]);
markers.addLayer(marker_Universitaet_Stuttgart);

var marker_Hochschule_der_Medien = L.marker([48.74133650659886, 9.10119116306305]);
markers.addLayer(marker_Hochschule_der_Medien);

var marker_Universitaet_Hohenheim = L.marker([48.71325060242344, 9.213495254516602]);
markers.addLayer(marker_Universitaet_Hohenheim);

var marker_Hochschule_Heilbronn = L.marker([49.12266052250654, 9.209890365600584]);
markers.addLayer(marker_Hochschule_Heilbronn);

var marker_Hochschule_Aahlen = L.marker([48.83787362572869, 10.073411464691162]);
markers.addLayer(marker_Hochschule_Aahlen);

var marker_Universtaet_Ulm = L.marker([48.42277163264808, 9.955962896347046]);
markers.addLayer(marker_Universtaet_Ulm);

var marker_PH_Weingarten = L.marker([47.809494271337684, 9.645169973373413]);
markers.addLayer(marker_PH_Weingarten);

var marker_PH_Ludwigsburg = L.marker([48.90816517554708, 9.182853698730469]);
markers.addLayer(marker_PH_Ludwigsburg);

var marker_PH_Heidelberg = L.marker([49.42000512225273, 8.68390917778015]);
markers.addLayer(marker_PH_Heidelberg);

var marker_HFR_Rottenburg = L.marker([48.457700857880866, 8.942989110946655]);
markers.addLayer(marker_HFR_Rottenburg);

var marker_Universitaet_Mannheim = L.marker([49.48086788228289, 8.46996545791626]);
markers.addLayer(marker_Universitaet_Mannheim);

var marker_Hochschule_Mannheim = L.marker([49.46935118720542, 8.48242700099945]);
markers.addLayer(marker_Hochschule_Mannheim);

var marker_DHBW_Stuttgart = L.marker([48.76999187059314, 9.157250672578812]);
markers.addLayer(marker_DHBW_Stuttgart);

var marker_HMDK_Stuttgart = L.marker([48.778349331205746, 9.186347275972366]);
markers.addLayer(marker_HMDK_Stuttgart);

var marker_HS_Ravensburg_Weingarten = L.marker([47.814323508337566, 9.65321123600006]);
markers.addLayer(marker_HS_Ravensburg_Weingarten);

var marker_Hochschule_Offenburg = L.marker([48.45753721095753, 7.942458093166351]);
markers.addLayer(marker_Hochschule_Offenburg);

var marker_Hochschule_Ulm = L.marker([48.408778973409696, 9.997486174106598]);
markers.addLayer(marker_Hochschule_Ulm);

mymap.addLayer(markers);


</script>


Probleme:

  • Javascript und Stylesheets werden nicht im Head der Seite eingebunden. 

V2 - Wordpress-Plugin

https://hochschule-n-bw.de/interaktive-karte-v2/

Plugins:


  • Keine Stichwörter