#Introduction

In this lab you'll bind the map's center to the city.

#Steps


??Configure an in-line view model in the main view

You'll need to import
`src/model/Component.mjs', named something like `ViewModel`, then 
configure the model:

    model: {
        module: ViewModel,
        data: {},
        stores: {}
    }


??Create a `center` property in the view model

<pre style="color:lightgray">
model: {
    module: ViewModel,
    data: {
        <span style="color:firebrick">center: {
            lat: lat: -27.1259626,
            lng: -109.4088545
        }</span>
    },
},
</pre>

??Watch the values change

Just for the fun of it, and to gain insights into how view model changes occur, add
a listener to the view model config.

<pre style="color:lightgray">
model: {
    module: ViewModel,
    <span style="color:firebrick">listeners: {
        dataPropertyChange: data => console.log(data.key, data.value)
    },</span>
    data: {
        center: {
            lat: lat: -27.1259626,
            lng: -109.4088545
        }
    },
},
</pre>

??Bind the map center to that property

Edit `Yelp.view.businessses.Tabs` and modify the map
config to bind the center to the view model property.

    bind: { center: data => data.center }

Save and refresh, and you should see the map centered at the specified location.