RP Fußball

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

var map = L.map('map').setView([51.222929, 6.816247], 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;

 var l1 = L.polyline([
 [51.229708, 6.776868],
 [51.227873, 6.776815],
 [51.226335, 6.776771],
 [51.225678, 6.776733],
 [51.225278, 6.776701]
],{ weight: 8, color: '#fdaf28', opacity: 0.9 }).addTo(map); 

 var l2 = L.polyline([
 [51.219373, 6.787609],
 [51.218990, 6.785710],
 [51.218876, 6.783832],
 [51.218928, 6.782113],
 [51.219750, 6.782161],
 [51.221443, 6.782395],
 [51.223035, 6.782910],
 [51.223001, 6.782406],
 [51.223021, 6.779649],
 [51.223075, 6.778404],
 [51.221550, 6.778329],
 [51.219796, 6.778308],
 [51.219783, 6.779198],
 [51.223029, 6.779284],
 [51.222975, 6.782234],
 [51.222935, 6.782502],
 [51.221470, 6.782073],
 [51.219730, 6.781858],
 [51.218924, 6.781815],
 [51.219005, 6.779208],
 [51.219783, 6.779198]
],{ weight: 8, color: '#fdaf28', opacity: 0.9 }).addTo(map); 

// create custom marker
var watch = L.icon({
    iconUrl: 'http://datentaeter.de/wp-content/uploads/2016/06/soccer.png',
    iconSize:     [42, 45], // size of the icon
    iconAnchor:   [21, 45], // point of the icon which will correspond to marker's location
    popupAnchor: [0, -45]
});

var car = L.icon({
    iconUrl: 'http://datentaeter.de/wp-content/uploads/2016/06/car-icon.png',
    iconSize:     [42, 45], // size of the icon
    iconAnchor:   [21, 45], // point of the icon which will correspond to marker's location
    popupAnchor: [0, -45]
});

var germ = L.icon({
    iconUrl: 'http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png',
    iconSize:     [42, 45], // size of the icon
    iconAnchor:   [21, 45], // point of the icon which will correspond to marker's location
   ...