How yo use openseamap in QML?

Aurentiaco

Hello I am developing a qml map in Qt 5.15.2 and I need to use openseamap as a map. For that I am using openstreetmap plugin and want to add layer of openseamap in it. Does anybody have any idea of how can I do that. Or is there any other ways to do that. I want to make a marine map application actually. This is my qml code so far and also I want to use that map offline too and when it connects the internet I want to update the map.

import QtLocation 5.15
import QtPositioning 5.3
import QtQuick 2.15
import QtQuick.Controls 2.2


Rectangle {
    width: 1024
    height: 768

    function handleZoom(){
        if(map.zoomLevel < 14){
            centerAnimation.start();
        }else{
            zoomOutAnimation.start();
        }
    }

    function zoomIn(){
        handleZoom();
    }

    function zoomOut(){
        zoomOutAnimation.start();
    }

    Map {
        id: map
        anchors.fill: parent

        plugin: Plugin {
            name: "osm"
        }

        zoomLevel: 14
        minimumZoomLevel: 0
        maximumZoomLevel: 18
        tilt: 0

        PropertyAnimation {
            id: centerAnimation
            target: map
            properties: "center"
            from: map.center
            to: QtPositioning.coordinate(_latitude, _longitude)
            duration: 1000
            easing.type: Easing.InOutQuad

            onStopped: {
                zoomInAnimation.start(500);
            }
        }
        NumberAnimation {
            id: zoomOutAnimation
            target: map
            properties: "zoomLevel"
            from: map.zoomLevel
            to: 14  // You can adjust the zoom-out level
            duration: 500  // Duration of the animation in milliseconds

            onStopped: {
                centerAnimation.start(200)
            }
        }
        NumberAnimation {
            id: zoomInAnimation
            target: map
            properties: "zoomLevel"
            from: map.zoomLevel
            to: 17  // You can adjust the zoom-out level
            duration: 500  // Duration of the animation in milliseconds
        }
        MapQuickItem {
            anchorPoint.x: marker.width / 2
            anchorPoint.y: marker.height

            sourceItem: Item {
                width: 30
                height: 30

                Rectangle {
                    id: marker
                    width: 10
                    height: 10
                    color: "red"
                    radius: 3
                }
            }

            coordinate: QtPositioning.coordinate(_latitude, _longitude)
        }
        Button {
            text: "Center"
            onClicked: {
                zoomIn();
            }
            // Make the button round
            width: 70
            height: 70


            // Apply circular background
            background: Rectangle {
                width: parent.width
                height: parent.height
                radius: 35
                color: "lightblue" // Set your desired background color
            }

            anchors {
                bottom: parent.bottom
                right: parent.right
                bottomMargin: 30
                rightMargin: 30
            }
        }

        ComboBox {
            id: styleComboBox
            model: ListModel {
                id: styleModel
            }
            onActivated: {
                map.activeMapType = map.supportedMapTypes[index];
            }
            Component.onCompleted: {
                for (var i = 0; i < map.supportedMapTypes.length; i++) {
                    styleModel.append({ text: map.supportedMapTypes[i].description });
                }
            }

            anchors.top: parent.top
            anchors.right: parent.right
            anchors.topMargin: 10
            anchors.rightMargin: 10
        }
    }
}

Ronel_qtmaster

@Aurentiaco i will advice you to use here map or mapbox instead since direct access to osm map has been removed in newer versions of Qt

JKSH

@Aurentiaco said in How yo use openseamap in QML?:

I need to use openseamap as a map. For that I am using openstreetmap plugin and want to add layer of openseamap in it

You'll need two separate maps -- One to download and display the street tiles, and one to download and display the seamark tiles:

Map {
    id: streetMap
    anchors.fill: parent
    plugin: Plugin { name: "osm" }
    center: seamarkMap.center // Sync the 2 maps' centers
    zoomLevel: seamarkMap.zoomLevel // Sync the 2 maps' zoomLevels
    z: -1 // Place this underneath the seamarks
}

Map {
    id: seamarkMap
    anchors.fill: parent
    color: "transparent" // Allow the street tiles to be seen though the transparent parts of the seamap tiles
    plugin: Plugin {
        name: "osm"
        PluginParameter {
            name: "osm.mapping.custom.host"
            value: "https://tiles.openseamap.org/seamark/"
        }
    }
    activeMapType: supportedMapTypes[supportedMapTypes.length-1]
    center: QtPositioning.coordinate(59.91, 10.75) // Oslo
    zoomLevel: 14
}

I want to use that map offline too and when it connects the internet I want to update the map.

See https://forum.qt.io/topic/95390/qt-offline-maps-using-osm-tiles for information on how to use OSM maps offline. However, note that these are permanently offline.

You'll need to write extra code to switch between online and offline mode, and to update your own local tiles.

JKSH

@Ronel_qtmaster said in How yo use openseamap in QML?:

i will advice you to use here map or mapbox instead since direct access to osm map has been removed in newer versions of Qt

That's not true. OSM is retained in Qt 6, while all other providers (like Mapbox) have been removed: https://www.qt.io/blog/the-road-to-qt-location