How do i dynamicly update a google map using WebEngine in a java application?

I am trying to dynamicly update a google map with a marker showing the position of a bike. The position is simulated in another program and uploaded to a database.

I can successfully create a marker on the map showing the position of the bike if i run the line engine.executeScript("document.createBikeMarker(...)")

However, when i do this multiple times in the same process(for example in a for-loop, the map does not show a marker until the process is done, showing the last position i used to create the marker.

I need a way of making the map update each time i run executeScript.

Java class:

public class MapViewController implements Initializable {

private Factory myFactory = new Factory();
private BikeStatsModel bsm= new BikeStatsModel();
private ArrayList<Dock> allDocks;

@FXML
private Button showBikeBtn;

@FXML
private TextField bikeIdField;

@FXML
private WebView root;

private WebEngine engine;

@Override
public void initialize(URL location, ResourceBundle resources) {
    myFactory.updateSystem();
    engine=root.getEngine();
    engine.load(this.getClass().getResource
    ("/mapTest/googlemap.html").toExternalForm());
    engine.setJavaScriptEnabled(true);
    engine.getLoadWorker().stateProperty().addListener(e -> {
        showDocks();
    });
}

// converts from ArrayList<Dock> to double[][]
private double[][] dockToArray() {
    double[][] res = new double[allDocks.size()][3];
    for (int i = 0; i < res.length; i++) {
        res[i][0] = allDocks.get(i).getDockID();
        res[i][1] = allDocks.get(i).getxCoordinates();
        res[i][2] = allDocks.get(i).getyCoordinates();
    }
    return res;
}

// creates dock markers on the map using executeScript
public void showDocks() {
    allDocks = myFactory.getDocks();
    String dockData = arrayToString(dockToArray());
    engine.executeScript("var items = " + dockData + ";" +
            "document.setDockMarkers(items);");
}

 // shows the bikes current location on the map, and dynamicly updates the 
 // map every 3 seconds with new positions from the database.
@FXML
void showBike(ActionEvent event) {
    int bikeID = Integer.parseInt(bikeIdField.getText());
    double bikeXPos = 0;
    double bikeYPos = 0;
    for (int i = 0; i < 10; i++) {
        ArrayList<double[]> coordinates = bsm.getMostRecentCoordinates();
        for (double[] d : coordinates) {
            if (d[0] == bikeID) {
                bikeXPos = d[1];
                bikeYPos = d[2];
                engine.executeScript("document.createBikeMarker(" + bikeXPos 
+ ", " + bikeYPos + ");");
            }
        }
        try {
            sleep(3000);
        } catch(InterruptedException e){
            System.out.println("sleep interrupted in mapviewcontroller");
        }
    }
}

The map file in html / javascript:

<script type="text/javascript">
    function initialize() {
        var apiKey = "AIzaSyA44sw3tgul3F1t5xT2PeXkSm0GhQmUa6M";
        var directionsKey = "AIzaSyAQSLNDYInDRGGXsEDAOl_8sQ2JWQGcw6w";
        var latlng = new google.maps.LatLng(63.429276, 10.392517);
        var myOptions = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControl: false,
            streetViewControl: false,
            backgroundColor: "#666970"
        };

        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer({
            map : document.map
        });

        document.geocoder = new google.maps.Geocoder();
        document.map = new    
google.maps.Map(document.getElementById("map_canvas"),myOptions);
        directionsDisplay.setMap(document.map);


        var dockMarkers = [];
        var bikeMarkers = [];
        var destinations = [];
        var markers = [];
        var lineSymbol = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 8,
            strokeColor: '#393'
        };

        // creates a marker and pushes it to dockMarkers and sets it to the 
        // map
        document.createDockMarker = function createDockMarker(id, latitude, 
 longitude) {
            var latlngMarker = new google.maps.LatLng(latitude, longitude);
            document.marker = new google.maps.Marker({
                position: latlngMarker,
                map: document.map,
                draggable: false,
                title: id,
                visible: true
            });
            dockMarkers.push(document.marker);
            destinations.push(latlngMarker);
        }

        document.setMapOnAllDocks = function setMapOnAllDocks(map) {
            for (var i = 0; i < dockMarkers.length; i++) {
                dockMarkers[i].setMap(map);
            }
        }

        document.setMapOnAllBikes = function setMapOnAllBikes(map) {
            for (var i = 0; i < bikeMarkers.length; i++) {
                bikeMarkers[i].setMap(map);
            }
        }
            // creates a marker and pushes it to bikeMarkers adn sets it to 
            // the map
        document.createBikeMarker = function createBikeMarker(xPos, yPos){
            document.setMapOnAllBikes(null);
            bikeMarkers = [];
            var position = new google.maps.LatLng(xPos, yPos);
            document.marker = new google.maps.Marker({
                position : position,
                icon : lineSymbol,
                map : document.map,
                draggable : false,
                visible : true
            });
            bikeMarkers.push(document.marker);
            document.setMapOnAllBikes(document.map);
        }

        document.createMarker = function createMarker(location) {
            document.marker = new google.maps.Marker({
                position: location,
                map: document.map,
                draggable: false,
                visible: true
            });
            markers.push(document.marker);
        }
        //deletes all existing dock markers and creates new ones form a 
        // table of dock positions.
        document.setDockMarkers = function setDockMarkers(posData){
            document.setMapOnAllDocks(null);
            dockMarkers = [];

            for (var j = 0; j < posData.length; j++){
                document.createDockMarker(posData[j][0], posData[j][1], 
 posData[j][2]);
            }

        }


    }// initialize end
javascriptjavajavafxgoogle-api

Answers

comments powered by Disqus