# Visual Mapping of Parking Spaces in Django Web App Using Bokeh

**URL:** <https://discourse.bokeh.org/t/visual-mapping-of-parking-spaces-in-django-web-app-using-bokeh/12066>\
**Category:** Community Support\
**Tags:** map, website, bokeh\
**Created:** [October 30, 2024, 6:15pm UTC](https://discourse.bokeh.org/t/visual-mapping-of-parking-spaces-in-django-web-app-using-bokeh/12066 "2024-10-30T18:15:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![LucasB](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/lucasb/32/6976_2.png) [@LucasB](https://discourse.bokeh.org/u/LucasB)\
**Post date:** [October 30, 2024, 6:15pm UTC](https://discourse.bokeh.org/t/visual-mapping-of-parking-spaces-in-django-web-app-using-bokeh/12066/1 "2024-10-30T18:15:32Z")

</div>

Hello Bokeh Community,

I am developing a web application in Django to manage a parking lot, with a real-time visual display of occupied and free spaces. The application connects to a SQL database that holds the IDs of each parking space and a boolean value (`True` for occupied, `False` for free), updated through sensors.

I’m looking for guidance on the best approach to create a visual mapping of these parking spaces using Bokeh.

I was checking out the [Texas Hover Map](https://docs.bokeh.org/en/latest/docs/examples/topics/geo/texas_hover_map.html) but I’m not sure if ColorMapping would be the right tool, or how to make a map.

Thanks in advance!!

---

<div class="post-metadata">

**Author:** ![nmasnadi](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/nmasnadi/32/6220_2.png) [@nmasnadi](https://discourse.bokeh.org/u/nmasnadi)\
**Post date:** [October 30, 2024, 7:49pm UTC](https://discourse.bokeh.org/t/visual-mapping-of-parking-spaces-in-django-web-app-using-bokeh/12066/2 "2024-10-30T19:49:35Z")

</div>

Without knowing much about structure of your data and application, here are my thoughts: do you have coordinates associated with each parking space? if so, you can create a dataframe with columns `id`, `x_coordinate`, `y_coordinate`, `is_occupied` and map True/False for `is_occupied` to different colors like green/red and plot each space as a circle with appropriate color:

```auto
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.io import output_notebook, show
output_notebook()

n_spots = 100
x, y = np.meshgrid(np.arange(0, 10), np.arange(0, 10))

df = pd.DataFrame({
    'id': np.arange(n_spots),
    'x_coordinate': np.reshape(x, (100,)),
    'y_coordinate': np.reshape(y, (100,)),
    'is_occupied': np.random.choice([True, False], n_spots)
})
df['color'] = df['is_occupied'].map({True: 'green', False: 'red'})
df['is_occupied'] = df['is_occupied'].map({True: 'True', False: 'False'})

source = ColumnDataSource(data=df)
p = figure(width=500, height=400)
p.circle(x='x_coordinate', y='y_coordinate', color='color', source=source, size=10)

h = HoverTool(tooltips=[('id', '@id'), ('occupied', '@is_occupied')])
p.add_tools(h)

show(p)

```

 ![Screenshot 2024-10-30 at 3.40.57 PM](https://discourse-uploads.bokeh.org/original/2X/e/e6cb96a95bdd5c1321cb17103cabb434cdf27d6c.png)

Make sure to use a ColumnDataSource created from this dataframe and use it in your plot. Then you need to have a way to update the CDS in your app when data is updated. Hope this helps.

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [January 28, 2025, 7:50pm UTC](https://discourse.bokeh.org/t/visual-mapping-of-parking-spaces-in-django-web-app-using-bokeh/12066/3 "2025-01-28T19:50:16Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.