Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!


OverviewFelgo 2 Support (Qt 5) › Dynamic map with selectable markers


Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #16534

    John Croucher

    I need to be able to do a request to pull a JSON list from a remote server. This list contains a list of GPS co-ordinates, a name and an ID.

    This list needs to dynamically populate the map with the markers and be selectable. When a marker is selected it needs to show a bubble with a name and provide a link which will open a new stack view item based on the ID.

    Is this even possible with the Felgo Map plugin? If it is, what is the best way to achieve this?

    Looking at the examples they either seem to be specific static items hard-coded in the QML, or static items generated in services like MapBox.


    Felgo Team

    Hi John,

    you can do this using a MapItemVIew. We are also using this in our maps demo app that you can find in <path-to-v-play>/Examples/Felgo/appdemos/maps.

    This is a snipped I copied from another project:

        MapItemView {
          model: storage.locations
          delegate: MapQuickItem {
            coordinate: QtPositioning.coordinate(latitude,longitude)
            anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height-dp(2))
            sourceItem: MapMarker{}
            z: 90-latitude

    Note that the model in this case can not be a simple array or object, but must be e.g. a ListModel, but you can easily build that from you JSON. The latitude and longitude parameters in the code are properties of the model items. And for the z value I recommend the little trick here, which makes sure that markers are overlapping correctly (latitude is between 90 and -90, so the marker at the very north would have a z of 0 and at the very south it is 180). The MapMarker in the code is a custom Item which holds the visual representation and e.g. a MouseArea to react to clicks on the marker.





    <div>I want to fill my map with user locations stored in firebase</div>
    <div>a) get my user Id according to this scheme (attached):</div>
    <div>with this code:</div>

    function loadData() {
            loading = true
            console.debug("loading data")
            // load the last X entries, ordered by timestamp property
           firebaseDb.getValue("public/userlocations", {
                               }, function(success, key, value) {
                                 if(success) {
                                    console.log("uids", uids)
                                     maps= JSON.parse(uids.valueOf())//property var maps:[]
                                 loading = false
           for (var i in maps) {
                console.log("UIDssssssss",i )
               getByUser(i) //function to obtain from the id of user
               //the details of that particular user

    b) Then a function to obtain from the id of user the details of that particular user:

       function getByUser(uid){
           firebaseDb.getValue("public/userlocations/"+ uid, {
                                         limitToLast: maxListEntries,
                                         orderByChild: "timestamp"
                                       }, function(success, key, value) {
                                         if(success) {
                                             console.log("usua ", usuarios)
                                              //  mapview.model = usuarios.valueOf()
                                           var parsedUser = JSON.parse(usuarios.valueOf())
                                           var Location=parsedUser.Location
                                           var timestamp=parsedUser.timestamp
                                           var userId=parsedUser.userId
                                           var enlinea=parsedUser.enlinea
                                           var latitude=parsedUser.latitude
                                           var longitude=parsedUser.longitude
                                           // dumpJSONObject(usuarios, 0 ); //here
                                             console.log("array ", email)
                //I filled the ListModel to then pass it to the MapItemView
                  model.append({Location: Location, email: email,timestamp:timestamp,userId:userId, enlinea:enlinea, latitud:latitud,longitud:longitud});
                                         loading = false

    But it does not work when loading it in the MapItemView, if this is my Firebase scheme:

    {“a14ugxEJ8GMy2yziBwju9JfXG5x2”:{“Location”:”2° 55′ 49.5\” N, 75° 16′ 18.9\” W, 506.69m1532612560094″,”email”:””,”enlinea”:true,”latitude”:2.9304237384376397,”longitude”:-75.27190396569229,”timestamp”:1532612560093,”userId”:”a14ugxEJ8GMy2yziBwju9JfXG5x2″},”tqJ1TRzCdwRxhrLjf205QhifJmY2″:{“Location”:”2° 55′ 52.4\” N, 75° 15′ 42.1\” W, 525.713m1532572733110″,”email”:””,”enlinea”:true,”latitude”:2.9312122240689873,”longitude”:-75.26168910793518,”timestamp”:1532572733108,”userId”:”tqJ1TRzCdwRxhrLjf205QhifJmY2″}}
    usua {“Location”:”2° 55′ 49.5\” N, 75° 16′ 18.9\” W, 506.69m1532612560094″,”email”:””,”enlinea”:true,”latitude”:2.9304237384376397,”longitude”:-75.27190396569229,”timestamp”:1532612560093,”userId”:”a14ugxEJ8GMy2yziBwju9JfXG5x2″}

    Plase Helpme.



    Felgo Team


    can you make sure that the ListModel you use for the MapItemView contains the correct data?

    In case you fill up the model at runtime, I also suggest to also trigger the modelChanged() for your model-property. This notifies the UI that the data changed so it can re-render. The same principle is also used in this List Example:




Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.