I have an HTML file to use Leaflet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Leaflet Map</title>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="qrc:/qtwebchannel/qwebchannel.js"></script>
</head>
<style>
#map {
width: 100%;
height: 580px;
box-shadow: 5px 5px 5px #888;
}
</style>
<body>
<div id="map" style="height: 800px;"></div>
<script>
var map = L.map('map').setView([41.66, -4.72], 15);
var streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Add the satellite layer
var satelliteLayer = L.tileLayer('https://example.com/satellite/{z}/{x}/{y}.png', {
attribution: '© Satellite Imagery Providers'
});
// Create an object to communicate with C++
new QWebChannel(qt.webChannelTransport, function(channel) {
var mapObject = channel.objects.mapObject;
// Change the map
mapObject.setMap = function(mapType) {
if (mapType === 'satellite') {
// Change to a satellite map
map.removeLayer(streetLayer);
map.addLayer(satelliteLayer);
} else {
// Change to street map
map.removeLayer(satelliteLayer);
map.addLayer(streetLayer);
}
};
// Add points to map
mapObject.addPoint = function(lat, lon) {
L.marker([lat, lon]).addTo(map);
};
});
</script>
</body>
</html>I can display the Leaflet map if I use a python server and the QtWebEngine shows the URL of the HTML file of leaflet. Like:
webEngineView->load(QUrl("http://0.0.0.0:8080/leaflet_example.html"));
But I would like to show the file directly:
QVBoxLayout *layout = new QVBoxLayout(this);
webEngineView = new QWebEngineView(this);
layout->addWidget(webEngineView);
// Create the communication channel
QWebChannel *channel = new QWebChannel(this);
webEngineView->page()->setWebChannel(channel);
// Add the leaflet to the channel
channel->registerObject("leafletWidget", this);
webEngineView->load(QUrl(":/files/leaflet_example.html"));
How can I do it? Right now, it finds the HTML, but it shows a blank page.
When I use the python server there is an output in the terminal that looks like errors but I can see the map. The terminal shows:
Property 'modal'' of object 'MapWidget' has no notify signal, is not bindable and is not constant, value updates in HTML will be broken!
Property 'windowModality'' of object 'MapWidget' has no notify signal, is not bindable and is not constant, value updates in HTML will be broken!