Can you add the callback and display$\_$map for the geolocation chart in the code below as well?:

# Setup the Jupyter version of Dash

from jupyter$\_$dash import JupyterDash

# Configure the necessary Python module imports

import dash$\_$leaflet as dl

from dash import dcc

from dash import html

import plotly.express as px

from dash import dash$\_$table

from dash.dependencies import Input, Output

# Configure the plotting routines

import numpy as np

import pandas as pd

import matplotlib.pyplot as plt

#### FIX ME #####

# change animal$\_$shelter and AnimalShelter to match your CRUD Python module file name and class name

from animal$\_$shelter import AnimalShelter

###########################

# Data Manipulation $/$ Model

###########################

# FIX ME update with your username and password and CRUD Python module name. NOTE: You will

# likely need more variables for your constructor to handle the hostname and port of the MongoDB

# server, and the database and collection names

username $=$ "aacuser"

password $=$ "Justice$01!"$

shelter $=$ AnimalShelter$($username$,$ password$)$

# class read method must support return of list object and accept projection json input

# sending the read method an empty document requests all documents be returned

df $=$ pd$.$DataFrame.from$\_$records$($shelter$.$read$\_$all$(\{\}))$

print$($df$)$

# MongoDB v$5+$ is going to return the $\text{'}\_$id$\text{'}$ column and that is going to have an

# invlaid object type of 'ObjectID' $-$ which will cause the data$\_$table to crash $-$ so we remove

# it in the dataframe here. The df$.$drop command allows us to drop the column. If we do not set

# inplace$=$True $-$ it will reeturn a new dataframe that does not contain the dropped column$($s$)$

df$.$drop$($columns$=[\text{'}\_$id$\text{'}],$inplace$=$True$)$

## Debug

print$($len$($df$.$to$\_$dict$($orient$=$'records'$)))$

print$($df$.$columns$)$

#########################

# Dashboard Layout $/$ View

#########################

app $=$ JupyterDash$(\_\_$name$\_\_)$

app.layout $=$ html$.$Div$([$

html$.$Div$($id$=$'hidden$-$div', style$=\{\text{'}$display$\text{'}$:'none'$\}),$

html$.$Center$($html$.$B$($html$.$H$1(\text{'}$SNHU CS$-340$ Dashboard'$))),$

html$.$Hr$(),$

dash$\_$table.DataTable$($

id$=$'datatable$-$id$\text{'},$

columns$=[$

$\{"$name$"$: i$,"$id$"$: i$,$ "deletable": False, "selectable": True$\}$ for i in df$.$columns

$],$

data$=$df$.$to$\_$dict$(\text{'}$records$\text{'}),$

#Features of the datatable

page$\_$size$=10,$ # Limits the number of rows displayed per page

sort$\_$action$=$'native', # adds the ability to sort by column

filter$\_$action$=$'native', # adds the ability to filter by column

row$\_$selectable $=$ "single", # adds the ability to select single rows

page$\_$action$=$'native',

style$\_$table$=\{\text{'}$height$\text{'}$: $\text{'}300$px$\text{'},$ 'overflowY': 'auto'$\},$

$),$

html$.$Br$(),$

html$.$Hr$(),$

html$.$Div$($

id$=$'map$-$id$\text{'},$

className$=$'col s$12$ m$6\text{'},$

$)$

$])$

#############################################

# Interaction Between Components $/$ Controller

#############################################

#This callback will highlight a row on the data table when the user selects it

@app.callback$($

Output$(\text{'}$datatable$-$id$\text{'},$ 'style$\_$data$\_$conditional'$),$

$[$Input$(\text{'}$datatable$-$id$\text{'},$ 'selected$\_$columns'$)]$

$)$

def update$\_$styles$($selected$\_$columns$)$:

return $[\{$

$\text{'}$if$\text{'}$: $\{$ 'column$\_$id$\text{'}$: i $\},$

'background$\_$color': $\text{'}$#D$2$F$3$FF$\text{'}$

$\}$ for i in selected$\_$columns$]$

# This callback will update the geo$-$location chart for the selected data entry

# derived$\_$virtual$\_$data will be the set of data available from the datatable in the form of

# a dictionary.

# derived$\_$virtual$\_$selected$\_$rows will be the selected row$($s$)$ in the table in the form of

# a list. For this application, we are only permitting single row selection so there is only

# one value in the list.

# The iloc method allows for a row, column notation to pull data from the datatable

@app.callback$($

Output$(\text{'}$map$-$id$\text{'},$ "children"$),$

$[$Input$(\text{'}$datatable$-$id$\text{'},$ "derived$\_$virtual$\_$data"$),$

Input$(\text{'}$datatable$-$id$\text{'},$ "derived$\_$virtual$\_$selected$\_$rows"$)])$

def update$\_$map$($viewData$,$ index$)$:

dff $=$ pd$.$DataFrame.from$\_$dict$($viewData$)$

# Because we only allow single row selection, the list can

# be converted to a row index here

if index is None:

row $=0$

else:

row $=$ index$[0]$

# Austin TX is at $[30\mathrm{.}75,-97\mathrm{.}48]$

return $[$

dl$.$Map$($style$=\{\text{'}$width$\text{'}$: $\text{'}1000$px$\text{'},$ 'height': $\text{'}500$px$\text{'}\},$

center$=[30\mathrm{.}75,-97\mathrm{.}48],$ zoom$=10,$ children$=[$

dl$.$TileLayer$($id$=$"base$-$layer$-$id$"),$

# Marker with tool tip and popup

# Column $13$ and $14$ define the grid$-$coordinates for

# the map

# Column $4$ defines the breed for the animal

# Column $9$ defines the name of the animal

dl$.$Marker$($position$=[$dff$.$iloc$[$row$,13],$dff$.$iloc$[$row$,14]],$

children$=[$

dl$.$Tooltip$($dff$.$iloc$[$row$,4]),$

dl$.$Popup$([$

html$.$H$1("$Animal Name"$),$

html$.$P$($dff$.$iloc$[$row$,9])$

$])$

$])$