I'm having trouble creating an object using the addObject function in an HTML element in Bubble.io.
I think the problem is related to the passing of arguments between functions (specially the “map” one).
In this example, the whole “map.object” part creates a circle in my map (which is displayed in the HTML element that contains my script). My goal is to have that chunk of code inside the addCircleToMap function, so that whenever a click is registered, the code will run. My problem is that whenever I do that, the addObject function is not recognized (inside of the addCircleToMap). But when I run it as in the example above (outside of said function) it is recognized and creates the circle as needed, but only one time.
If I want it to run inside of the addCircleToMap function, do I need to change anything? Thank you very much for your help!
<html>
<head>
<title> MY MAP</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
</head>
<style>
#map {width: 800px; height: 600px;}
</style>
<div id="map"></div>
<body>
<script>
function initializeHEREmap(){
var mapContainer = document.getElementById('map'), routeInstructionsContainer = document.getElementById('panel');
let newLat = 19.46291370462809;
let newLng = -99.13708437766161;
const imlService = platform.getIMLService();
const platform = new H.service.Platform({
apikey: '*******************'
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: new H.geo.Point(newLat, newLng),
zoom: 12
}
);
window.addEventListener('resize', () => map.getViewPort().resize());
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);
setUpClickListener(map, newLat, newLng);
function setUpClickListener(map, newLat, newLng) {
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX, evt.currentPointer.viewportY);
newLat = coord.lat;
newLng = coord.lng;
addCircleToMap(map, newLat, newLng );
});
map.addObject(new H.map.Circle(
{lat:newLat, lng:newLng},
500,
{
style: {
strokeColor: 'rgba(55, 85, 170, 0.6)',
lineWidth: 2,
fillColor: 'rgba(89, 80, 218, 0.7)'
}
}
));
}
function addCircleToMap(map, newLat, newLng ){
//I WANT MY CODE HERE
}
}
</script>
</body>
</html>
