This is an old revision of the document!
PlayGround
<!DOCTYPE html>
<head>
<title>DIRAC19</title>
<!-- External Stylesheets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
</head>
<body>
<!-- Our web map and content will go here -->
<div id="DIRAC19" style="width: 550px; height:450px"></div>
<!-- Add the Leaflet JavaScript library -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
// Create variable to hold map element, give initial settings to map
var map = L.map('DIRAC19',{ center: [0, 0], zoom: 1});
// Add OpenStreetMap tile layer to map element
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map);
// Create point feature for Institutions
var Aarhus = L.marker([56.1572 , 10.2107]).addTo(map);
Aarhus.bindPopup("<h3>University of Aarhus</h3><p>Aarhus</p>");
var Amsterdam = L.marker([52.35 , 4.9166]).addTo(map);
Amsterdam.bindPopup("<h3>Vrije Universiteit Amsterdam</h3><p>Amsterdam</p>");
var BanskaBystrica = L.marker([48.7333 , 19.15]).addTo(map);
BanskaBystrica.bindPopup("<h3>Matej Bel University</h3><p>Banska Bystrica</p>");
var Brunswick = L.marker([52.26594 , 10.52673]).addTo(map);
Brunswick.bindPopup("<h3>TU Braunschweig</h3><p>Brunswick</p>");
var Budapest = L.marker([47.5 , 19.0833]).addTo(map);
Budapest.bindPopup("<h3>BME/Budapest Univ. Tech. & Econ.</h3><p>Budapest</p>");
var Copenhague = L.marker([55.6786 , 12.5635]).addTo(map);
Copenhague.bindPopup("<h3>Technical University of Denmark</h3><p>Copenhague</p>");
var Corrientes = L.marker([-27.466882, -58.783842]).addTo(map);
Corrientes.bindPopup("<h3>Northeast National University</h3><p>Corrientes</p>");
var Daejeon = L.marker([36.3355 , 127.425]).addTo(map);
Daejeon.bindPopup("<h3>KAIST</h3><p>Daejeon</p>");
var Detroit = L.marker([42.3834 , -83.1024]).addTo(map);
Detroit.bindPopup("<h3>University of Michigan</h3><p>Detroit</p>");
var Groningen = L.marker([53.2204 , 6.58]).addTo(map);
Groningen.bindPopup("<h3>University of Groningen</h3><p>Groningen</p>");
var Heidelberg = L.marker([49.42 , 8.7]).addTo(map);
Heidelberg.bindPopup("<h3>University of Heidelberg</h3><p>Heidelberg</p>");
var Karlsruhe = L.marker([49 , 8.4]).addTo(map);
Karlsruhe.bindPopup("<h3>Karlsruhe Institute of Technology</h3><p>Karlsruhe</p>");
var Kassel = L.marker([51.3 , 9.5]).addTo(map);
Kassel.bindPopup("<h3>University of Kassel</h3><p>Kassel</p>");
var Lille = L.marker([50.638283, 3.071325]).addTo(map);
Lille.bindPopup("<h3>CNRS/Universite de Lille</h3><p>Lille</p>");
var Linköping = L.marker([58.41 , 15.6299]).addTo(map);
Linköping.bindPopup("<h3>Linkoeping University</h3><p>Linköping</p>");
var Lund = L.marker([55.70584 , 13.19321]).addTo(map);
Lund.bindPopup("<h3>Lund University</h3><p>Lund</p>");
var Mülheim = L.marker([51.43333 , 6.88333]).addTo(map);
Mülheim.bindPopup("<h3>Max Planck Institute f. Coal Res.</h3><p>Mülheim</p>");
var Mumbai = L.marker([19.017 , 72.857]).addTo(map);
Mumbai.bindPopup("<h3>Bhabha Atomic Research Centre</h3><p>Mumbai</p>");
var Nagoya = L.marker([35.155 , 136.915]).addTo(map);
Nagoya.bindPopup("<h3>Chukyo University</h3><p>Nagoya</p>");
var Odense = L.marker([55.4004 , 10.3833]).addTo(map);
Odense.bindPopup("<h3>University of Southern Denmark</h3><p>Odense</p>");
var Oslo = L.marker([59.9167 , 10.75]).addTo(map);
Oslo.bindPopup("<h3>University of Oslo</h3><p>Oslo</p>");
var Portland = L.marker([45.516010, -122.675430]).addTo(map);
Portland.bindPopup("<h3>Schrodinger, Inc.</h3><p>Portland</p>");
var Stockholm = L.marker([59.3508 , 18.0973]).addTo(map);
Stockholm.bindPopup("<h3>Stockholm Inst. of Technology</h3><p>Stockholm</p>");
var Strasbourg = L.marker([48.58 , 7.75]).addTo(map);
Strasbourg.bindPopup("<h3>University of Strasbourg</h3><p>Strasbourg</p>");
var TelAviv = L.marker([32.08 , 34.77]).addTo(map);
TelAviv.bindPopup("<h3>University of Tel Aviv</h3><p>Tel Aviv</p>");
var Toulouse = L.marker([43.62 , 1.4499]).addTo(map);
Toulouse.bindPopup("<h3>Universite Toulouse III</h3><p>Toulouse</p>");
var Tromso = L.marker([69.6351 , 18.992]).addTo(map);
Tromso.bindPopup("<h3>UiT The Arctic University of</h3><p>Tromso</p>");
var Warsaw = L.marker([52.240313, 21.018301]).addTo(map);
Warsaw.bindPopup("<h3>University of Warsaw</h3><p>Warsaw</p>");
var Zurich = L.marker([47.38 , 8.55]).addTo(map);
Zurich.bindPopup("<h3>ETH Zuerich</h3><p>Zurich</p>");
// Create an Empty Popup
var popup = L.popup();
// Write function to set Properties of the Popup
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
// Listen for a click event on the Map element
map.on('click', onMapClick);
</script>
</body>