Display place details

[jkwening]

Create a component for displaying details about a place.

It should have two view modes:

• full screen (most of the viewport height):
  • as much detail as we can provide: may start with image, option for getting directions, and "more about this place" section. See places details api for idea of what backend will be retrieving from google api based on place id.
• partial screen (about 50% of viewport height):
  • partial map view with location centered
  • simple summary of place: name, address, and options for getting directions

[turisap]

Hi, @jkwening, I'd like to try to implement this, can I work on it?

[jkwening]

@turisap certainly, go for it. It's assigned to you. Thanks.

[turisap]

@jkwening, I'm experiencing problems with the application, could you please help me out?

As I new to this project, I set up everything in accordance with instructions and then run npm run dev in the root directory and got the application running in my browser at localhost:8080. It reloads each time I made changes in the code, but it did not reflected it in the running application. Even if I did something which should affect the app significantly or crash it like commenting out render() or router it still worked as before without any changes or errors in the browser's console. Why it can be so and how can I fix this?

[jkwening]

@turisap we have a service worker implemented, so its probably caching the main bundle.js module where the primary code logic is embedded. You probably just need to set the service worker tool to "update on reload" to allow it to automatically sync new changes via dev tools. Else, have your tried clearing out all site data via "Application" and then "Clear Storarge" in dev tools?

[turisap]

@jkwening, your advice did help! So it's working now. Thank you)

I've got a couple of questions regarding how to make this component, can you answer them?

• How should I style the component? Are there any guides or should I do it as I want?
• You mentioned that in the partial screen mode there should be a small map with location centered. How can I obtain that map? Should I make any additional requests to google API?
• Full screen mode should contain an image of a location, but it isn't clear how to get one. I went to google places docs and made a request to their api, so response with location's data contained the following data about photos:

{
                "height": 417,
                "html_attributions": [
                    "<a href=\"https://maps.google.com/maps/contrib/110751364053842618118/photos\">Australian Cruise Group</a>"
                ],
                "photo_reference": "CmRaAAAAMEJMvIbS5_SiUW78IznWOKNI_-LCElDK0U3O9GyxMDUPYeq5YuSeLfpTSGEY2AJVeYp6tBk-oGTjvdUmCjYCEnHEGR5dcbwn-UT7c6_sL-9v9gvnfI37aMZbiD59kgiGEhCzw-2UC0j5xrPx6qryivclGhRhAZzC0rmY2Y6EdScI1AlKdoR46Q",
                "width": 1334
            }

and, according to the docs in order to get an image I need to make another request with photo_reference as a query string which would return an image as response. I've made a method for this:

getPlacePictureFromGoogle () {
        const url = `https://maps.googleapis.com/maps/api/place/photo?
        key=${CONFIG.google_maps.api_key}&
        photoreference=${this.place.photoReference}&
        maxwidth=300`;
        axios.get(url)
            .then(image => {
                this.setState({image})
            })
            .catch(err => `ERR: ${err.response}`)
    }

I guess it would not work if I store file in component's state. Probably I don't need to do that and image will be obtained through back-end somehow and I don't need to do everything I've done?

[jkwening]

@turisap sorry for just getting back to you - completely missed this in my inbox. Here's my response in order of your questions:

• Regarding style - give the following mockups a look see to get an overview of the current theme we're going with and style as you like as related to that for now. (interactive).
• this should be a component that renders on top off the current map view or rather below it for partial screen mode. ~/client/src/components/LeafletOsmMap folder contains the logic for the map container component. What we would want to do is resize the mapPane to 50% of the available pane and put the place details component in the remaining bottom 50%. You don't need to make additional request to google api, the backend server has end points for that. See ~/controllers/google-api-controller.js for what frontends needs to make request for place details data. The code is within the exports.placeDetails exported function.
• Also, more details can be found on the developer's place details guide. The endpoint mentioned above includes a photos array for the requested place. Currently we return the entire response back to the frontend, please create an issue if you feel we only need to provide a subset or restructure the response in a another JSON format that is better suited for the frontend to consume without having to add parsing logic on the frontend. We basically want the frontend to do as little processing as possible and backend provide exactly what the frontend needs to render component/routes as needed.

Additional notes:

• Full screen mode, should have the component overlay completely over the mapPane, you will need to set the z-index = 1000 or alternatively toggle map pane display: none to hide it from view and have the place details render in remaining height of the screen instead.
• The end goal is a smooth transition between partial place details view, full place details view, and full map view (no place details). I would recommend tackling each of these iteratively, building upon each sub feature, and making PR requests as each is ready. I would suggest to start with a PR for a place details component that takes full screen, to get a better sense of how much data we want to consume on the frontend and any modifications needed for the response data sent from the backend.

@motosharpley I see a branch called "gmap-places" - I assume we want to use that for this feature or is that for something else? I can make a new branch if that is the case.

[motosharpley]

@jkwening we should make a new branch I just created that gmap-places branch to preserve the code from the google implementation before refactoring it out for leaflet in case someone wanted it

[jkwening]

@turisap I've create a feature branch called "place-details" that we will use for this issue until its complete and ready to be merged into "development" branch. Did my response answer your questions?