Crime Map created with Dash Mantine, Dash Leaflet, etc

Below is an app I have been working on recently which highlights some of the many community components available for Dash. This crimemapping app uses many componets from Dash Mantine (The Graphical UI), Dash Leaflet(Mapping), Dash-Extensions(Various JS needs), and Dash HTML(Layout).

The latest version of my crimemapping app can be found here:

Some features are listed below:

This app comes with many available features that lets you control which crimes are shown on the map. You can filter crimes based on time, certain dates, type of crime, days of the week, neighborhood, or if a news article is available. (All in accordion tabs.)

There are 3 different maps to view. One allows you to see individual crimes while the other two allow you to view crimes grouped by neighborhood or census tract.

Each map feature can be interacted with and will produce a popup that will either give you additional info on a certain crime or a general area.

Finally this app comes with 4 graphs that lets you view crimes based on Crimes Per Month, Crimes per Day of the Week, Crimes per Neighborhood, and Crimes per Hour.

Thank you for reading and the support of the community! Any suggestions would be greatly appreciated.


Its awesome ! @NiBk your work is amaziiiiiiiiiiiiiiiiiiiiiiiiiiiing :white_heart:

how did you build this

and another question did you use use just ploty and dash ?

1 Like

Thank you for the kind words!

That popup was created with the modal component in Dash Mantine. A link to the documentation for that can be found @ The body of the modal is an html.Iframe that I used to load an html document with the text. This allowed me to easily create text breaks.

The majority of the visuals was created by using dash components and plotly graphs. Some styling was done in CSS. The majority of the data processing however used pandas and shapely (To place individual points in groups based on location).

Hi @NiBk
This app is beautiful. A great usage of Dash components built by the community, and it looks very professional. Interesting how most crimes happened after work hours in March.

Congratulations :muscle:

1 Like

Thank you! Much of what I learned when I first started using Dash came from your videos. I definitely would not be able to create a multipage app without your help.


@NiBk thank you soo much …

oky that’s looks awesome , I’ll try to build this popup !
thanks for this informations

1 Like

Thought I would share this for anybody interested, but here is how I recently implemented Google Analytics into this Dash app and tracked User IDs

Unique User IDs allow me to see how many user return to my site along with how they interact with certain elements of my page. This allows me to tailor a better experience for all.

Now whenever the user enters for the first time, they are given a popup to enter a User ID or to be assigned a random ID (random adjective + noun combination).


This is then saved to a local component. Whenever a user signs in again on the same browser, the program will check to see if anything has been stored in the store component and will automatically use that as their user ID without the User having to re-enter it.

    [Output("idstore", "data"),
     Output("idname", "children"),
     Output("userID", "error"),
     Output("idsubmit", "n_clicks")],
    [Input("userID", "value"),
    Input("idsubmit", "n_clicks"),
    Input("idrandom", "n_clicks"),
    Input("idstore", "data"),]
def sendid(idval, id1, id2, data):
    if id1 > 0 and idval != None:
        return idval, idval, None, 1
    elif id1 > 0 and idval == None:
        return idval, idval, "Enter a value", 0
    elif id2:
        x = randomid.randomid()
        return x,x, None, 1
        return data, data, None, 0

The user ID is both saved to the element and to the children of an invisible div. This div is then accessed in a client side callback as JS is needed to use Google Analytics. More info on how to implement User IDs on your website can be found at Google’s website. This is what the callback looks like.

    function(tab_value) {
        if (tab_value != null){;
          window.dataLayer = window.dataLayer || [];
            'event': 'user_login',
            'userId': tab_value,
            'event': 'crm_login',
            'crmId': tab_value
    Output('blank-output2', 'children'),
    Input('idname', 'children')

To implement GA on your Dash program you must use the index string method to enter your GA4 tag into the head of your website

app.index_string = """<!DOCTYPE html>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <!-- Google Tag Manager -->
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        <!-- End Google Tag Manager -->
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src=""></script>
        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src=""
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->

If you have any questions on implementing GA on your dash page, do not hesitate to ask.