Raruto
Use with MapLibre doesn't work :(
I need to use MapLibre maps to store tiles legally for offline use. Everything works fine without the leaflet rotation feature. Any ideas to make it compatible?
This code works until you uncomment the leaflet-rotate script:
<!DOCTYPE html>
<html>
<head>
<title>WebGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<!-- Leaflet -->
<link rel="stylesheet" href="./resources/leaflet/dist/leaflet.css" />
<script src="./resources/leaflet/dist/leaflet.js"></script>
<!--
<script src="./resources/leaflet-rotate/dist/leaflet-rotate.js"></script>
-->
<!-- Maplibre GL -->
<link href="./resources/maplibre-gl.css" rel='stylesheet' />
<script src="./resources/maplibre-gl.js"></script>
<!-- Leaflet Maplibre GL plugin -->
<script src="./resources/leaflet-maplibre-gl.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
.bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
.addTo(map)
.openPopup();
var gl = L.maplibreGL({
// Cambia el estilo según tus necesidades
style: './resources/liberty.json',
}).addTo(map);
</script>
</body>
</html>
Hi @caronte3d,
It really depends on how other libraries work internally.
BTW, usually in here, you have to make sure your layer is added to one of the rotated "panes" (ref: https://github.com/Raruto/leaflet-rotate/issues/2).
👋 Raruto
PS: If you could also attach a jsfiddle that would be easier to debug.. 😉
Hi @Raruto, The attached code above is a simple snippet you can save to an html file (notice local scripts). As you can see, the only fact of uncomment the leaflet-rotate.js breaks everything and nothing works. Really would be vey nice if you can make it compatible with maplibre, because actually it's THE ONLY tiles provider that allow to use and download maptiles for free (even for comercial use).
@caronte3d I don't know if you were ever able to fix your issue, but the code in your example is wrong. You didn't set any options related to leaflet-rotate. Without specifying the options, your code as it is ends up with:
"Uncaught TypeError: can't access property "rotate", o is undefined".
If you define the options as follow:
const options = {
bearing: 0,
rotate: true,
touchRotate: true,
rotateControl: {
closeOnZeroBearing: false
}
};
And then call L.map() with the options as the second parameter, this works properly:
var map = L.map('map', options).setView([38.912753, -77.032194], 15);
Next thing you'll know, leaflet-rotate will allow you to rotate the map without any issue.
@Raruto I think this issue can be closed.
