#Introduction

In this lab you'll detect changes to city and category.
When city changes you'll geocode it to find its latitude and longitude.

#Steps

??Remove the view model listener in the main view

To avoid being overwhelmed with `console.log()` output, edit
the main view and remove the `listeners` config in the 
view model config. From now on on the view model listening logic
will be set up in the main view controller.

??Detect view model property changes

In the main view controller override the `onComponentConstructed()` method. The method
should check for changes to _city_ and if so, call a new method `onCityChange(city)`.

    onComponentConstructed() {
        const model = this.getModel();
        this.onCityChange(model.data.city);
        model.on('dataPropertyChange', data => {
            if (data.key === 'city') this.onCityChange(data.value);
        });
    }
    onCityChange(city) {
        if (!city) return;
        // The code to geocode the city goes here.
        console.log(city);
    }

Save, change the city, and look for the console log in the debugger console.

??Geocode the city

Use the following call to `Neo.main.addon.GoogleMaps.geocode`. The details of the
call and the response aren't important right now, although if you're curious you
can read <a href="https://developers.google.com/maps/documentation/geocoding/requests-geocoding" target="_blank">the Google Maps geocoding API</a>. 

<pre style='padding: 4px; font-size: 13.5pt; border: thin solid gray; color:lightgray'>
onCityChange(city) {
    if (!city) return;
    <span style='color:firebrick'>Neo.main.addon.GoogleMaps.geocode({ address: city })
        .then(data => this.getModel().data.center = data.results[0].geometry.location);</span>
}
</pre>



??Stub out a method that will eventually be fetching Yelp data

Add this method.

    doFetchYelpData() {
        const model = this.getModel();
        console.log('Fetch yelp data', model.data.center, model.data.category);
    }

And modify `onComponentConstructed()` to check for changes to _center_ and _category_.

<pre style='padding: 4px; border: thin solid gray; color:lightgray'>
onComponentConstructed() {
    const model = this.getModel();
    this.onCityChange(model.getData('city'));
    model.on('dataPropertyChange', data => {
        if (data.key === 'city') this.onCityChange(data.value);
        <span style='color:firebrick'>if (data.key === 'center') this.doFetchYelpData();
        if (data.key === 'category') this.doFetchYelpData();</span>
    });
}
</pre>

Save, refresh, and verify that `doFetchYelpData()` is logging changes to the map center
(via changes to city), and category. 