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

[AlexFelgo 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

 

[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>

[GüntherFelgo 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