Forums

OverviewV-Play 2 Support (Qt 5) › MapQuest OSM mapping direct tile access discontinued – how to setup AppKey

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #14064

    André

     

    Hi,

    on mapping sample apps I’m getting this message on the map view :

    “As of July 11, 2016, direct tile access has been discontinued. Please visit our blog post for more information : http://goo.gl/xB0xXt

    is there a way to specify the AppKey to the current osm plugin ? Or is there QML mapping alternative ?

     

    thank you

     

    André

    #14066

    André
    #14068

    Günther
    V-Play Team

    Hi André!

    Unfortunately, until Qt updates their OSM plugin to allow specifying the now required AppKey, it is not possible to use OSM for QML-based maps.

    I would recommend to either use MapBox or Here as the map provider. Both plugins require registration on their website and id/token parameters in the QML Plugin definition. But besides that, everything should work just the same as with OSM.

    For example to use the MapBox plugin, simply replace the

            plugin: Plugin { name: "osm" }

    setting of the AppMap with

            plugin: Plugin { 
              name: "mapbox" 
              PluginParameter { name: "mapbox.access_token"; value: "<your-access-token>" }
              PluginParameter { name: "mapbox.map_id"; value: "<your-map-id>" }
            } 

    and use the access-token and map-id from your MapBox account.

     

    Hope this helps!

    Best,
    Günther

    #14070

    André

    Thank you Günther, it works !

     

     

    #14879

    Bas

    does it still work?

    i get an error, how can i get the map id?

     

                plugin: Plugin {
                    name: "mapbox"
                    PluginParameter { name: "mapbox.access_token"; value: "pk.etcetcetc" }
                    PluginParameter { name: "mapbox.map_id"; value: "lentfert/cit42qqkc006o2xqr377tw7di" }
    

    is this the correct map id? i created a map in the styles section?

    or how can i retreive the map id?

    thanx in advace

    Bas

    #14881

    Günther
    V-Play Team

    Hi Bas!

    I never tried using a map with custom styles for the Qt MapBox Plugin, so I’m also not sure how/if this is supported and what to set for the mapId.
    You might be able to find some answers in the official Qt Forums.

     

    What definitely works:

    • There are some default MapBox styles / ids that can be used, e.g. “mapbox.streets”
    • If you do not use the new MapBox Editor with Styles / Tiles, but the old “Mapbox Classic” to create a map, you can access and use this map’s id.

    Hope this helps!

    Best,
    Günther

    #14883

    Bas

    yes that is “mapbox.streets” working,

    I have asked support of mapbox how i can get the map id

     

    if i know some more i will post it.

    #14884

    Bas

    i am experiencing weird beihavior though, when using

                    PluginParameter { name: "mapbox.map_id"; value: "mapbox.streets" }
    

    and position:

                center: QtPositioning.coordinate( 40.714728,-73.998672)
    

     

    #14885

    Bas

    hmm somehow the location is good now, strange!

    #14970

    Boggins

    Hi Bas, all.

    I am having a similar problem, and want to find a replacement for the osm plugin. I have created an account with Mapbox, and have obtained a token. I have also created a style (which has a style url, and another token).

     

    But I cannot get these to work in a Qt app. Ultimately I want to use this in Android, but I can’t even get a simple desktop map to work. I have tried the default “mapbox.streets” map_id, and the map_id of a style I created, without success.

     

    Bas, it seems that you have got this to work – can you give more details about what you have done to get a mapbox map working?   Thanks.

    #14972

    Boggins

    Sorry, the problems was a simple typo on my part. Mapbox is working for me OK with the mapbox.streets map_id, and with an access_token from mapbox.

    #14973

    Bas

    Hi Boggins,

     

    cool you’ve got it working!

    here is some feedback i got from mapbox, wanted to get my styled map working

     

    Hello,
    I’m seeing in your reported errors that the endpoints you were referring to are map styles and the QT plugin only works with tilesets from what I can tell. You may need to create a style (based on Mapbox Streets template) using Mapbox Studio Classic, upload the style, then reference the map ID. Your classic style will be located here:
    https://www.mapbox.com/studio/classic/styles/

    #15419

    h20delirious

    i am also having the same problem in the mapviewer example,i have taken my mapbox map_id and access token but i dont know how to use it. Could u plz tell in which particular file should i replace the following lines of code and where is that file located.A little help would be highly appreciated

    plugin: Plugin { 
              name: "mapbox" 
              PluginParameter { name: "mapbox.access_token"; value: "<your-access-token>" }
              PluginParameter { name: "mapbox.map_id"; value: "<your-map-id>" }
            } 
    #15420

    Günther
    V-Play Team

    Hi!

    the plugin-parameter with the settings for MapBox belongs to the QML Map item.
    Setting the property is required when using the map to define and configure the map provider used to display the map.

    Our AppMap is also derived from Map and requires the same initialization. For a small usage example, you can also have a look at the Maps Code Snippets in our documentation.

    Best,
    Günther

    #15421

    h20delirious

    Thx Gunther,

    so sir i replaced the lines of code in mapviewer.qml file as below

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtLocation 5.6
    import QtPositioning 5.5
    import "map"
    import "menus"
    import "helper.js" as Helper
    
    ApplicationWindow {
        Plugin {
                id: myPlugin
                name: "mapbox"
                PluginParameter {
                    name: "mapbox.access_token"; value: "my accesss_token"
                }
                PluginParameter {
                    name: "mapbox.map_id"; value: "my map_id"
                }
            }
        id: appWindow
        property variant map
        property variant minimap
        property variant parameters
    
        //defaults
        //! [routecoordinate]
        property variant fromCoordinate: QtPositioning.coordinate(59.9483, 10.7695)
        property variant toCoordinate: QtPositioning.coordinate(59.9645, 10.671)
        //! [routecoordinate]
    
        function createMap(provider)
        {
            var plugin
    
            if (parameters && parameters.length>0)
                plugin = Qt.createQmlObject ('import QtLocation 5.6; Plugin{ name:"' + provider + '"; parameters: appWindow.parameters}', appWindow)
            else
                plugin = Qt.createQmlObject ('import QtLocation 5.6; Plugin{ name:"' + provider + '"}', appWindow)
    
            if (minimap) {
                minimap.destroy()
                minimap = null
            }
    
            var zoomLevel = null
            var center = null
            if (map) {
                zoomLevel = map.zoomLevel
                center = map.center
                map.destroy()
            }
    
            map = mapComponent.createObject(page);
            map.plugin = plugin;
            if (zoomLevel != null) {
                map.zoomLevel = zoomLevel
                map.center = center
            } else {
                map.zoomLevel = (map.maximumZoomLevel - map.minimumZoomLevel)/2
            }
    
            map.forceActiveFocus()
        }
    
        function getPlugins()
        {
            var plugin = Qt.createQmlObject ('import QtLocation 5.6; Plugin {}', appWindow)
            var myArray = new Array()
            for (var i = 0; i<plugin.availableServiceProviders.length; i++) {
                var tempPlugin = Qt.createQmlObject ('import QtLocation 5.6; Plugin {name: "' + plugin.availableServiceProviders[i]+ '"}', appWindow)
                if (tempPlugin.supportsMapping())
                    myArray.push(tempPlugin.name)
            }
            myArray.sort()
            return myArray
        }
    
        function initializeProviders(pluginParameters)
        {
            var parameters = new Array()
            for (var prop in pluginParameters){
                var parameter = Qt.createQmlObject('import QtLocation 5.6; PluginParameter{ name: "'+ prop + '"; value: "' + pluginParameters[prop]+'"}',appWindow)
                parameters.push(parameter)
            }
            appWindow.parameters = parameters
            var plugins = getPlugins()
            mainMenu.providerMenu.createMenu(plugins)
            for (var i = 0; i<plugins.length; i++) {
                if (plugins[i] === "mapbox")
                    mainMenu.selectProvider(plugins[i])
            }
        }
    
        title: qsTr("Mapviewer")
        height: 640
        width: 360
        visible: true
        menuBar: mainMenu
    
        //! [geocode0]
        Address {
            id :fromAddress
            street: "Sandakerveien 116"
            city: "Oslo"
            country: "Norway"
            state : ""
            postalCode: "0484"
        }
        //! [geocode0]
    
        Address {
            id: toAddress
            street: "Holmenkollveien 140"
            city: "Oslo"
            country: "Norway"
            postalCode: "0791"
        }
    
        MainMenu {
            id: mainMenu
    
            function toggleMiniMapState()
            {
                if (minimap) {
                    minimap.destroy()
                    minimap = null
                } else {
                    minimap = Qt.createQmlObject ('import "map"; MiniMap{ z: map.z + 2 }', map)
                }
            }
    
            function setLanguage(lang)
            {
                map.plugin.locales = lang;
                stackView.pop(page)
            }
    
            onSelectProvider: {
                stackView.pop()
                for (var i = 0; i < providerMenu.items.length; i++) {
                    providerMenu.items[i].checked = providerMenu.items[i].text === providerName
                }
    
                createMap(providerName)
                if (map.error === Map.NoError) {
                    selectMapType(map.activeMapType)
                    toolsMenu.createMenu(map);
                } else {
                    mapTypeMenu.clear();
                    toolsMenu.clear();
                }
            }
    
            onSelectMapType: {
                stackView.pop(page)
                for (var i = 0; i < mapTypeMenu.items.length; i++) {
                    mapTypeMenu.items[i].checked = mapTypeMenu.items[i].text === mapType.name
                }
                map.activeMapType = mapType
            }
    
    
            onSelectTool: {
                switch (tool) {
                case "AddressRoute":
                    stackView.pop({item:page, immediate: true})
                    stackView.push({ item: Qt.resolvedUrl("forms/RouteAddress.qml") ,
                                       properties: { "plugin": map.plugin,
                                           "toAddress": toAddress,
                                           "fromAddress": fromAddress}})
                    stackView.currentItem.showRoute.connect(map.calculateCoordinateRoute)
                    stackView.currentItem.showMessage.connect(stackView.showMessage)
                    stackView.currentItem.closeForm.connect(stackView.closeForm)
                    break
                case "CoordinateRoute":
                    stackView.pop({item:page, immediate: true})
                    stackView.push({ item: Qt.resolvedUrl("forms/RouteCoordinate.qml") ,
                                       properties: { "toCoordinate": toCoordinate,
                                           "fromCoordinate": fromCoordinate}})
                    stackView.currentItem.showRoute.connect(map.calculateCoordinateRoute)
                    stackView.currentItem.closeForm.connect(stackView.closeForm)
                    break
                case "Geocode":
                    stackView.pop({item:page, immediate: true})
                    stackView.push({ item: Qt.resolvedUrl("forms/Geocode.qml") ,
                                       properties: { "address": fromAddress}})
                    stackView.currentItem.showPlace.connect(map.geocode)
                    stackView.currentItem.closeForm.connect(stackView.closeForm)
                    break
                case "RevGeocode":
                    stackView.pop({item:page, immediate: true})
                    stackView.push({ item: Qt.resolvedUrl("forms/ReverseGeocode.qml") ,
                                       properties: { "coordinate": fromCoordinate}})
                    stackView.currentItem.showPlace.connect(map.geocode)
                    stackView.currentItem.closeForm.connect(stackView.closeForm)
                    break
                case "Language":
                    stackView.pop({item:page, immediate: true})
                    stackView.push({ item: Qt.resolvedUrl("forms/Locale.qml") ,
                                       properties: { "locale":  map.plugin.locales[0]}})
                    stackView.currentItem.selectLanguage.connect(setLanguage)
                    stackView.currentItem.closeForm.connect(stackView.closeForm)
                    break
                case "Clear":
                    map.clearData()
                    break
                case "Prefetch":
                    map.prefetchData()
                    break
                default:
                    console.log("Unsupported operation")
                }
            }
    
            onToggleMapState: {
                stackView.pop(page)
                switch (state) {
                case "FollowMe":
                    map.followme = !map.followme
                    break
                case "MiniMap":
                    toggleMiniMapState()
                    isMiniMap = minimap
                    break
                default:
                    console.log("Unsupported operation")
                }
            }
        }
    
        MapPopupMenu {
            id: mapPopupMenu
    
            function show(coordinate)
            {
                stackView.pop(page)
                mapPopupMenu.coordinate = coordinate
                mapPopupMenu.markersCount = map.markers.length
                mapPopupMenu.mapItemsCount = map.mapItems.length
                mapPopupMenu.update()
                mapPopupMenu.popup()
            }
    
            onItemClicked: {
                stackView.pop(page)
                switch (item) {
                case "addMarker":
                    map.addMarker()
                    break
                case "getCoordinate":
                    map.coordinatesCaptured(coordinate.latitude, coordinate.longitude)
                    break
                case "fitViewport":
                    map.fitViewportToMapItems()
                    break
                case "deleteMarkers":
                    map.deleteMarkers()
                    break
                case "deleteItems":
                    map.deleteMapItems()
                    break
                default:
                    console.log("Unsupported operation")
                }
            }
        }
    
        MarkerPopupMenu {
            id: markerPopupMenu
    
            function show(coordinate)
            {
                stackView.pop(page)
                markerPopupMenu.markersCount = map.markers.length
                markerPopupMenu.update()
                markerPopupMenu.popup()
            }
    
            function askForCoordinate()
            {
                stackView.push({ item: Qt.resolvedUrl("forms/ReverseGeocode.qml") ,
                                   properties: { "title": qsTr("New Coordinate"),
                                       "coordinate":   map.markers[map.currentMarker].coordinate}})
                stackView.currentItem.showPlace.connect(moveMarker)
                stackView.currentItem.closeForm.connect(stackView.closeForm)
            }
    
            function moveMarker(coordinate)
            {
                map.markers[map.currentMarker].coordinate = coordinate;
                map.center = coordinate;
                stackView.pop(page)
            }
    
            onItemClicked: {
                stackView.pop(page)
                switch (item) {
                case "deleteMarker":
                    map.deleteMarker(map.currentMarker)
                    break;
                case "getMarkerCoordinate":
                    map.coordinatesCaptured(map.markers[map.currentMarker].coordinate.latitude, map.markers[map.currentMarker].coordinate.longitude)
                    break;
                case "moveMarkerTo":
                    askForCoordinate()
                    break;
                case "routeToNextPoint":
                case "routeToNextPoints":
                    map.calculateMarkerRoute()
                    break
                case "distanceToNextPoint":
                    var coordinate1 = map.markers[currentMarker].coordinate;
                    var coordinate2 = map.markers[currentMarker+1].coordinate;
                    var distance = Helper.formatDistance(coordinate1.distanceTo(coordinate2));
                    stackView.showMessage(qsTr("Distance"),"<b>" + qsTr("Distance:") + "</b> " + distance)
                    break
                case "drawImage":
                    map.addGeoItem("ImageItem")
                    break
                case "drawRectangle":
                    map.addGeoItem("RectangleItem")
                    break
                case "drawCircle":
                    map.addGeoItem("CircleItem")
                    break;
                case "drawPolyline":
                    map.addGeoItem("PolylineItem")
                    break;
                case "drawPolygonMenu":
                    map.addGeoItem("PolygonItem")
                    break
                default:
                    console.log("Unsupported operation")
                }
            }
        }
    
        ItemPopupMenu {
            id: itemPopupMenu
    
            function show(type,coordinate)
            {
                stackView.pop(page)
                itemPopupMenu.type = type
                itemPopupMenu.update()
                itemPopupMenu.popup()
            }
    
            onItemClicked: {
                stackView.pop(page)
                switch (item) {
                case "showRouteInfo":
                    stackView.showRouteListPage()
                    break;
                case "deleteRoute":
                    map.routeModel.reset();
                    break;
                case "showPointInfo":
                    map.showGeocodeInfo()
                    break;
                case "deletePoint":
                    map.geocodeModel.reset()
                    break;
                default:
                    console.log("Unsupported operation")
                }
            }
        }
    
        StackView {
            id: stackView
            anchors.fill: parent
            focus: true
            initialItem: Item {
                id: page
            }
    
            function showMessage(title,message,backPage)
            {
                push({ item: Qt.resolvedUrl("forms/Message.qml") ,
                                   properties: {
                                       "title" : title,
                                       "message" : message,
                                       "backPage" : backPage
                                   }})
                currentItem.closeForm.connect(closeMessage)
            }
    
            function closeMessage(backPage)
            {
                pop(backPage)
            }
    
            function closeForm()
            {
                pop(page)
            }
    
            function showRouteListPage()
            {
                push({ item: Qt.resolvedUrl("forms/RouteList.qml") ,
                                   properties: {
                                       "routeModel" : map.routeModel
                                   }})
                currentItem.closeForm.connect(closeForm)
            }
        }
    
        Component {
            id: mapComponent
    
            MapComponent{
                width: page.width
                height: page.height
                onFollowmeChanged: mainMenu.isFollowMe = map.followme
                onSupportedMapTypesChanged: mainMenu.mapTypeMenu.createMenu(map)
                onCoordinatesCaptured: {
                    var text = "<b>" + qsTr("Latitude:") + "</b> " + Helper.roundNumber(latitude,4) + "<br/><b>" + qsTr("Longitude:") + "</b> " + Helper.roundNumber(longitude,4)
                    stackView.showMessage(qsTr("Coordinates"),text);
                }
                onGeocodeFinished:{
                    if (map.geocodeModel.status == GeocodeModel.Ready) {
                        if (map.geocodeModel.count == 0) {
                            stackView.showMessage(qsTr("Geocode Error"),qsTr("Unsuccessful geocode"))
                        } else if (map.geocodeModel.count > 1) {
                            stackView.showMessage(qsTr("Ambiguous geocode"), map.geocodeModel.count + " " +
                                                  qsTr("results found for the given address, please specify location"))
                        } else {
                            stackView.showMessage(qsTr("Location"), geocodeMessage(),page)
                        }
                    } else if (map.geocodeModel.status == GeocodeModel.Error) {
                        stackView.showMessage(qsTr("Geocode Error"),qsTr("Unsuccessful geocode"))
                    }
                }
                onRouteError: stackView.showMessage(qsTr("Route Error"),qsTr("Unable to find a route for the given points"),page)
    
                onShowGeocodeInfo: stackView.showMessage(qsTr("Location"),geocodeMessage(),page)
    
                onErrorChanged: {
                    if (map.error != Map.NoError) {
                        var title = qsTr("ProviderError")
                        var message =  map.errorString + "<br/><br/><b>" + qsTr("Try to select other provider") + "</b>"
                        if (map.error == Map.MissingRequiredParameterError)
                            message += "<br/>" + qsTr("or see") + " \'mapviewer --help\' "
                                    + qsTr("how to pass plugin parameters.")
                        stackView.showMessage(title,message);
                    }
                }
                onShowMainMenu: mapPopupMenu.show(coordinate)
                onShowMarkerMenu: markerPopupMenu.show(coordinate)
                onShowRouteMenu: itemPopupMenu.show("Route",coordinate)
                onShowPointMenu: itemPopupMenu.show("Point",coordinate)
                onShowRouteList: stackView.showRouteListPage()
            }
        }
    }
    

    but on running the example it still shows provider error and states mapbox plugin requires mapbox_map.id and mapbox.access_token.Could u plz tell how to remove this error so that i can seamlessly integrate the mapbox plugin into the example a step wise and specific answer would be highly appreciated as I am new to QT.

Viewing 15 posts - 1 through 15 (of 19 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support