leaflet-rotate
Version:
A Leaflet plugin that allows to add rotation functionality to map tiles
167 lines (141 loc) • 4.77 kB
HTML
<html>
<head>
<title>leaflet-rotate.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Leaflet JS / CSS -->
<script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
<!-- Leaflet-Rotate -->
<script src="../dist/leaflet-rotate-src.js"></script>
<!-- include some miscellaneous -->
<script src="../misc/route.js"></script>
<script src="../misc/places.js"></script>
<script src="../misc/loremIpsum.js"></script>
<script src="../lib/debug.js"></script>
<style>
#map {
width: 100%;
height: 600px;
border: 1px solid #ccc;
max-height: 50vh;
}
/* TODO: fix incorrect map corners position when map has some margin */
html, body {
/* margin: 0; */
/* padding: 0; */
}
</style>
</head>
<body>
<div id="map"></div>
<hr>
<div>
<p>
<strong>Fly to bounds: </strong>
<button onclick="map.flyToBounds(circle.getBounds());">CIRCLE</button>
<button onclick="map.flyToBounds(polygon.getBounds());"> POLYGON</button>
<button onclick="map.flyToBounds(path.getBounds());">PATH</button>
</p>
<p>
<strong>Fly to: </strong>
<button onclick="map.flyTo(places['Kyiv'], 10);">Kyiv</button>
<button onclick="map.flyTo(places['London'], 10);">London</button>
<button onclick="map.flyTo(places['San Francisco'], 10);">San Francisco</button>
<button onclick="map.flyTo(places['Washington'], 10);">Washington</button>
<button onclick="map.flyTo(places['Trondheim'], 10);">Trondheim</button>
</p>
<p>
<strong>Fit bounds (z = 0): </strong>
<button onclick="map.setZoom(0, {animate: false}) && setTimeout(() => map.fitBounds(rectangle.getBounds(), { animate: false }), 1000);" title="DEBUG: map.setZoom(0) && map.getBoundsZoom(rectangle.getBounds())">RECTANGLE</button>
</p>
</div>
<script>
var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
id: 'mapbox.streets',
maxZoom: 24,
maxNativeZoom: 18,
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
// noWrap: true
});
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 24,
maxNativeZoom: 19,
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
// noWrap: true
});
var map = L.map('map', {
center: [55, 10],
zoom: 2,
layers: [esri],
// worldCopyJump: true,
// preferCanvas: false,
zoomAnimation: false, /* DEBUG: L.Renderer._updateTransform() */
rotate: true,
rotateControl: {
closeOnZeroBearing: false,
// position: 'bottomleft',
},
bearing: 30,
// attributionControl: false,
// zoomControl: false,
compassBearing: true,
// trackContainerMutation: false,
// shiftKeyRotate: false,
// touchGestures: true,
touchRotate: true,
// touchZoom: true
});
// map.setBearing(90);
// map.touchRotate.enable();
// map.touchZoom.disable()
// map.compassBearing.disable()
// map.touchGestures.enable()
// map.zoomControl.setPosition('bottomleft');
// map.rotateControl.setPosition('bottomleft');
// map.setMaxBounds([[-90,-180], [90,180]]);
var layers = L.control.layers({
'Empty': L.tileLayer(''),
'Streets': osm,
'Satellite': esri,
}, null, {
collapsed: false
}).addTo(map);
var markers = [];
for (var i in places) {
markers.push(L.marker(places[i], {
draggable: true
})
.bindPopup('<b>' + i + '</b><br>' + loremIpsum)
.bindTooltip('<b>' + i + '</b>',
markers.length ? {} : {
direction: 'right',
permanent: true
}
)
.addTo(map));
}
var path = L.polyline(route, {
renderer: L.canvas()
}).addTo(map);
var circle = L.circle([53, 4], 111111)
.addTo(map);
var polygon = L.polygon([
[48, -3],
[50, -4],
[52, 4]
]).addTo(map);
const rectangle = L.rectangle([
[60.81123, 25.71632],
[60.81028, 25.73166],
[60.7997, 25.72892],
[60.80061, 25.71362]
]).addTo(map);
// Display some debug info
L.Rotate.debug(map);
</script>
<a href="https://github.com/Raruto/leaflet-rotate" class="view-on-github" style="position: fixed;bottom: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"
width="163"> </a>
</body>
</html>