Hi, Thunkable X, i done my community research about this project, since it is possible in the classic tho with some basic features, i already check the possible blocks and components that might be use using thunkable X, but it wont satisfied the project since
If you can work the API, it’s easy enough to send data to it.
the thunkable github has documentation on this
start here
Directions API | Google Developers
then here
then here
for example. i use this to make a bubblemap, i create the JSON data in my app. i transmit the data to the following HTML document stored on my github server space.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
type="text/javascript"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 900px;
border: 1px dotted #ddd;
margin: 1em auto;
}
</style>
</head>
<!--ThunkableWebviewerExtension.receiveMessage(function (message) {
try {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
var mapData = message;
-->
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="chartdiv"></div>
<script>
ThunkableWebviewerExtension.receiveMessage(function (message) {
try {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
var title = chart.titles.create();
title.text = "[bold font-size: 20]Current number of confirmed COVID19 cases per countery\nsource: https://api.covid19api.com/";
title.textAlign = "middle";
var mapData = message;
// Set map definition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.exclude = ["AQ"];
polygonSeries.useGeodata = true;
polygonSeries.nonScalingStroke = true;
polygonSeries.strokeWidth = 0.5;
polygonSeries.calculateVisualCenter = true;
polygonSeries.events.on("validated", function () {
imageSeries.invalidate();
})
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.data = mapData;
imageSeries.dataFields.value = "value";
var imageTemplate = imageSeries.mapImages.template;
imageTemplate.nonScaling = true
imageTemplate.adapter.add("latitude", function (latitude, target) {
var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
if (polygon) {
return polygon.visualLatitude;
}
return latitude;
})
imageTemplate.adapter.add("longitude", function (longitude, target) {
var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
if (polygon) {
return polygon.visualLongitude;
}
return longitude;
})
var circle = imageTemplate.createChild(am4core.Circle);
circle.fillOpacity = 0.7;
circle.propertyFields.fill = "color";
circle.tooltipText = "{name}: [bold]{value}[/]";
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"min": 4,
"max": 30,
"dataField": "value"
})
/*
var label = imageTemplate.createChild(am4core.Label);
label.text = "{name}"
label.horizontalCenter = "middle";
label.padding(0, 0, 0, 0);
label.adapter.add("dy", function (dy, target) {
var circle = target.parent.children.getIndex(0);
return circle.pixelRadius;
})
*/
} catch (e) {
console.error("An error occurred. Message probably wasn't a JSON string of an array of numbers");
}
});
</script>
</body>
</html>```wow!Thank you so much for this information, one more thing, if it dont consume too much time, can it be a favor to show how to implement this in a block way inside of a project? so anyone or me can view this as a open source code, this i believe some might get into this kind of project soon.
can ell progress/
well im late to reply
sory
You may also try this app