<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>TEST</title>
<meta name="viewport" content="width=device-width">
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
<!-- Semantic UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<!-- Extra Markers -->
<link rel="stylesheet" href="/dist/css/leaflet.extra-markers.min.css" />
<script src="/dist/js/leaflet.extra-markers.min.js"></script>
</head>
<body>
<div id="map" class="ui" style="width: 100%; height: 400px;"></div>
<script>
// Setup map
var map = L.map('map').setView([33.00, -117.255], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
detectRetina: true
}).addTo(map);
// Add markers to map
// Font-Awesome markers
L.marker([33.005, -117.270], {
icon: L.ExtraMarkers.icon({
icon: 'fa-spinner',
shape: 'circle',
markerColor: 'red',
prefix: 'fa',
extraClasses: 'fa-spin'
})
}).addTo(map);
L.marker([33.005, -117.265], {
icon: L.ExtraMarkers.icon({
icon: 'fa-coffee',
shape: 'square',
markerColor: 'orange-dark',
prefix: 'fa',
iconColor: 'black'
})
}).addTo(map);
L.marker([33.005, -117.260], {
icon: L.ExtraMarkers.icon({
icon: 'fa-cog',
shape: 'star',
prefix: 'fa',
markerColor: 'orange',
iconColor: '#6b1d5c'
})
}).addTo(map);
L.marker([33.005, -117.255], {
icon: L.ExtraMarkers.icon({
icon: 'fa-spinner',
shape: 'penta',
markerColor: 'yellow',
prefix: 'fa'
})
}).addTo(map);
//Semantic UI
L.marker([33.005, -117.250], {
icon: L.ExtraMarkers.icon({
icon: 'add sign',
shape: 'circle',
markerColor: 'blue-dark',
prefix: 'icon'
})
}).addTo(map);
L.marker([33.005, -117.245], {
icon: L.ExtraMarkers.icon({
icon: ' archive',
shape: 'square',
markerColor: 'cyan',
prefix: 'icon'
})
}).addTo(map);
L.marker([33.005, -117.240], {
icon: L.ExtraMarkers.icon({
icon: 'sync',
shape: 'penta',
markerColor: 'purple',
prefix: 'icon'
})
}).addTo(map);
// Second Row
L.marker([32.995, -117.270], {
icon: L.ExtraMarkers.icon({
icon: 'plus sign',
shape: 'circle',
markerColor: 'violet',
prefix: 'icon'
})
}).addTo(map);
// Glyphicons
L.marker([32.995, -117.265], {
icon: L.ExtraMarkers.icon({
icon: 'glyphicon-cog',
shape: 'square',
prefix: 'glyphicon',
markerColor: 'pink'
})
}).addTo(map);
L.marker([32.995, -117.260], {
icon: L.ExtraMarkers.icon({
icon: 'glyphicon-bell',
shape: 'star',
prefix: 'glyphicon',
markerColor: 'green-dark'
})
}).addTo(map);
L.marker([32.995, -117.255], {
icon: L.ExtraMarkers.icon({
icon: 'fa-number',
shape: 'penta',
markerColor: 'green',
number: '1'
})
}).addTo(map);
L.marker([32.995, -117.250], {
icon: L.ExtraMarkers.icon({
icon: 'glyphicon-cog',
shape: 'circle',
prefix: 'glyphicon',
markerColor: 'green-light'
})
}).addTo(map);
// No Icons
L.marker([32.995, -117.245], {
icon: L.ExtraMarkers.icon({
icon: 'fa-number',
number: '42',
shape: 'square',
markerColor: 'black'
})
}).addTo(map);
L.marker([32.995, -117.240], {
icon: L.ExtraMarkers.icon({
icon: 'fa-number',
number: '42',
iconColor: 'black',
shape: 'star',
markerColor: 'white'
})
}).addTo(map);
//adds pop up to each marker
map.eachLayer(function (layer) {
if(layer._icon && layer._icon.className.includes('leaflet-marker-icon')) {
var popUpTextArray = [];
console.log(layer)
popUpTextArray.push('icon: ' + layer.options.icon.options.icon);
popUpTextArray.push('shape: ' + layer.options.icon.options.shape);
popUpTextArray.push('markerColor: ' + layer.options.icon.options.markerColor);
var popUpText = popUpTextArray.join('<br />');
layer.bindPopup(popUpText);
}
});
</script>
</body>
</html>
natto