1

I currently building a desktop routing application using Java and JavaFX plus MapBox and Leaflet. My problems occured when i try to load a vector tile into a WebView component. If i'm using this HTML to load a map its working fine (this is vector tile?):

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Interactive Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
    //For MapBox
    L.accessToken = 'MY_TOKEN';

    var map = L.map('map').setView([51.125736,17.080392]).setZoom(6);

    L.tileLayer(
        'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-day-v4/tiles/{z}/{x}/{y}?access_token=' + L.accessToken, {
            tileSize: 512,
            zoomOffset: -1,
            attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
</script>
</body>
</html>

I found some information that says I need to use Mapbox GL JS to load vector tiles. So i used a example code to load it:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display map navigation controls</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
    mapboxgl.accessToken = 'MY_TOKEN';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-74.50, 40], // starting position
        zoom: 9 // starting zoom
    });

    // Add zoom and rotation controls to the map.
    map.addControl(new mapboxgl.NavigationControl());
</script>

</body>
</html>

And loading through Java level:

public class MainController implements Initializable {
    @FXML
    public WebView webView;

    /*MenuBar methods*/
    public void closeApplication() {
        Optional<ButtonType> confirmationResult = Dialog.closeApplicationConfirmation();
        if (confirmationResult.get() == ButtonType.OK) {
            Platform.exit();
        }
    }

    public void openReport() {
        try {
            AnchorPane anchorPane = UtilsConnection.getFXML("/FXML/ReportWindow.fxml");
            Scene scene = new Scene(anchorPane);
            Stage stage = new Stage();
            stage.setScene(scene);
            stage.setTitle(UtilsConnection.getBundles().getString("title.rep"));
            stage.getIcons().add(new Image("images/logo.png"));
            stage.setResizable(false);
            stage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

    public void openAbout() {
        Dialog.aboutApplication();
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        try {
            URL url = this.getClass().getResource("/html/mapGL.html");
            webView.getEngine().load(url.toString());
        } catch (Exception e) {
            Dialog.error(e.getMessage());
        }
    }
}

So my question is. It's any possibility to load vector tiles in Java App this way? Cause if i use Mapbox GL JS i have blank page.. It's any better way to display map to create routing app ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.