Hi All.
Connecting to this thread:
looking at the posts indicated by @Erel where it is clear that the problem has existed for some time and has not yet been resolved, I thought that this solution which obviously does not bring back all the magnificent functions of jGoogleMap 2.01 but which to possibly display the map, polylines and circles can in the meantime buffer those who do not have strong needs on the display of the same (for example in my case it is necessary to display positions with a custom marker in real time).
Hoping that Oracle fixes everything quickly:
Connecting to this thread:
jGoogle Maps 2.01
I think Google changed something again: No imagery here notice. I followed all the steps in the previous update , JDK 19.0.02 Can anyone check if it still works on their side? Regards Philipwww.b4x.com
looking at the posts indicated by @Erel where it is clear that the problem has existed for some time and has not yet been resolved, I thought that this solution which obviously does not bring back all the magnificent functions of jGoogleMap 2.01 but which to possibly display the map, polylines and circles can in the meantime buffer those who do not have strong needs on the display of the same (for example in my case it is necessary to display positions with a custom marker in real time).
Hoping that Oracle fixes everything quickly:
Rich (BB code):
B4X:
#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
End Sub
Sub AppStart (Form1 As Form, Args() As String)
MainForm = Form1
MainForm.RootPane.LoadLayout("Layout1")
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
