leaflet-rotate
leaflet-rotate copied to clipboard
Published
20 hours ago •
Raruto
Raruto
Marker pop up is not aligning on rotate
Not sure why the popup(s) do not align with the marker's on rotate like in the below screen unlike in the example.
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile tutorial - Leaflet</title>
<link rel="shortcut icon" type="image/x-icon"
href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script
src="https://unpkg.com/[email protected]/dist/leaflet-rotate-src.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 400px;
width: 600px;
max-width: 100%;
max-height: 100%;
}
</style>
<style>
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
let latitude = 49.38225199447305;
let longitude = -122.1169636931414;
latitude = 49.303882;
longitude = -122.114965;
var stopIcon = L.icon({
// iconAnchor: [14, 35],
iconRetinaUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
iconSize: [28, 35],
iconUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
// popupAnchor: [1, -35],
shadowAnchor: [3, 34],
shadowRetinaUrl: 'marker-shadow.png',
shadowSize: [28, 39],
shadowUrl: 'marker-shadow.png',
});
const map = L.map('map', {
center: [latitude, longitude],
// layers: L.mapquest.tileLayer('map'),
zoom: 10,
zoomAnimation: false, /* DEBUG: L.Renderer._updateTransform() */
rotate: true,
rotateControl: {
closeOnZeroBearing: false,
position: 'bottomright',
},
bearing: 0,
// attributionControl: false,
// zoomControl: false,
// compassBearing: true,
// trackContainerMutation: false,
shiftKeyRotate: true,
// touchGestures: true,
touchRotate: true,
// touchZoom: true
}).fitWorld();
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
function onLocationFound(e) {
const radius = e.accuracy / 2;
var stopIcon = L.icon({
iconAnchor: [14, 35],
iconRetinaUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
iconSize: [28, 35],
iconUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
popupAnchor: [1, -35],
shadowAnchor: [3, 34],
shadowRetinaUrl: 'marker-shadow.png',
shadowSize: [28, 39],
shadowUrl: 'marker-shadow.png',
});
const locationMarker = L.marker(e.latlng, {
// icon: stopIcon
}).addTo(map)
.bindPopup(`You are within ${radius} meters from this point`);
latitude = e.latlng[0] - 0.00003;
longitude = e.latlng[1] - 0.00003;
const locationCircle = L.circle(e.latlng, radius).addTo(map);
}
const locationMarker2 = L.marker([latitude, longitude], {
// icon: stopIcon
}).addTo(map)
.bindPopup(`You are within x meters from this point 2`);
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
// map.locate({ setView: true, maxZoom: 10 });
/*
L.marker([49.406953, -122.718538], {
draggable: true,
// icon: stopIcon
})
// keepInView: true is not allowing to drag map
// .bindPopup(popUp, { maxHeight: 210, maxWidth: 100 });
.bindPopup("Content here", { maxHeight: 210, maxWidth: 150, content: "content goes here" })
// allMarkers[stop["stopCode"]] = marker;
// allMarkers[stop.stopCode]
.addTo(map);*/
</script>
</body>
</html>
Answering my own question. Commenting out zoomAnimation: false fixed the issue.