J'expérimente actuellement une librairie Javascript très intéressante, avec le nouveau gadget webview PB 6.10, pour des fonctions de geomapping.
Cette librairie utilise la cartographie d'Openstreetmap (https://www.openstreetmap.org).
Le test local avec un fichier index.html est assez simple, et concluant.
J'ai fait un essai également avec un code html converti et passé dans un String au gadget Webview,... sans succès.
Voici la documentation Leaflet Javascript library: https://leafletjs.com/index.html
Javascript et code CSS: https://leafletjs-cdn.s3.amazonaws.com/ ... eaflet.zip
La visualisation est réalisée sans anomalie dans le gadget webview avec un fichier html local appelé avec ce code:
Code : Tout sélectionner
Global URL_leaflet.s=ProgDirectory.s+"/html/index.html"
SetGadgetText(#WebView_OSM, URL_leaflet.s)leaflet.js - Code Leaflet JavaScript
leaflet.css - Feuille de style Leaflet
images - Ce répertoire, à l'emplacement de leaflet.css, contient des images référencées par la feuille de style.
Le fichier Index.html est placé dans le répertoire /html du projet:
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
<style>
body{
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map', {center: [48.863, 2.329], zoom: 12});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
var marker1 = L.marker([48.863, 2.329]).addTo(map);
map.on('click', onMapClick);
</script>
</body>
</html>Voici la définition Purebasic du String correspondant au code HTML précedent, passé au gadget Webview avec:
SetGadgetItemText(#WebView_1, #PB_Web_HtmlCode, HTML.s)
Code : Tout sélectionner
Global HTML.s
HTML.s="<!DOCTYPE html>\n"+
~"<html lang=\"en\">\n"+
~"<head>\n"+
~"<meta charset=\"UTF-8\">\n"+
~"<title>Leaflet</title>\n"+
~"<link rel=\"stylesheet\" href=\"js/leaflet.css\" />\n"+
~"<script src=\"js/leaflet.js\"></script>\n"+
~"<style>\n"+
~" body{\n"+
~" margin: 0;\n"+
~" padding: 0;\n"+
~" }\n"+
~" #map {\n"+
~" width: 100vw;\n"+
~" height: 100vh;\n"+
~" }\n"+
~"</style>\n"+
~"</head>\n"+
~"<body>\n"+
~"<div id=\"Map\"></div>\n"+
~"<script>\n"+
~" const Map = L.Map('map', {center: [48.86, 2.29], zoom: 12});\n"+
~" L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n"+
~" attribution: '© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n"+
~" }).addTo(Map);\n"+
~"function onMapClick(e) {\n"+
~"alert(\"You clicked the Map at \" + e.latlng);\n"+
~"}\n"+
~"var marker1 = L.marker([48.863, 2.329]).addTo(Map);\n"+
~"Map.on('click', onMapClick);\n"+
~"</script>\n"+
~"</body>\n"+
~"</html>"Ensuite, le but sera d'interagir avec le gadget Webview et Javascript (ajout de marqueurs, actualisation de positions avec des coordonnées GPS).
Je suis preneur de toute idée pour faire avancer ces tests.
Merci pour votre aide.
