After clicking on the marker, map moves to some direction. #59
Description
I want to use couple maps in the same page.
But have strange behaviour when click to the marker in the second map. Map is moving to the top.
STR:
- Run code below
- Click to an any marker in the second map.
- Map will be moved to the top - BUG.
Also you can rotate and zoom map, and then click to an any marker in the second map. And map will be moved to some direction.
<!doctype 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="https://unpkg.com/leaflet-rotate@0.2.8/dist/leaflet-rotate-src.js"></script>
<!-- include some miscellaneous -->
<script src="https://unpkg.com/leaflet-rotate@0.2.8/misc/route.js"></script>
<script src="https://unpkg.com/leaflet-rotate@0.2.8/misc/places.js"></script>
<script src="https://unpkg.com/leaflet-rotate@0.2.8/misc/loremIpsum.js"></script>
<script src="https://unpkg.com/leaflet-rotate@0.2.8/lib/debug.js"></script>
<style>
#map,
#map2 {
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>
<div id="map2"></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',
},
);
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',
});
var map = L.map('map', {
center: [55, 10],
zoom: 2,
layers: [esri],
rotate: true,
rotateControl: {
closeOnZeroBearing: false,
},
bearing: 30,
touchRotate: true,
});
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),
);
}
</script>
<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('map2', {
center: [55, 10],
zoom: 2,
layers: [esri],
rotate: true,
rotateControl: {
closeOnZeroBearing: false,
},
bearing: 30,
touchRotate: true,
});
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),
);
}
</script>
</body>
</html>