JavaFX with google map and JSON sample

1.google map上でクリックしたポイントを元に、HTMLのTableに行を追加とmap上にマーカーを表示。
2.上記１の情報をJavaScriptからJavaFXのメソッドをcallしてJson形式のファイルとして保存。
3.JavaFXで上記２のjsonファイルを読み込んで、JavaScriptのメソッドをcallしてHTMLのTableに行を追加とmap上にPolylineを描画。

• 画面１(map上でクリックしたポイントをTableに追加＆マーカを作成した時)

（JavaFXでWebViewを使った時にマーカの背景が黒になる？color pickerは使えない？）

• 画面２(save to jsonボタンをクリックした時のダイアログ、json ファイルとして画面１の情報を保存)

• 画面３(load json to mapボタンをクリックした時のダイアログ、画面２でTagsに選んだ色が表示されてかわいい)

• 画面４(画面１の操作を保存したjsonファイルを元に、mapとTableに表示)

JavaScriptからJavaFXのメソッドをcall(save to json ボタン処理)

• MapPositionSample.java

        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();
        URL url = getClass().getResource("sample.html");
        engine.load(url.toExternalForm());
        JSObject win = (JSObject) engine.executeScript("window");
        win.setMember("app", new JavaApp(stage)); // *** for javascript 
...
    public class JavaApp {
        private Stage stage;
        public JavaApp(Stage stage) {
            this.stage = stage;
        }
        /**
         * called from JavaScript by clicking [save to Json] button
         * @param infos 
         */
        public void getInfoList(String infos) {
            FileChooser fileChooser = new FileChooser();
            File file = fileChooser.showSaveDialog(this.stage);
            try (BufferedWriter writer = new BufferedWriter(new FileWriter(file))) {
                writer.write(infos);
            } catch (IOException ex) {
                Logger.getLogger(MapPositionSample.class.getName()).log(Level.SEVERE, null, ex);
            }
        }
    }

• sample.js

function saveJson(){
    // remove deleted info
    var newList = [];
    pointsInfo.infoList.forEach(function(info){
        if (!info.isDeleted){
            delete info.latlng;
            newList.push(info);
        }
    });
    // call java method
    var infos = JSON.stringify(newList);
    app.getInfoList(infos); // *** call Java method
}

JavaFX からJavaScriptのメソッドをcall(load json to map ボタン処理)

• MapPositionSample.java

        loadBtn.setOnAction(e -> {
            FileChooser fileChooser = new FileChooser();
            File file = fileChooser.showOpenDialog(stage);
            try (BufferedReader reader = new BufferedReader(new FileReader(file))){
                // file to json
                Object obj = JSONValue.parse(reader);
                // call JacaScript method with JSON object
                engine.executeScript("drawPolylineFromJson(" + obj + ")"); // *** call java script
            } catch (Exception ex) {
                Logger.getLogger(MapPositionSample.class.getName()).log(Level.SEVERE, null, ex);
            }
        });

• sample.js

function drawPolylineFromJson(pointsListJson){
    // clear map & table
    pointsInfo.pointNo = -1; // reset no
    pointsInfo.deleteAllMarkers(); // remove all markers from map
    initPolyLine.setMap(null); // remove KIX - SFO Polyline
    var tbody = $('#points');
    tbody.children().remove();
    var kixLatLng = infos[0];
    var sfoLatLng = infos[1];
    var prevPath = new google.maps.LatLng(kixLatLng.lat, kixLatLng.lng);
    pointsListJson.forEach(function(info){
        pointsInfo.addPoint(info);
        // add point to table 
        addTr(pointsInfo.getPoint());
        // create polyline
        var thisPath = new google.maps.LatLng(info.lat, info.lng);
        var polylineOpt = {
           map: map,
           path: [prevPath, thisPath],
           strokeColor: info.color
       };
       new google.maps.Polyline(polylineOpt);    
       prevPath = thisPath;
    });
    // last place - SFO
    var sfoPath = new google.maps.LatLng(sfoLatLng.lat, sfoLatLng.lng);
    var polylineOpt = {
       map: map,
       path: [prevPath, sfoPath],
       strokeColor: '#000000'
    };
    new google.maps.Polyline(polylineOpt);    
}

とりあえずメモとしてアップtomoTaka01/MapPositonSample - JavaScript - GitHub
全然説明が書けてない、、、