Add address bar to the map

[olenakozdoba]

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

[TomKwee]

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]

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

[TomKwee]

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: . FYI: The address input is Tesla HQ.

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

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]

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]

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]

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]

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

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]

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]

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]

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

The changes:

• The Search input box is an overlay on the map, just like Google map.
• The Map/Satellite options box is below the Search box. I think this is best and similar to Google map.
• Many customization can be done but with limitations. I have tried several things so that I know how to customize.
• The GUI looks/feel is quite similar to Google Map.
• I added few strategical comments for good info, I think anyway.

Code:

• input id="search-input" - This is the UI definition in index.html.
• Most of the changes are in initMap() function in map.js.

[TomKwee]

Updated files are:

• index.html (Unix compatible)
• app.js, map.js (Unix compatible)
• blue-pushpin.png (onto images directory)

Details:

• For locating a specific address, I used a push pin for the image, so as to not confuse with the EV stations. For business or establishments, it is using the Google default icons. Although the icons are not the same as in Google map.

• We have other options for free icon images, available at https://sites.google.com/site/gmapsdevelopment , for an example. And there are some good images, for free.

• For testing, here are the test procedures:

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.

• The address requested is not displayed on the map (by our code) because it may interfere when the map does show the address when zooming in. I show the address on a tooltip, which probably would not show on a phone device; I like to test this though.