olenakozdoba / hackathon-project

This is the repository created to store and share codebase for a hackathon project.
0 stars 1 forks source link

Add address bar to the map #5

Open olenakozdoba opened 8 years ago

olenakozdoba commented 8 years ago

Address bar should accept address and as user presses Enter should move the map to this location.

TomKwee commented 8 years ago

For the UI, I want to add a "Location" menu on the drawer panel, much like Google map for "Directions". For the menu icon, I can use the same exact icon provided by iron-icons/maps-icons. I will follow the same UI flow as in Google map.

olenakozdoba commented 8 years ago

Tommy, no menu item is needed. display text input right on the map so it is always available to the user.

TomKwee commented 8 years ago

I am not sure what you mean. But I attach 2 image samples to be clear, hopefully this UI works well with images (png). I like to follow Google map like so, notice the circle I made: google-map_addressbar . FYI: The address input is Tesla HQ.

What I have now and changed it this afternoon is like so: easy-charge_searchinput

Note: It is using paper-input-container. I had to research a good way to do this.

\ To speed things up, you may call me from WhatsApp.

Thanks for your inputs and I am learning, hopefully absorb your much web knowledge.

olenakozdoba commented 8 years ago

Tommy, think about mobile user interface. Drawer is closed on mobile, and it is hard to get to it. Therefore it should be outside of the drawer. BTW, on google maps it is not on the drawer either.

On Mon, Oct 3, 2016 at 4:53 PM, TomKwee notifications@github.com wrote:

I am not sure what you mean. But I attach 2 image samples to be clear, hopefully this UI works well with images (png). I like to follow Google map like so, notice the circle I made: [image: easy-charge_searchinput] https://cloud.githubusercontent.com/assets/12904905/19058064/5594c26c-8989-11e6-8518-fc4c58fc1cfd.png

What I have now and changed it this afternoon is like so:

[image: google-map_addressbar] https://cloud.githubusercontent.com/assets/12904905/19058022/16e10b84-8989-11e6-9131-0fb3bd56118a.png . FYI: The address input is Tesla HQ.

Note: It is using paper-input-container. I had to research a good way to do this.

\ To speed things up, you may call me from WhatsApp.

Thanks for your inputs and I am learning, hopefully absorb your much web knowledge.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/olenakozdoba/hackathon-project/issues/5#issuecomment-251259983, or mute the thread https://github.com/notifications/unsubscribe-auth/AT7jg3AMWO_ZutT4tjBTgADI9voRVz0eks5qwZVqgaJpZM4KLq2K .

TomKwee commented 8 years ago

I now see your point, embarrassed that I made a nice phone app before. Anyway, I should make more like the Google Map on a phone. There is a fixed address bar. The bar contains a (hamburger style) menu, and when the user clicks on it, the drawer should appear. And it should toggle between showing and hiding, again like Google Map. Does that sound good?

On the web page [https://elements.polymer-project.org/elements/paper-drawer-panel] , there is a note on

paper-icon-button icon="menu" paper-drawer-toggle .

This could do the toggling, and it seems promising (using Polymer's way) but it does not work, at least with the current html layout. Perhaps I need to restructure the "paper-header-panel drawer" tag in relation with the drawer and main attribute. I assume paper-drawer-toggle attribute should work. Another thing, if that attribute does not work, onclick() could work.

So this is a struggle, but I think this is good for the UI, taking advantage of the Drawer design.

TomKwee commented 8 years ago

Actually paper-icon-button icon="menu" paper-drawer-toggle does work! Before, I did not know what to expect or how to test it. So it's back to normal. For the address bar, I am comparing between using a toolbar, paper-input, or paper-input-container. But mainly now, I am struggling to understand Google's documentation, and the fact that I cannot intermix incompatible elements. So I have to be more careful.

TomKwee commented 8 years ago

I have merged code locally, and now the main page is like this… searchbar.

As you can see, I added the Search map bar. I tried making it like the Search bar in Google Map in a phone app, but not exactly. I tried both UI, the Toolbar (this is previous) and paper-input. I just think paper-input is more flexible than paper-toolbar. I was hoping that paper-input is like floating button, but not exactly. For your convenience, I added text “TK Need review” to see the critical change and my comments. And then you can delete the comments. I looked at a perfect Google sample @ https://google-developers.appspot.com/maps/documentation/utils/geocoder . And this web app does not use a toolbar. But this code design is drastically different than our current one. Perhaps the current UI is sufficient for a prototype, and so I can move forward to implementing the Geocoding, probably the easier part. I spent time already on fixing this, and learned more on Polymer UI and styling.

What do you think?

Note: I have not check-in code since I don't know how to.

TomKwee commented 8 years ago

Now I think I know what is the issue with Github. The master branch is now a protected branch. Github desktop and its shell could not tell me that. I am not impressed with the tool's error checking. I tried using github.com instead and it told me about the protected branch. I spent hours trying to figure this out. I wish I could debug this problem earlier.

So the next step is for you to review code/files. I am fine with that and you know web coding better than me. For review, read my earlier post. You can see this action by checking the "Pull Requests".

TomKwee commented 8 years ago

The code changer are:

1) On index.html, I upgraded to using the latest Firebase 3.1, link at https://www.gstatic.com/firebasejs/3.5.1/firebase.js. The bower elements can be easily retrieved by command “bower install --save firebase/polymerfire”. For installing it, I think it’s best to execute the command at the parent directory of app. I got the idea of upgrading Firebase in some samples and documentation. Documentation on Firebase releases is @ https://firebase.google.com/support/releases .

2) Text input for geocoding is executed on Enter key and the Location icon on the right. Code is at app.js with “document.querySelector("#searchMap_input").addEventListener('change'…”

3) Geocoding is implemented at function codeAddress() in map.js. The coding style is different than using https, and it looks simpler. The function surprisingly to me is synchronous.

I mentioned few files so that you can see if the code sync is not working...

TomKwee commented 7 years ago

I sent e-mail with the 3 attached files, dated Tues, Dec 6, 2016. Below is the duplicated text.

The changes:

Code:

TomKwee commented 7 years ago

Updated files are:

Details:

  1. Enter a specific address on the Search box. Notice the address will be centered with the push pin image. The address centering is not perfect because of the email sign-on and screen space it takes.

  2. Enter a business or establishment, like "schools near Pasadena". I just learned the keyword "near" for Google map. Notice the nice school icons.