leaflet-plugins
Version:
Miscellaneous plugins for Leaflet library for services that need to display route information and need satellite imagery from different providers
40 lines (36 loc) • 1.26 kB
HTML
<html>
<head>
<title>Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="../layer/vector/GPX.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script type='text/javascript'>
var map = L.map('map', {center: L.latLng(58.4, 43.0), zoom: 11});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var greenIcon = L.icon({
// from https://leafletjs.com/examples/custom-icons.html
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
});
var track = new L.GPX('fells_loop.gpx', {
async: true
}).on('loaded', function (e) {
map.fitBounds(e.target.getBounds());
}).on('addpoint', function (args) {
// set greemIcon for all point with 'Gate' in description
if (args.attributes.desc.indexOf('Gate') !== -1) {
args.point.setIcon(greenIcon);
}
}).addTo(map);
L.control.layers({}, {'GPX':track}).addTo(map);
</script>
</body>
</html>