OpenStreetMap Maps with QML Map object

QtQuick/QML comes with a nice ready made Map element that can show map tiles and dots and polygons and stuff. Really nice and all, unfortunately the default and only map available is Nokia maps. And well, I prefer free maps. So, how to get OpenStreetMap working ?

One option is to make your own QML based map element, I started on that but never had enough patience to finish it.

But after some googling around I found qtm-geoservices-extras ! Today I started to look into it a bit more and trying to figure out how to get in working when targeting the N9 as we have the silly problem that anything submitted to the Nokia Store can not depend on any outside packages. Extremely annoying that.

The extra geoservices contain Qt plugins for providing map (and route, search, etc) features from OSM and Google. I didn't care of the goolge plugin at all.

So how to get the plugin working when you make your own app ?

Adding OpenStreetMap Qt map provider to your app

QML Map with OpenStreetMap tiles, running on the simulator

First, checkout qtm-geoservices-extras

git clone git://gitorious.org/qtm-geoservices-extras/qtm-geoservices-extras.git

Then copy the openstreetmap directory into your own project

cp -a qtm-geoservices-extras/openstreetmap your-map-app/

The edit your projects .pro file to include:

include(openstreetmap/openstreetmap.pro)

And in your main.cpp (or whatever), add:

#include <qtplugin>
Q_IMPORT_PLUGIN(qtgeoservices_osm)

Then edit the openstreetmap.pro file in the openstreetmap directory, like this:

1. Add static to CONFIG
2. Remove or comment out the include(../common.pri)
3. Remove or comment out TARGET=
4. Remove or comment out TEMPLATE=
5. Add 
   

   INCLUDEPATH += $$PWD
   DEPENDPATH += $$PWD

End result should look something like this:

#TEMPLATE = lib
CONFIG += plugin
#TARGET = $$qtLibraryTarget(qtgeoservices_osm)
PLUGIN_TYPE=geoservices
# include(../common.pri)
QT += network
CONFIG += mobility static
MOBILITY = location
INCLUDEPATH += $$PWD
DEPENDPATH += $$PWD

Then add the map element to your QML code

import QtMobility.location 1.2

    Map {
        id: nmap
        width: 480;
        height: 300;
        anchors.top: osm.bottom;
        zoomLevel: 10
        center: mypos;
        connectivityMode: Map.OfflineMode;
        plugin : Plugin {
                name : "openstreetmap"
                PluginParameter{ name:  "mapping.cache.directory" ; value: "/tmp/qtmap" }
                PluginParameter{ name:  "mapping.cache.size" ; value: "200000" }
            }
    }

    Coordinate {
        id: mypos
        latitude: 60.45;
        longitude: 22.25;
    }

And that should do it. Build your app and try it out!