JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <div class="container-fluid vh-100 g-0">
        <div class="row h-100 g-0">

            <div class="col-sm-4 d-flex flex-column">            
                <div class="location-sidebar flex-grow-1 p-3 bg-light border-bottom border-end">

                    <div class="location-filters">

                        <div class="input-group mb-2">
                            <input v-model="filters.city" @input="filter" type="text" class="form-control" placeholder="Enter city">
                        </div>

                        <div class="form-check mb-2">
                            <input v-model="filters.sundays" @change="filter" class="form-check-input" type="checkbox" id="sundays">
                            <label class="form-check-label" for="sundays">Open on Sundays</label>
                        </div>

                        <div class="form-check mb-2">
                            <input v-model="filters.breakfast" @change="filter" class="form-check-input" type="checkbox" id="breakfast">
                            <label class="form-check-label" for="breakfast">Breakfast</label>
                        </div>

                    </div>                    
                    <div class="location-list">
                        <address v-for="(location, index) in locations" itemscope itemtype="https://schema.org/Place">
                            {{ index }}
                        </address>
                    </div>

                </div>                
            </div>

            <div class="col-sm-8 d-flex flex-column position-relative">
                
                <div class="location-map position-relative...

CSS

.v-enter-active,
.v-leave-active {
    transition-property: opacity;
    transition-timing-function: ease;
}

.v-enter-active {
    transition-duration: 0s;
}

.v-leave-active {
    transition-duration: 0.5s;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

JavaScript

const { createApp } = Vue;

createApp({
    data() {
        return {
            loading: true,
            filters: {
                city: null,
                sundays: false,
                breakfast: false,
            },
            map: null,
            markers: [],
            zoom: 13,
            locations: [
                {
                    "name": "Geschäft im Netto-Markt Stavenhagen",
                    "city": "Stavenhagen",
                    "sundays": 0,
                    "breakfast": 1,
                    "lat": 53.699754690771556,
                    "lon": 12.902085364907437
                },
                {
                    "name": "Backstubencafé Sellin",
                    "city": "Sellin",
                    "sundays": 0,
                    "breakfast": 0,
                    "lat": 54.3820180077662,
                    "lon": 13.697961103833363
                },
                {
                    "name": "Backstubencafé Doberaner Strasse Rostock",
                    "city": "Rostock",
                    "sundays": 0,
                    "breakfast": 0,
                    "lat": 54.09146618320716,
                    "lon": 12.114294642567835
                },
                {
                    "name": "Geschäft im Penny-Markt Bützower Straße Rostock",
                    "city": "Rostock",
                    "sundays": 1,
                    "breakfast": 1,
                    "lat": 54.181785101428574,
                    "lon": 12.086919271163888
                },
                {
                    "name": "Geschäft im Edeka-Markt Teterow",
                    "city": "Teterow",
                    "sundays": 0,
                    "breakfast": 0,
                    "lat": 53.77656821885441,
                    "lon": 12.566106041097283
                }
            ],
        }
    },
    mounted() {    

        this.buildMap();

    },
    methods: {
        buildMap() {
            var _this =...