Forums

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

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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.

    #16535

    Alex
    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.

    Cheers,
    Alex

     

    #19681

    Didier

     
    <div>
    <div></div>
    <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>
    <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) {
    
                                    uids=JSON.stringify(value)
                                    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) {
    
                                             usuarios=JSON.stringify(value)
                                             console.log("usua ", usuarios)
                                              //  mapview.model = usuarios.valueOf()
    
                                           var parsedUser = JSON.parse(usuarios.valueOf())
                                           var Location=parsedUser.Location
                                           var email=parsedUser.email
                                           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”:”direstrepobr@gmail.com”,”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”:”direstrepo@misena.edu.co”,”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”:”direstrepobr@gmail.com”,”enlinea”:true,”latitude”:2.9304237384376397,”longitude”:-75.27190396569229,”timestamp”:1532612560093,”userId”:”a14ugxEJ8GMy2yziBwju9JfXG5x2″}

    </div>
    Plase Helpme.

    </div>
    <div></div>
    <div></div>

    #19695

    Günther
    Felgo Team

    Hi,

    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: https://felgo.com/doc/apps-howtos/#add-a-new-row-to-a-listview-dynamically

    Best,
    Günther

     

     

Viewing 4 posts - 1 through 4 (of 4 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