leaflet-semicircle
Version:
Draw semicircles on Leaflet maps
65 lines (54 loc) • 2.23 kB
HTML
<html>
<head>
<title>Leaflet Pacman</title>
<link rel="stylesheet" href="pacman.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
<script src="../Semicircle.js"></script>
<script src="Pacman.js"></script>
</head>
<body>
<div id="info">
<h4><a href="https://github.com/jieter/Leaflet-semicircle">Walk Pacman on the map using leaflet-semicircle</a></h4>
<p>
Use the arrow keys to move pacman
</p>
</div>
<div id="map"></div>
<script>
var startAt = [51.508, -0.09];
var map = L.map('map', {
keyboard: false
}).setView(startAt, 12);
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
'attribution': 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
'subdomains': 'abcd',
'minZoom': 0,
'maxZoom': 20
}).addTo(map);
// make pacman
var pacman = new L.Pacman(startAt).addTo(map);
var key2dir = {
37: L.Pacman.LEFT,
38: L.Pacman.DOWN,
39: L.Pacman.RIGHT,
40: L.Pacman.UP
};
document.addEventListener('keydown', function (e) {
var keycode = window.event ? window.event.keyCode : e.which;
// do not do anything for other keys than the arrow keys
if (!(keycode in key2dir)) {
return;
}
e.preventDefault();
pacman.move(key2dir[keycode]);
});
map.on('zoomend', function (e) {
pacman.setZoom(e.target._zoom);
});
// move the #info div into the map
map.addControl(new (L.Control.extend({onAdd: function () { return L.DomUtil.get('info'); }}))());
</script>
</body>
</html>