OpenLayers Tile scales with Windows text scale in JavaFX application

2
votes

I have a problem with a WebView showing an OpenLayers map that is embedded in a JavaFX application.

I'm on a Windows 10 machine and when I change the Windows setting for the size of text, apps etc (under Display Settings) to something other than 100%, the map does not fill its parent anymore.

This is how it looks with 100%: Application at a 100% scale and this is when I scale text etc to 125%: Application at a 125% scale The code can be found here: 

import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.stream.Collectors;

public class Starter extends Application {

String html = "<!DOCTYPE html>\n"
              + "<html lang=\"en\">\n"
              + "<head>\n"
              + "    <meta charset=\"UTF-8\">\n"
              + "    <title>Title</title>\n"
              + "</head>\n"
              + "<body style=\"margin:0\">\n"
              + "<div id=\"map\"></div>\n"
              + "</body>\n"
              + "</html>";
String webview = "var map;\n"
                   + "function init(x, y, res)\n"
                   + "{\n"
                   + "    map = new ol.Map({\n"
                   + "            layers: [\n"
                   + "              new ol.layer.Tile({\n"
                   + "                source: new ol.source.OSM()\n"
                   + "              })\n"
                   + "            ],\n"
                   + "            target: 'map',\n"
                   + "            view: new ol.View({\n"
                   + "              center: [x, y],\n"
                   + "              projection: \"EPSG:3857\",\n"
                   + "              resolution: res\n"
                   + "            })\n"
                   + "          });\n"
                   + "}";

public static void main(String... args) {
    Starter.launch(args);
}

public void start(Stage primaryStage) {
    StackPane stackPane = new StackPane();
    Scene scene = new Scene(stackPane);

    WebView webView = new WebView();
    stackPane.getChildren().add(webView);

    setupMap(webView);
    webView.setMinWidth(800);
    webView.setMinHeight(600);

    webView.setVisible(true);

    primaryStage.setScene(scene);
    primaryStage.show();
}

private void setupMap(WebView webView) {
    WebEngine engine = webView.getEngine();

    engine.getLoadWorker().stateProperty().addListener(
      (ov, oldState, newState) -> {
          if (newState == Worker.State.SUCCEEDED) {
              Point2D somewhereInRome = new Point2D(1391089.0996927358, 5146427.764506837);
              engine.executeScript("init(" + somewhereInRome.getX() + "," + somewhereInRome.getY() + "," + 1 + ");");
          }
      });

    engine.loadContent(html);
    engine.executeScript(readResources("/js/ol.js"));
    engine.executeScript(webview);
}

private String readResources(String uri) {
    return new BufferedReader(new InputStreamReader(Starter.class.getResourceAsStream(uri))).lines().collect(Collectors.joining("\n"));
}
}

As you can see, nothing exciting is going on. What's confusing is that the controls do show at the bottom of the window in both cases.

I'd appreciate any pointers towards options I can use to set the size of the tiles correctly.

This is on JavaFX 13 and Java 11. The "ol.js" is OpenLayers version 5.3.0 downloaded today from https://openlayers.org/download/.

1
javafxwebviewopenlayers

1 Answers