Marker Leafletmap

Projekt Cedrik

by Marie-Louise Timcke

HTML

<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css">
<script src="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
    height: 550px;
}
.leaflet-popup-content-wrapper {
  text-align: left;
}
.leaflet-popup-content {
	margin: 19px 8px;
	line-height: 1.4;
  width:250px;
	}
  .leaflet-container a.leaflet-popup-close-button:hover {
	color: #ffc100;
	}

JavaScript

// in set.View setzt du den Mittelpunkt der Karte und die Zoomstärke
var map = L.map('map').setView([51.513241, 7.469910], 13);
L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
	attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>&mdash; Marie-Louise Timcke'
}).addTo(map);
map._layersMinZoom=12;

// Icon über pl hochladen und hier link einsetzen
var watch = L.icon({
    iconUrl: 'http://datentaeter.de/wp-content/uploads/2016/06/theatre.png',
    iconSize:     [42, 45], // Größe des icons
    iconAnchor:   [21, 45], // Stelle des Icons, dass auf den Geopunkt zeigen soll
    popupAnchor: [0, -45]
});

var p1 = L.marker([51.513241, 7.469910], {icon: watch}).addTo(map);
var p2 = L.marker([51.504301, 7.451472], {icon: watch}).addTo(map);
var p3 = L.marker([51.511073, 7.461545], {icon: watch}).addTo(map);


p1.bindPopup("<a href='http://datentaeter.de/wp-content/uploads/2015/07/Walter.png'><img class='alignnone size-full wp-image-924' src='http://datentaeter.de/wp-content/uploads/2015/07/Walter.png' alt='Walter' width='100%' /></a><strong>Theater 1</strong><br>Text Text Text, Text Text Text<br> <em>Bild: Fotograf</em>");   
p2.bindPopup("<a href='http://datentaeter.de/wp-content/uploads/2015/07/Walter.png'><img class='alignnone size-full wp-image-924' src='http://datentaeter.de/wp-content/uploads/2015/07/Walter.png' alt='Walter' width='100%' /></a><strong>Theater 2</strong><br>Text Text Text, Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br> <em>Bild: Fotograf</em>");  
p3.bindPopup("<a href='http://www.pflichtlektuere.com/blog/wp-content/uploads/2016/06/8442792100_7e2cddcf5a_o.jpg'><img class='alignnone size-full wp-image-924'...