I am experimenting a great Javascript library, Leaflet, with Purebasic new webview gadget (PB 6.10) for geomapping features.
This library is associated to Openstreetmap site (https://www.openstreetmap.org).
Local test with an index.html file is quite simple and conclusive.
I made a try also with html code converted and passed in a string to the webwiew gadget,... but without success (blank view with the same code).
Here is the Leaflet Javascript library documentation: https://leafletjs.com/index.html
Javascript and CSS code: https://leafletjs-cdn.s3.amazonaws.com/ ... eaflet.zip
The visualisation in the webview gadget is done without any anomaly when i used a local html file called with this code:
Code: Select all
Global URL_leaflet.s=ProgDirectory.s+"/html/index.html"
SetGadgetText(#WebView_OSM, URL_leaflet.s)leaflet.js - This is the minified Leaflet JavaScript code
leaflet.css - The stylesheet for Leaflet
images - This folder, in the same directory as leaflet.css, contains images referenced by leaflet.css. .
Index.html file is placed in /html directory of my project:
Code: Select all
<!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>SetGadgetItemText(#WebView_1, #PB_Web_HtmlCode, HTML.s)
Here is the string code:
Code: Select all
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>"After that, a new focus will be interacting with the webview gadget and Javascript, adding a new marker, and updating its position using GPS location.
Thank you for your help.
