#Region Project Attributes
#MainFormWidth: 1200
#MainFormHeight: 1200
#End Region
Sub Process_Globals
Private fx As JFX
Private MainForm As Form
Private xui As XUI
Private Button1 As Button
Private WebView1 As WebView
Private Button2 As B4XView
Private Button3 As B4XView
Private Button4 As B4XView
Private btn_markercluster As B4XView
Private btn_geocoder As B4XView
Private btn_routing As B4XView
Private btn_heatmap As B4XView
Private btn_draw As B4XView
End Sub
Sub AppStart (Form1 As Form, Args() As String)
MainForm = Form1
MainForm.RootPane.LoadLayout("Layout1")
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Mappa Iniziale</title>
<link rel='stylesheet' href='https://unpkg.com/leaflet/dist/leaflet.css' />
<script src='https://unpkg.com/leaflet/dist/leaflet.js'></script>
</head>
<body>
<div id='map' style='width: 100%; height: 100vh;'></div>
<script>
var map = L.map('map').setView([42.0, 12.5], 6); // Centra sull'Italia
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>"$
WebView1.LoadHtml(mappa)
MainForm.Show
End Sub
'One marker
Sub Button1_Click
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Marker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
var map = L.map('map').setView([41.9028, 12.4964], 13); // Roma
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Aggiunge un marker con popup
var marker = L.marker([41.9028, 12.4964]).addTo(map)
.bindPopup("<b>Ciao!</b><br>Sono un marker a Roma.")
.openPopup();
</script>
</body>
</html>"$
WebView1.LoadHtml(mappa)
End Sub
'More Marker
Private Sub Button2_Click
Dim piu_marker As String = $"var locations = [
{ lat: 41.9028, lon: 12.4964, text: "Roma" },
{ lat: 45.4642, lon: 9.1900, text: "Milano" },
{ lat: 40.8518, lon: 14.2681, text: "Napoli" }
];
locations.forEach(function(location) {
L.marker([location.lat, location.lon]).addTo(map)
.bindPopup(location.text);
});
"$
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Marker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata su Roma con un livello di zoom 6
var map = L.map('map').setView([41.9028, 12.4964], 6); // Roma
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Definisce l'icona personalizzata
var customIcon = L.icon({
iconUrl: 'img/marker.png', // Percorso dell'icona locale
iconSize: [32, 32], // Dimensione icona (larghezza, altezza)
iconAnchor: [16, 32], // Punto di ancoraggio (per centrare l'icona sulla posizione)
popupAnchor: [0, -32] // Posizione del popup rispetto all'icona
});
${piu_marker}
</script>
</body>
</html>"$
WebView1.LoadHtml(mappa)
End Sub
'Line
Private Sub Button3_Click
Dim piu_marker As String = $"var locations = [
{ lat: 41.9028, lon: 12.4964, text: "Roma" },
{ lat: 45.4642, lon: 9.1900, text: "Milano" },
{ lat: 40.8518, lon: 14.2681, text: "Napoli" }
];
locations.forEach(function(location) {
L.marker([location.lat, location.lon]).addTo(map)
.bindPopup(location.text);
});
"$
Dim congiungi As String = $"var points = [
[41.9028, 12.4964], // Roma
[45.4642, 9.1900], // Milano
[40.8518, 14.2681] // Napoli
];
L.polyline(points, { color: 'blue' }).addTo(map);"$
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Marker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata su Roma con un livello di zoom 6
var map = L.map('map').setView([41.9028, 12.4964], 6); // Roma
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Definisce l'icona personalizzata
var customIcon = L.icon({
iconUrl: 'img/marker.png', // Percorso dell'icona locale
iconSize: [32, 32], // Dimensione icona (larghezza, altezza)
iconAnchor: [16, 32], // Punto di ancoraggio (per centrare l'icona sulla posizione)
popupAnchor: [0, -32] // Posizione del popup rispetto all'icona
});
${piu_marker}
${congiungi}
</script>
</body>
</html>"$
WebView1.LoadHtml(mappa)
End Sub
'Circle
Private Sub Button4_Click
Dim piu_marker As String = $"var locations = [
{ lat: 41.9028, lon: 12.4964, text: "Roma" },
{ lat: 45.4642, lon: 9.1900, text: "Milano" },
{ lat: 40.8518, lon: 14.2681, text: "Napoli" },
{ lat: 44.4949, lon: 11.3426, text: "Bologna" },
{ lat: 43.7696, lon: 11.2558, text: "Firenze" }
];
locations.forEach(function(location) {
L.marker([location.lat, location.lon]).addTo(map)
.bindPopup(location.text);
});
"$
Dim congiungi As String = $"var points = [
[41.9028, 12.4964], // Roma
[45.4642, 9.1900], // Milano
[40.8518, 14.2681], // Napoli
[44.4949, 11.3426], // Bologna
[43.7696, 11.2558] // Firenze
];
L.polyline(points, { color: 'blue' }).addTo(map);"$
Dim circle As String = $"
// Lista delle città con cerchi di 50 km
var locations = [
{ lat: 41.9028, lon: 12.4964, text: "Roma" },
{ lat: 45.4642, lon: 9.1900, text: "Milano" },
{ lat: 40.8518, lon: 14.2681, text: "Napoli" },
{ lat: 44.4949, lon: 11.3426, text: "Bologna" },
{ lat: 43.7696, lon: 11.2558, text: "Firenze" }
];
// Aggiunge un cerchio per ogni città
locations.forEach(function(location) {
L.circle([location.lat, location.lon], {
color: 'blue', // Colore del bordo
fillColor: '#30f', // Colore di riempimento
fillOpacity: 0.3, // Opacità del riempimento
radius: 50000 // 50 km (50.000 metri)
}).addTo(map).bindPopup("Raggio di 50 km attorno a " + location.text);
});
"$
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Marker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata su Roma con un livello di zoom 6
var map = L.map('map').setView([41.9028, 12.4964], 6); // Roma
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Definisce l'icona personalizzata
var customIcon = L.icon({
iconUrl: 'img/marker.png', // Percorso dell'icona locale
iconSize: [32, 32], // Dimensione icona (larghezza, altezza)
iconAnchor: [16, 32], // Punto di ancoraggio (per centrare l'icona sulla posizione)
popupAnchor: [0, -32] // Posizione del popup rispetto all'icona
});
${piu_marker}
${circle}
${congiungi}
</script>
</body>
</html>"$
WebView1.LoadHtml(mappa)
End Sub
Private Sub btn_markercluster_Click
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet con MarkerCluster</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata sull'Italia
var map = L.map('map').setView([42.5, 12.5], 6);
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Crea il gruppo di cluster per i marker
var markers = L.markerClusterGroup();
// Definisce le posizioni dei marker
var locations = [
{ lat: 41.9028, lon: 12.4964, text: "Roma" },
{ lat: 45.4642, lon: 9.1900, text: "Milano" },
{ lat: 40.8518, lon: 14.2681, text: "Napoli" },
{ lat: 43.7696, lon: 11.2558, text: "Firenze" },
{ lat: 44.4949, lon: 11.3426, text: "Bologna" }
];
// Aggiunge i marker al cluster
locations.forEach(function (location) {
var marker = L.marker([location.lat, location.lon]).bindPopup("<b>" + location.text + "</b>");
markers.addLayer(marker);
});
// Aggiunge il cluster alla mappa
map.addLayer(markers);
</script>
</body>
</html>"$
WebView1.LoadHtml(mappa)
End Sub
Private Sub btn_geocoder_Click
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Geocoder - Nominatim</title>
<!-- CSS per Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<!-- JS per Leaflet e Geocoder -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<style>
/* Migliora la visibilità dei risultati */
.leaflet-control-geocoder-alternatives {
max-height: 200px;
overflow-y: auto;
font-size: 14px;
}
</style>
</head>
<body>
<!-- Contenitore della mappa -->
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata sull'Italia
var map = L.map('map').setView([42.0, 12.5], 6);
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Configura il Geocoder con Nominatim
var geocoder = L.Control.geocoder({
geocoder: new L.Control.Geocoder.Nominatim({
serviceUrl: 'https://nominatim.openstreetmap.org/',
geocodingQueryParams: {
countrycodes: 'IT', // Limita la ricerca all'Italia
addressdetails: 1, // Ottieni più dettagli
format: 'json'
}
}),
defaultMarkGeocode: false // Evita di aggiungere un marker automatico
})
.on('markgeocode', function(e) {
var latlng = e.geocode.center;
// Aggiunge un marker e centra la mappa
L.marker(latlng).addTo(map)
.bindPopup(e.geocode.name)
.openPopup();
map.setView(latlng, 12); // Zoom sulla posizione trovata
})
.addTo(map);
</script>
</body>
</html>
"$
WebView1.LoadHtml(mappa)
End Sub
Private Sub btn_routing_Click
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Routing Machine - Solo Percorso e Marker</title>
<!-- CSS per Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS per Leaflet e Routing Machine -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
</head>
<body>
<!-- Contenitore della mappa -->
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata sull'Italia
var map = L.map('map').setView([42.0, 12.5], 6);
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Definisce i punti di partenza e arrivo
var start = L.latLng(41.9028, 12.4964); // Roma
var end = L.latLng(45.4642, 9.1900); // Milano
// Aggiunge i marker di partenza e arrivo con popup
L.marker(start).addTo(map).bindPopup("Partenza: Roma").openPopup();
L.marker(end).addTo(map).bindPopup("Arrivo: Milano");
// Crea il percorso tra i due punti SENZA LEGENDA
var route = L.Routing.control({
waypoints: [start, end],
routeWhileDragging: true, // Permette di trascinare il percorso
createMarker: function() { return null; }, // Nasconde i marker predefiniti di Leaflet Routing Machine
router: L.Routing.osrmv1({ suppressDemoServerWarning: true }), // Evita messaggi di avviso
addWaypoints: false, // Impedisce di aggiungere altri punti
draggableWaypoints: false, // Blocca il trascinamento dei punti
fitSelectedRoutes: true, // Adatta la mappa al percorso
lineOptions: {
styles: [{ color: 'blue', opacity: 0.7, weight: 5 }]
}
});
// *** RIMUOVE LA LEGENDA COMPLETAMENTE ***
route.on('routesfound', function(e) {
document.querySelector(".leaflet-routing-container")?.remove();
});
route.addTo(map);
</script>
</body>
</html>
"$
WebView1.LoadHtml(mappa)
End Sub
Private Sub btn_heatmap_Click
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Heatmap</title>
<!-- CSS per Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS per Leaflet e Heatmap -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
</head>
<body>
<!-- Contenitore della mappa -->
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata sull'Italia
var map = L.map('map').setView([42.0, 12.5], 6);
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Dati per la Heatmap: [latitudine, longitudine, intensità]
var heatmapData = [
[41.9028, 12.4964, 0.8], // Roma (intensità 0.8)
[45.4642, 9.1900, 0.9], // Milano (intensità 0.9)
[40.8518, 14.2681, 0.7], // Napoli (intensità 0.7)
[44.4949, 11.3426, 0.6], // Bologna (intensità 0.6)
[43.7696, 11.2558, 0.7], // Firenze (intensità 0.7)
[37.5022, 15.0873, 1.0], // Catania (intensità massima 1.0)
[39.2238, 9.1217, 0.5] // Cagliari (intensità 0.5)
];
// Aggiunge la Heatmap alla mappa
L.heatLayer(heatmapData, {
radius: 25, // Raggio di diffusione del calore
blur: 15, // Sfocatura del calore
maxZoom: 10, // Zoom massimo a cui la heatmap è visibile
minOpacity: 0.3 // Opacità minima
}).addTo(map);
</script>
</body>
</html>"$
WebView1.LoadHtml(mappa)
End Sub
Private Sub btn_draw_Click
Dim mappa As String = $"<!DOCTYPE html>
<html>
<head>
<title>Leaflet Draw - Disegno su Mappa</title>
<!-- CSS per Leaflet e Leaflet Draw -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<!-- JS per Leaflet e Leaflet Draw -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
</head>
<body>
<!-- Contenitore della mappa -->
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
// Inizializza la mappa centrata sull'Italia
var map = L.map('map').setView([42.0, 12.5], 6);
// Aggiunge il tile layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Gruppo per disegni personalizzati
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Aggiunge il controllo per disegnare e modificare
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems, // Permette di modificare gli elementi disegnati
remove: true // Abilita la cancellazione di oggetti
},
draw: {
polygon: true, // Abilita il disegno di poligoni
polyline: true, // Abilita il disegno di linee
rectangle: true, // Abilita il disegno di rettangoli
circle: true, // Abilita il disegno di cerchi
marker: true // Abilita il disegno di marker
}
});
map.addControl(drawControl);
// Eventi per gestire i disegni
map.on('draw:created', function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
console.log("Oggetto disegnato:", layer);
});
map.on('draw:edited', function (e) {
console.log("Oggetti modificati:", e.layers);
});
map.on('draw:deleted', function (e) {
console.log("Oggetti cancellati:", e.layers);
});
</script>
</body>
</html>
"$
WebView1.LoadHtml(mappa)
End Sub