Monday, April 21, 2014

Adding Interactivity to a Map with Popovers

On Friday I started my app "GetThereDC". I started by adding the locations of all of the Bikeshare stations in DC to a map. Knowing where the stations are is great, but it's a bummer when you go to a station and there are no bikes, or there are no empty parking spots. Fortunately, that exact information is in the XML feed, so I just need a way to display it.  
The way I decided to do it is to make the POI (the little icons for each station on the map) clickable, and when the user clicks the POI to use the Popover feature in the Ubuntu Components toolkit to display the data.

Make the POI Clickable

When you want to make anyting "clickable" in QML, you just use a MouseArea component. Remember that each POI is constructed as a delegate in the MapItemView as an Image component. So all I have to do is add a MouseArea inside the Image and respond to the Click event. So, not my image looks like this:
           sourceItem: Image  
           {  
             id: poiImage  
             width: units.gu(2)  
             height: units.gu(2)  
             source: "images/bike_poi.png"  
             MouseArea  
             {  
               anchors.fill: parent  
               onClicked:  
               {  
                 print("The POI was clicked! ")  
               }  
             }  
           }  
This can be used anywhere in QML to make an image respond to a click. MouseArea, of course, has other useful events as well, for things like onPressed, onPressAndHold, etc...

Add the Roles to the XmlListModel

I already know that I'll want something to use for a title for each station, the address, as well as the number of bikes and the number of parking slots. Looking at the XML I can see that the "name" property is the address, so that's a bonus. Additionally, I can see the other properties I want are called "nbBikes" and "nbEmptyDocks". So, all I do is add those three new roles to the XmlListModel that I constructed before:
   XmlListModel  
   {  
     id: bikeStationModel  
     source: "https://www.capitalbikeshare.com/data/stations/bikeStations.xml"  
     query: "/stations/station"  
     XmlRole { name: "lat"; query: "lat/string()"; isKey: true }  
     XmlRole { name: "lng"; query: "long/string()"; isKey: true }  
     XmlRole {name: "name"; query: "name/string()"; isKey: true}  
     XmlRole {name: "available"; query: "nbBikes/string()"; isKey: true}  
     XmlRole {name: "freeSlots"; query: "nbEmptyDocks/string()"; isKey: true}  
   }  

Make a Popover Component

The Ubuntu SDK offers some options for displaying additional information. In old school applications these might be dialog boxes, or message boxes. For the purposes of this app, Popover looks like the best bet. I suspect that over time the popover code might get a little complex, so I don't want it to be too deeply nested inside the MapItemView, as the code will become unwieldy. So, instead I decided to add a file called BikeShareStationPopover.qml to the components sub-directory. Then I copy and pasted the sample code in the documentation to get started. 

To make a popover, you start with a Component tag, and then add a popover tag inside that. Then, you can put pretty much whatever you want into that Popover. I am going to go with a Column and use ListItem components because I think it will look nice, and it's the easiest way to get started. Since I already added the XmlRoles I'll just use those roles in the construction of each popover. 

