<commit_before><template>
    <div class="map-area">
        <h2>{{ place.city }}</h2>
        <p>{{ place.longitude }}, {{ place.latitude }}</p>

        <div class="map-container">
            <v-map :zoom="zoom"
                :minZoom="minZoom"
                :maxZoom="maxZoom"
                :center="[place.longitude, place.latitude]">
                <v-tilelayer :url="url"
                    :attribution="attribution"></v-tilelayer>
                <v-marker :lat-lng="{ lng: place.longitude, lat: place.latitude }"></v-marker>
            </v-map>
        </div>
    </div>
</template>

<script>
import Vue2Leaflet from 'vue2-leaflet';

export default {
    name: 'map-area',
    props: {
        place: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            minZoom: 4,
            zoom: 5,
            maxZoom: 10,
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        };
    },
    components: {
        'v-map': Vue2Leaflet.Map,
        'v-tilelayer': Vue2Leaflet.TileLayer,
        'v-marker': Vue2Leaflet.Marker,
    },
};
</script>

<style lang="less" scoped>
@import (reference) '~@/assets/variables/global';
@import "~leaflet/dist/leaflet.css";

h2 {
    font-weight: 300;
}

.map-container {
    width: 100%;
    height: 100% / 1.62;
    padding: @base-unit;
    border: 1px solid #CBAA89;
}
</style><commit_msg>Set a map height so that it doesnt change with filtering<commit_after><template>
    <div class="map-area">
        <h2>{{ place.city }}</h2>
        <p>{{ place.longitude }}, {{ place.latitude }}</p>

        <div class="map-container">
            <v-map :zoom="zoom"
                :minZoom="minZoom"
                :maxZoom="maxZoom"
                :center="[place.longitude, place.latitude]">
                <v-tilelayer :url="url"
                    :attribution="attribution"></v-tilelayer>
                <v-marker :lat-lng="{ lng: place.longitude, lat: place.latitude }"></v-marker>
            </v-map>
        </div>
    </div>
</template>

<script>
import Vue2Leaflet from 'vue2-leaflet';

export default {
    name: 'map-area',
    props: {
        place: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            minZoom: 4,
            zoom: 5,
            maxZoom: 10,
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        };
    },
    components: {
        'v-map': Vue2Leaflet.Map,
        'v-tilelayer': Vue2Leaflet.TileLayer,
        'v-marker': Vue2Leaflet.Marker,
    },
};
</script>

<style lang="less" scoped>
@import (reference) '~@/assets/variables/global';
@import "~leaflet/dist/leaflet.css";

h2 {
    font-weight: 300;
}

.map-container {
    width: 100%;
    height: 100vh / 1.62;
    padding: @base-unit;
    border: 1px solid #CBAA89;
}
</style>
{'fraction_non_alphanumeric': 0.1753875968992248, 'fraction_numerical': 0.01744186046511628, 'mean_word_length': 1.891690009337068, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '784951', 'n_tokens_mistral': 1115, 'n_tokens_neox': 1045, 'n_words': 195}