Since I know that I will be adding other kinds of POI, I decided to add a Capital Bike Share logo to the top of the list so users will know what kind of POI they clicked. I also added a close button just to be certain that users don't get confused about how to go back to the map. So, at the end of they day, I just have a column with ListItems:
 import QtQuick 2.0  
 import Ubuntu.Components 0.1  
 import Ubuntu.Components.ListItems 0.1 as ListItem  
 import Ubuntu.Components.Popups 0.1  
 Component  
 {  
   id: popoverComponent  
   Popover  
   {  
     id: popover  
     Column  
     {  
       id: containerLayout  
       anchors  
       {  
         left: parent.left  
         top: parent.top  
         right: parent.right  
       }  
       ListItem.SingleControl  
       {  
         control: Image  
         {  
           source: "../images/CapitalBikeshare_Logo.jpg"  
           height: units.gu(5)  
           width: units.gu(5)  
         }  
       }  
       ListItem.Header { text: name}  
       ListItem.Standard { text: available + " bikes available" }  
       ListItem.Standard { text: freeSlots + " parking spots available"}  
       ListItem.SingleControl  
       {  
         highlightWhenPressed: false  
         control: Button  
         {  
           text: "Close"  
           onClicked: PopupUtils.close(popover)  
         }  
     }  
   }  
 }  

Make the Popover Component Appear on Click

So, now that I made the component code, I just need to add it to the MapItemView and make it appear on click. So, I add the tag and give it an id to the MapQuickItem Delegate, and change the onClicked handler for the MouseArea to open the popover:
 delegate: MapQuickItem  
         {  
           id: poiItem  
           coordinate: QtPositioning.coordinate(lat,lng)  
           anchorPoint.x: poiImage.width * 0.5  
           anchorPoint.y: poiImage.height  
           z: 9  
           sourceItem: Image  
           {  
             id: poiImage  
             width: units.gu(2)  
             height: units.gu(2)  
             source: "images/bike_poi.png"  
             MouseArea  
             {  
               anchors.fill: parent  
               onClicked:  
               {  
                 PopupUtils.open(bikeSharePopover)  
               }  
             }  
           }  
           BikeShareStationPopover  
           {  
             id: bikeSharePopover  
           }  
         }  
And when I run the app, I can click on any POI and see the info I want! Easy!

Code is here

37 comments:

  1. Rick do you happen to know any website that offers the XML data for Movie Theatre locations in the world? I would love to add this functionality to my app Flashback.

    ReplyDelete
  2. So nice and great blog post it's also helpful information all of us so thanks a lot for sharing this tips with us
    clipping path service

    ReplyDelete
  3. This is a great post. i have more benefited from your website. thanks a lot for your performative idea
    clipping path service provider

    ReplyDelete
  4. Wow what a Great Information about World Day its very nice informative post. thanks for the post. https://view.ly/v/I6i2zHGxK4JY

    ReplyDelete
  5. I love this blog!! The flash up the top is awesome!! https://view.ly/v/anmlDCHg1JGS

    ReplyDelete
  6. If you are stuck with your marketing assignment then in this case you can opt for our Marketing Assignments. we provide the bestOnline marketing expert.We also provide Marketing Management Assignment for students across the globe. for more information contact us +16692714848.


    ReplyDelete
  7. All the articles here are informative. It is beneficial to the newcomers. Thanks for posting such a
    nice post.
    Clipping Path
    Image Masking Service

    ReplyDelete
  8. Do you find
    coursework help
    in AE ? we are running a e learning platform myassignmenthelp.com where we help all types of students to complete thier assignment and college works

    ReplyDelete
  9. click on one of the sites below to get a variety of the best tips and tricks in life.

    situs togel terpercaya

    ReplyDelete
  10. This is such a wonderful post. I have learned new things here. your writing style is great. keep up the good work. looking forward to more amazing reads. We have gained our specialization assignment help in sydney after spending most of our time making ourselves perfect. We provide 100% plagiarism-free expository essay examples. Our assignment helps developers are experts in every subject help with assignment writing service because of which they provide reliable services all over the world.

    ReplyDelete
  11. Thank you so much for this excellent blog article. Your writing style and the way you have presented your content is awesome. Now I am pretty clear on this topic, keep it up! 바카라사이트

    ReplyDelete
  12. Are you looking for the best online assignment help in the United Arab Emirates? Look no further as we provide reliable assignment writing to the students so they contact us for writing assistance. It provides the best support system to the students so that they can contact anytime and get expert assistance.

    ReplyDelete
  13. The authors are professionals in their field with many years of vast experience. It means, your assignment has a professional touch which makes it different from others. In this way, you can increase your score by availing our services through online assignment help.

    ReplyDelete
  14. I’m more than happy to discover this great site. I need to to thank you for ones time for this wonderful read!! I definitely enjoyed every part of it 야한동영상

    ReplyDelete
  15. Very good post! We are linking to this great content on our site. Keep up the good writing. 한국야동닷컴

    ReplyDelete
  16. This is a very neatly written article. This article gives clear idea for the new viewers. This is a topic which is close to my heart… Best wishes! 국산야동

    ReplyDelete
  17. Wow, this article is nice, my sister is analyzing such things, so I am going to inform her. 중국야동넷

    ReplyDelete
  18. hello there and thank you for your info – I’ve certainly picked up
    anything new from right here. 토토 I did however expertise
    some technical points using this web site, since I experienced to reload
    the web site many times previous to I could get it to load properly.
    I had been wondering if your web host is OK? Not that I am complaining,
    but sluggish loading instances times will very frequently
    affect your placement in google and can damage your quality
    score if advertising and marketing with Adwords. Anyway I am adding this RSS to my
    e-mail and can look out for a lot more of your respective
    interesting content. Make sure you update this again soon.

    ReplyDelete
  19. 카지노사이트홈 To a great degree lovely and captivating post. I was hunting down this kind of information and acknowledged examining this one. Keep posting.

    ReplyDelete
  20. Get reliable Web Designing Assignment Help from top class website designing software assignment help experts We have the best web developer assignment experts for all kind of computer Web Designing software solutions 100 plagiarism free answers

    ReplyDelete
  21. That is a incredibly brilliant post. sportstoto365 Such a facts handy in my opinion in addition to examining to help quick. I am definitely gracious on your post. Appreciate it with the write about. 파워볼

    ReplyDelete
  22. Download Sage 50 U.S. Edition 2021 Full Product. This Sage 50 download includes 2021.0 and 2021.1.1. Note: 2021.1.1 update replaces the 2021

    Sage 50
    Sage Intacct login

    ReplyDelete
  23. The Great assignment help offer you the world’s best online Assignment Help. The top assignment help by expert you have been looking for is here in Saudi Arabia. Click here to find out the range of disciplines we would be happy to assist you. We deliver your assignment before the deadline. If you need any help any help regarding writing assignment than feel free to contact us 24/7.

    ReplyDelete
  24. How do Troubleshoot Canon Printer not printing color?

    To fix issues related to Canon printer not printing in color, you are supposed to follow and apply few important instructions. To proceed, you must check your ink cartridge, now update your printer driver and then check color printing settings and then restart your printer. Once you do follow and apply the steps and so you will be able to resolve the issues without any fuss. Have a look at the steps to resolve all your problems without any fuss.

    How to Block Yahoo emails?

    If you want to clear out some unwanted emails and block them, this guide will benefit you. Yahoo allows you to add any email addresses to the blocked list anonymously, and you can also remove them if you change your mind sometime in the future. To block yahoo mails, click on the Settings icon and select More Settings Image. Then tap on Security and Privacy and choose Add button under the section on Blocked Addresses. Then enter the email address and click on Save.

    How to make Yahoo my Homepage Firefox?

    If you often use Yahoo, you should set Yahoo as your default homepage on your computer browser. This way, each time you open your browser, you'll be able to access different Yahoo services. Here are the steps to make yahoo my homepage Firefox- Click the Menu button on the Mozilla Firefox web browser on your computer (three horizontal lines). This will open a new tab with the Firefox settings page. After that, go to the "Home Page" section and type in the Yahoo homepage's URL. Make sure the "Show my home page" option in the "When Firefox begins" section is chosen. On the Firefox browser, the Yahoo website will be set as your default home page.

    Steps to stop outlook calendar email notifications

    Remembering important events in the Outlook calendar can be done. The reminders appear on the screen, prompting you of its date. But if you wish to turn off the Outlook calendar notifications, you can do that as well. For that, open Outlook and click on “Calendar.” Then click on File and select Options. Then tap on Calendar and uncheck the “Default reminders” checkbox to stop outlook calendar email notifications.Lastly, click on Ok to complete.

    Reasons why icloud email is not working properly

    There could be many reasons for iCloud not working correctly. And you must know about these reasons because that will help you avoid them in future. And if you know what caused an issue, it’ll be easier for you to solve it. One primary reason for iCloud not working is that the total size of an email message( text and attachments) cannot exceed 20MB. And this rule is as per Apple’s documentation which you should know in case icloud email is not working properly. So you can activate Mail Drop as it utilizes iCloud to store temporary files up to 5GB.

    ReplyDelete
  25. Nice Post. I have been reading here for about an hour. I am a newbie and your success is very much an inspiration for me. If you want to Recover Forgot AOL Email Password please contact our team for instant help.

    ReplyDelete
  26. In this blog we have discussed on QuickBooks Update Error Code 1328. If you are facing this error code then follow the given troubleshooting steps given here.

    ReplyDelete
  27. Java coding is typically characterised as a concurrent, largely class-based, object-oriented programming language. The goal of the Java language development process is to minimise implementation dependencies. The Java programming language operates under the WORA (Write Once, Run Anywhere) philosophy, which generally means that once the code is produced, it may be executed on any platform that accepts Java without needing to be rewritten. To learn more about java, join JAVA Course in Chennai at FITA Academy.
    JAVA Course in Chennai
    Java Course in Bangalore
    Java Course in Coimbatore

    ReplyDelete
  28. Python is an object-oriented, analytic programming language. Classes, dynamically typed, high-level volatile data types, exceptions, modules, and exception management are all included. It supports various programming paradigms, including primary and reactive programming and object-oriented programming.Python Training in Chennai
    Python Online Course
    Python Training in Bangalore

    ReplyDelete