bravioo/mapa
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras en sidebar e idioma

Browse Source
This commit is contained in:
María
2025-11-04 18:34:06 +01:00
parent c75ce93f15
commit 16fe68bfdf
7 changed files with 766 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/main.css
View File

@@ -1,4 +1,5 @@
@import "tailwindcss";
@import 'mapbox-gl/dist/mapbox-gl.css';
@theme {
/* Fonts */

447
components/mapComp.vue Normal file
View File

@@ -0,0 +1,447 @@
<template>
<section class="relative">
<!-- Left Sidebar -->
<aside
v-if="showSidebar"
class="fixed left-0 top-0 w-80 h-screen bg-gradient-to-br from-purple-900 via-purple-950 to-indigo-950 text-white overflow-y-auto z-50 shadow-2xl sidebar-custom"
>
<div class="p-5 border-b border-white/10">
<img src="/LOGOBraviooB.png" alt="logo-bravio" class="h-10 md:h-14 object-cover" />
</div>
<div class="p-5">
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">
{{ langcode === 'pt' ? 'Explorar instituições' : 'Explorar instituciones' }}
</h2>
</div>
<p class="text-sm opacity-80 mb-5 leading-relaxed">
{{ langcode === 'pt'
? 'Busque por universidade, país e estado da Defensoria.'
: 'Busca por universidad, país y estado de Defensoría.' }}
</p>
<!-- Search -->
<div class="mb-4">
<label class="block text-sm mb-2 font-medium">
{{ langcode === 'pt' ? 'Buscar Universidade' : 'Buscar Universidad' }}
</label>
<div class="relative">
<input
v-model="searchQuery"
type="text"
:placeholder="langcode === 'pt' ? 'Buscar...' : 'Buscar...'"
class="w-full px-3 py-2.5 pr-10 bg-white/10 border border-white/20 rounded-md text-white text-sm placeholder-white/50 focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
/>
<span class="absolute right-3 top-1/2 -translate-y-1/2 opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
</span>
</div>
</div>
<!-- Country -->
<div class="mb-4">
<label class="block text-sm mb-2 font-medium">
{{ langcode === 'pt' ? 'País' : 'País' }}
</label>
<select
v-model="selectedCountry"
class="w-full px-3 py-2.5 bg-white/10 border border-white/20 rounded-md text-white text-sm appearance-none cursor-pointer focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
>
<option value="">{{ langcode === 'pt' ? 'Selecionar' : 'Seleccionar' }}</option>
<option v-for="c in countries" :key="c.value" :value="c.value">
{{ c[langcode] }}
</option>
</select>
</div>
<!-- Status -->
<div class="mb-4">
<label class="block text-sm mb-2 font-medium">
{{ langcode === 'pt' ? 'Estado da Defensoria' : 'Estado Defensoría' }}
</label>
<select
v-model="selectedStatus"
class="w-full px-3 py-2.5 bg-white/10 border border-white/20 rounded-md text-white text-sm appearance-none cursor-pointer focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
>
<option value="">{{ langcode === 'pt' ? 'Selecionar' : 'Seleccionar' }}</option>
<option value="activa">{{ langcode === 'pt' ? 'Ativa' : 'Activa' }}</option>
<option value="en-desarrollo">{{ langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo' }}</option>
<option value="en-estudio">{{ langcode === 'pt' ? 'Em estudo' : 'En estudio' }}</option>
</select>
</div>
<!-- Clear -->
<div class="w-full flex">
<button
class="w-fit p-2.5 ml-auto bg-transparent border border-white/30 text-white/90 rounded-md cursor-pointer text-xs"
@click="clearFilters"
>
{{ langcode === 'pt' ? 'LIMPAR' : 'LIMPIAR' }}
</button>
</div>
<!-- Counts -->
<div class="my-5 py-4 border-t border-b border-white/10">
<p class="text-sm mb-3">
{{ langcode === 'pt' ? 'Mostrando' : 'Mostrando' }}
{{ filteredResults.length }}
{{ langcode === 'pt' ? 'de' : 'de' }}
{{ universities.length }}
{{ langcode === 'pt' ? 'universidades' : 'universidades' }}
</p>
<div class="flex gap-2.5 text-surface">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-cyan-400"></span>
{{ activaCount }}
</span>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-orange-400"></span>
{{ desarrolloCount }}
</span>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-rose-400"></span>
{{ estudioCount }}
</span>
</div>
</div>
<!-- Download -->
<button
class="w-full py-2.5 bg-transparent text-white/90 cursor-pointer text-xs mb-3 hover:underline flex items-end justify-end gap-2.5"
@click="downloadCSV"
>
{{ langcode === 'pt' ? 'Baixar CSV' : 'Descargar CSV' }}
<span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg></span>
</button>
<!-- University List -->
<div class="flex flex-col gap-2.5">
<div
v-for="u in filteredResults"
:key="u.id"
class="university-item bg-white/90 text-bg p-4 rounded-lg cursor-pointer transition-all border-2 border-transparent hover:bg-white/70"
:class="{ 'border-white/30 bg-white/15': selectedUniversity?.id === u.id }"
@click="selectUniversity(u)"
>
<h3 class="text-base font-semibold mb-1">{{ u.name }}</h3>
<p class="text-xs opacity-80 mb-2">{{ u.city }}, {{ u.country }}</p>
<span class="inline-flex items-center gap-1.5 text-xs font-medium">
<span
class="w-3.5 h-3.5 rounded-full border-2 border-white inline-block"
:class="{
'bg-cyan-400': u.status === 'activa',
'bg-orange-400': u.status === 'en-desarrollo',
'bg-rose-400': u.status === 'en-estudio'
}"
></span>
{{ getStatusLabel(u.status) }}
</span>
</div>
</div>
</div>
</aside>
<!-- Botón de colapsar / expandir -->
<button
class="aside-colap-btn fixed top-5 z-50 bg-white hover:bg-white/80 hover:cursor-pointer text-surface w-8 h-8 rounded-l-none rounded-r-md flex items-center justify-center shadow-lg transition-all"
:class="[
showSidebar
? 'left-80'
: 'left-0'
]"
@click="showSidebar = !showSidebar"
>
<svg
v-if="showSidebar"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m15 18-6-6 6-6" />
</svg>
<svg
v-else
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</button>
<!-- Contenedor del mapa -->
<div id="mapContainer" class="map-container relative" style="width:100%;height:100vh;">
<!-- *** Overlay de marcadores gestionados por Vue (está dentro del mapContainer) *** -->
<div id="mapMarkers" class="absolute inset-0 pointer-events-none z-40">
<div
v-for="u in filteredResults"
:key="u.id"
class="marker pointer-events-auto"
:style="getMarkerStyle(u)"
@click="selectUniversity(u)"
>
<!-- elemento visual del punto — sin transform en hover -->
<div
class="marker-dot w-5 h-5 rounded-full border-[3px] border-white shadow-md"
:style="{ backgroundColor: getMarkerColor(u.status) }"
title="Click para ir"
></div>
</div>
</div>
<!-- El mapa se inicializa en este div -->
<!-- Nota: el overlay está dentro, así las coordenadas proyectadas encajan exactamente -->
</div>
<!-- Leyenda de estados + selector de idioma -->
<div class="fixed bottom-5 right-5 text-sm text-bg z-[1000] min-w-44">
<div class="flex flex-col justify-between items-start gap-2 w-full">
<!-- Selector de idioma -->
<div class="w-full">
<select
v-model="selectedLanguage"
class="px-2 py-1 rounded-md border border-gray-300 bg-white/90 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"
@change="changeLanguage(selectedLanguage)"
>
<option value="es">Español</option>
<option value="pt">Português</option>
</select>
</div>
<!-- Columna de estados -->
<div class="bg-white/90 p-4 rounded-lg text-xs w-full">
<h3 class="font-semibold mb-1">
{{ langcode === 'pt' ? 'Estado' : 'Estado' }}
</h3>
<ul class="space-y-1">
<li class="flex items-center gap-2">
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-cyan-400"></span>
<span>{{ langcode === 'pt' ? 'Ativa' : 'Activa' }}</span>
</li>
<li class="flex items-center gap-2">
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-orange-400"></span>
<span>{{ langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo' }}</span>
</li>
<li class="flex items-center gap-2">
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-rose-400"></span>
<span>{{ langcode === 'pt' ? 'Sem defensoria' : 'Sin defensoría' }}</span>
</li>
</ul>
</div>
</div>
</div>
</section>
</template>
<script>
import mapboxgl from 'mapbox-gl'
import { mapGetters, mapActions } from 'vuex'
import universitiesData from '@/data/universities.json'
export default {
data() {
return {
accessToken: 'pk.eyJ1IjoibWFyaWFzYXNvIiwiYSI6ImNsYThnemI4bjAzYzEzdm52cG1jZnptbXQifQ.CK4LGjX7ZFCVr-unLdzUSQ',
map: null,
universities: universitiesData,
searchQuery: '',
selectedCountry: '',
selectedStatus: '',
selectedLanguage: 'es',
selectedUniversity: null,
showSidebar: true,
countries: [
{ value: 'honduras', es: 'Honduras', pt: 'Honduras' },
{ value: 'bolivia', es: 'Bolivia', pt: 'Bolívia' },
{ value: 'argentina', es: 'Argentina', pt: 'Argentina' },
{ value: 'chile', es: 'Chile', pt: 'Chile' },
{ value: 'resto', es: 'Resto de países - Latinoamérica', pt: 'Resto de países - Latinoamérica' }
]
}
},
computed: {
...mapGetters(['langcode']),
filteredResults() {
return this.universities.filter(u => {
const matchSearch =
!this.searchQuery ||
u.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
u.city.toLowerCase().includes(this.searchQuery.toLowerCase())
// País
let matchCountry = true
if (this.selectedCountry) {
const countryLower = u.country.toLowerCase()
if (this.selectedCountry === 'resto') {
// Si selecciona "resto", solo mostramos los países que NO son estos cuatro
const principales = ['honduras', 'bolivia', 'argentina', 'chile']
matchCountry = !principales.includes(countryLower)
} else {
matchCountry = countryLower === this.selectedCountry.toLowerCase()
}
}
const matchStatus = !this.selectedStatus || u.status === this.selectedStatus
return matchSearch && matchCountry && matchStatus
})
},
activaCount() { return this.universities.filter(u => u.status === 'activa').length },
desarrolloCount() { return this.universities.filter(u => u.status === 'en-desarrollo').length },
estudioCount() { return this.universities.filter(u => u.status === 'en-estudio').length }
},
watch: {
// cuando cambian resultados, forzamos re-render para reposicionar overlays
filteredResults() {
// forzamos calculo de estilos (re-render)
this.$nextTick(() => this.$forceUpdate())
}
},
mounted() {
this.createMap()
},
methods: {
...mapActions(['setLangcode']),
createMap() {
mapboxgl.accessToken = this.accessToken
this.map = new mapboxgl.Map({
container: 'mapContainer',
style: 'mapbox://styles/mariasaso/cme8hxq2w00cb01sb3jd105ue',
center: [-60, -15],
zoom: 2.5
})
// controles Mapbox
this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')
// Recalcula las posiciones de los overlays cuando el mapa se mueve/zoom/resiza
this.map.on('move', () => this.$forceUpdate())
this.map.on('zoom', () => this.$forceUpdate())
this.map.on('resize', () => this.$forceUpdate())
// al cargar, forzamos render
this.map.on('load', () => this.$forceUpdate())
},
getMarkerColor(status) {
return {
'activa': '#22c5c2',
'en-desarrollo': '#ffa500',
'en-estudio': '#ff4560'
}[status] || '#999'
},
getMarkerStyle(u) {
// Devuelve left/top en px relativos al contenedor del mapa (map.project funciona si map existe)
if (!this.map) return { left: '0px', top: '0px', transform: 'translate(-50%, -50%)' }
// u.coordinates está en formato [lng, lat]
const p = this.map.project(u.coordinates) // { x, y }
return {
left: `${Math.round(p.x)}px`,
top: `${Math.round(p.y)}px`,
transform: 'translate(-50%, -50%)',
position: 'absolute'
}
},
selectUniversity(u) {
this.selectedUniversity = u
// Solo flyTo/zoom: sin popups ni cambios visuales de marcador
if (this.map) {
this.map.flyTo({ center: u.coordinates, zoom: 12, duration: 1200 })
}
},
clearFilters() {
this.searchQuery = ''
this.selectedCountry = ''
this.selectedStatus = ''
},
getStatusLabel(status) {
const labels = {
'activa': this.langcode === 'pt' ? 'Ativa' : 'Activa',
'en-desarrollo': this.langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo',
'en-estudio': this.langcode === 'pt' ? 'Em estudo' : 'En estudio'
}
return labels[status] || status
},
downloadCSV() {
const headers = ['ID', 'Universidad', 'Ciudad', 'País', 'Estado']
const rows = this.filteredResults.map(u => [u.id, u.name, u.city, u.country, u.status])
const csv = headers.join(',') + '\n' + rows.map(r => r.join(',')).join('\n')
const blob = new Blob([csv], { type: 'text/csv' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'universidades.csv'
a.click()
URL.revokeObjectURL(url)
},
changeLanguage(lang) {
this.setLangcode(lang)
}
}
}
</script>
<style scoped>
/* Transición suave para el sidebar al mostrarse/ocultarse */
.sidebar-custom, .aside-colap-btn {
transition: transform 0.4s ease-in-out;
}
.sidebar-custom[style*="display: none"] {
transform: translateX(-100%);
}
/* Aseguramos que el overlay y el mapa estén alineados exactamente */
.map-container { position: relative; }
/* Contenedor absoluto que centra cada marker por su propio translate(-50%, -50%) */
.marker {
position: absolute;
transform-origin: center center;
/* translate aplicado desde getMarkerStyle (inline style) */
/* pointer-events-auto para permitir clicks */
}
/* Punto visual sin transformaciones en hover, para que no cambie su layout */
.marker-dot {
width: 20px; height: 20px;
border-radius: 9999px;
border: 3px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
/* Opcional: cursor pointer */
.marker { cursor: pointer; }
/* Scrollbar y controles (mantener tus estilos previos) */
.sidebar-custom::-webkit-scrollbar { width: 6px; }
.sidebar-custom::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.mapboxgl-ctrl-group { background: white !important; box-shadow: 0 0 0 2px rgba(0,0,0,.1) !important; }
</style>

46
data/universities.json Normal file
View File

@@ -0,0 +1,46 @@
[
{
"id": 1,
"name": "Universidad Carlos III",
"city": "Buenos Aires",
"country": "Argentina",
"status": "activa",
"coordinates": [
-58.3816,
-34.6037
]
},
{
"id": 2,
"name": "Universidad de Chile",
"city": "Santiago",
"country": "Chile",
"status": "en-desarrollo",
"coordinates": [
-70.6693,
-33.4489
]
},
{
"id": 3,
"name": "Universidad Nacional de Colombia",
"city": "Bogotá",
"country": "Colombia",
"status": "en-estudio",
"coordinates": [
-74.0721,
4.6097
]
},
{
"id": 4,
"name": "Universidad Nacional Autónoma de México",
"city": "Ciudad de México",
"country": "México",
"status": "activa",
"coordinates": [
-99.1332,
19.4326
]
}
]

2
nuxt.config.ts
View File

@@ -18,7 +18,7 @@ export default defineNuxtConfig({
app: {
//TODO: Cambiar los metadatos
head: {
title: "Bravioo",
title: "Bravioo - Mapa de Defensorías Universitarias",
htmlAttrs: {
lang: "es",
},

268
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"@nuxt/eslint": "^1.7.1",
"@tailwindcss/vite": "^4.1.11",
"eslint": "^9.31.0",
"mapbox-gl": "^3.16.0",
"nuxt": "^3.17.7",
"tailwindcss": "^4.1.11",
"vue": "^3.5.17",
@@ -1441,6 +1442,20 @@
"integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
"license": "MIT"
},
"node_modules/@mapbox/jsonlint-lines-primitives": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
"integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/@mapbox/mapbox-gl-supported": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-3.0.0.tgz",
"integrity": "sha512-2XghOwu16ZwPJLOFVuIOaLbN0iKMn867evzXFyf0P22dqugezfJwLmdanAgU25ITvz1TvOfVP4jsDImlDJzcWg==",
"license": "BSD-3-Clause"
},
"node_modules/@mapbox/node-pre-gyp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.0.tgz",
@@ -1471,6 +1486,44 @@
"node": ">=8"
}
},
"node_modules/@mapbox/point-geometry": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
"integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
"license": "ISC"
},
"node_modules/@mapbox/tiny-sdf": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.7.tgz",
"integrity": "sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==",
"license": "BSD-2-Clause"
},
"node_modules/@mapbox/unitbezier": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
"license": "BSD-2-Clause"
},
"node_modules/@mapbox/vector-tile": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.4.tgz",
"integrity": "sha512-AkOLcbgGTdXScosBWwmmD7cDlvOjkg/DetGva26pIRiZPdeJYjYKarIlb4uxVzi6bwHO6EWH82eZ5Nuv4T5DUg==",
"license": "BSD-3-Clause",
"dependencies": {
"@mapbox/point-geometry": "~1.1.0",
"@types/geojson": "^7946.0.16",
"pbf": "^4.0.1"
}
},
"node_modules/@mapbox/whoots-js": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
"integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
"license": "ISC",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@napi-rs/wasm-runtime": {
"version": "0.2.12",
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -3899,24 +3952,60 @@
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
"license": "MIT"
},
"node_modules/@types/geojson": {
"version": "7946.0.16",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
"license": "MIT"
},
"node_modules/@types/geojson-vt": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
"integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
"license": "MIT",
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/json-schema": {
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"license": "MIT"
},
"node_modules/@types/mapbox__point-geometry": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
"integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==",
"license": "MIT"
},
"node_modules/@types/parse-path": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
"integrity": "sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==",
"license": "MIT"
},
"node_modules/@types/pbf": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
"integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==",
"license": "MIT"
},
"node_modules/@types/resolve": {
"version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
"license": "MIT"
},
"node_modules/@types/supercluster": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
"integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
"license": "MIT",
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.38.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.38.0.tgz",
@@ -5364,6 +5453,12 @@
"integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
"license": "MIT"
},
"node_modules/cheap-ruler": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cheap-ruler/-/cheap-ruler-4.0.0.tgz",
"integrity": "sha512-0BJa8f4t141BYKQyn9NSQt1PguFQXMXwZiA5shfoaBYHAb2fFk2RAX+tiWMoQU+Agtzt3mdt0JtuyshAXqZ+Vw==",
"license": "ISC"
},
"node_modules/chokidar": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -5951,6 +6046,12 @@
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/csscolorparser": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
"integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
"license": "MIT"
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6326,6 +6427,12 @@
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
"license": "MIT"
},
"node_modules/earcut": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz",
"integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
"license": "ISC"
},
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -7415,6 +7522,12 @@
"node": ">=6.9.0"
}
},
"node_modules/geojson-vt": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
"integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==",
"license": "ISC"
},
"node_modules/get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7490,6 +7603,12 @@
"git-up": "^8.1.0"
}
},
"node_modules/gl-matrix": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
"integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
"license": "MIT"
},
"node_modules/glob": {
"version": "10.4.5",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -7593,6 +7712,12 @@
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
"license": "MIT"
},
"node_modules/grid-index": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==",
"license": "ISC"
},
"node_modules/gzip-size": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -8210,6 +8335,12 @@
"node": ">=6"
}
},
"node_modules/kdbush": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
"license": "ISC"
},
"node_modules/keyv": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -8746,6 +8877,62 @@
"source-map-js": "^1.2.0"
}
},
"node_modules/mapbox-gl": {
"version": "3.16.0",
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.16.0.tgz",
"integrity": "sha512-rluV1Zp/0oHf1Y9BV+nePRNnKyTdljko3E19CzO5rBqtQaNUYS0ePCMPRtxOuWRwSdKp3f9NWJkOCjemM8nmjw==",
"license": "SEE LICENSE IN LICENSE.txt",
"workspaces": [
"src/style-spec",
"test/build/typings"
],
"dependencies": {
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
"@mapbox/mapbox-gl-supported": "^3.0.0",
"@mapbox/point-geometry": "^1.1.0",
"@mapbox/tiny-sdf": "^2.0.6",
"@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^2.0.4",
"@mapbox/whoots-js": "^3.1.0",
"@types/geojson": "^7946.0.16",
"@types/geojson-vt": "^3.2.5",
"@types/mapbox__point-geometry": "^0.1.4",
"@types/pbf": "^3.0.5",
"@types/supercluster": "^7.1.3",
"cheap-ruler": "^4.0.0",
"csscolorparser": "~1.0.3",
"earcut": "^3.0.1",
"geojson-vt": "^4.0.2",
"gl-matrix": "^3.4.4",
"grid-index": "^1.1.0",
"kdbush": "^4.0.2",
"martinez-polygon-clipping": "^0.7.4",
"murmurhash-js": "^1.0.0",
"pbf": "^4.0.1",
"potpack": "^2.0.0",
"quickselect": "^3.0.0",
"serialize-to-js": "^3.1.2",
"supercluster": "^8.0.1",
"tinyqueue": "^3.0.0"
}
},
"node_modules/martinez-polygon-clipping": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/martinez-polygon-clipping/-/martinez-polygon-clipping-0.7.4.tgz",
"integrity": "sha512-jBEwrKtA0jTagUZj2bnmb4Yg2s4KnJGRePStgI7bAVjtcipKiF39R4LZ2V/UT61jMYWrTcBhPazexeqd6JAVtw==",
"license": "MIT",
"dependencies": {
"robust-predicates": "^2.0.4",
"splaytree": "^0.1.4",
"tinyqueue": "^1.2.0"
}
},
"node_modules/martinez-polygon-clipping/node_modules/tinyqueue": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-1.2.3.tgz",
"integrity": "sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA==",
"license": "ISC"
},
"node_modules/mdn-data": {
"version": "2.12.2",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
@@ -8962,6 +9149,12 @@
"integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
"license": "MIT"
},
"node_modules/murmurhash-js": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
"integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
"license": "MIT"
},
"node_modules/nanoid": {
"version": "5.1.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
@@ -9774,6 +9967,18 @@
"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
"license": "MIT"
},
"node_modules/pbf": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
"integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
"license": "BSD-3-Clause",
"dependencies": {
"resolve-protobuf-schema": "^2.1.0"
},
"bin": {
"pbf": "bin/pbf"
}
},
"node_modules/perfect-debounce": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -10294,6 +10499,12 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/potpack": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/potpack/-/potpack-2.1.0.tgz",
"integrity": "sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==",
"license": "ISC"
},
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -10358,6 +10569,12 @@
"node": ">= 6"
}
},
"node_modules/protocol-buffers-schema": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
"license": "MIT"
},
"node_modules/protocols": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.2.tgz",
@@ -10409,6 +10626,12 @@
],
"license": "MIT"
},
"node_modules/quickselect": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
"license": "ISC"
},
"node_modules/radix3": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -10619,6 +10842,15 @@
"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
}
},
"node_modules/resolve-protobuf-schema": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
"license": "MIT",
"dependencies": {
"protocol-buffers-schema": "^3.3.1"
}
},
"node_modules/reusify": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -10635,6 +10867,12 @@
"integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
"license": "MIT"
},
"node_modules/robust-predicates": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
"integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==",
"license": "Unlicense"
},
"node_modules/rollup": {
"version": "4.52.4",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
@@ -10830,6 +11068,15 @@
"randombytes": "^2.1.0"
}
},
"node_modules/serialize-to-js": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
"integrity": "sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==",
"license": "MIT",
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/serve-placeholder": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/serve-placeholder/-/serve-placeholder-2.0.2.tgz",
@@ -11016,6 +11263,12 @@
"node": ">=0.10.0"
}
},
"node_modules/splaytree": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/splaytree/-/splaytree-0.1.4.tgz",
"integrity": "sha512-D50hKrjZgBzqD3FT2Ek53f2dcDLAQT8SSGrzj3vidNH5ISRgceeGVJ2dQIthKOuayqFXfFjXheHNo4bbt9LhRQ==",
"license": "MIT"
},
"node_modules/srvx": {
"version": "0.8.14",
"resolved": "https://registry.npmjs.org/srvx/-/srvx-0.8.14.tgz",
@@ -11256,6 +11509,15 @@
"postcss": "^8.4.32"
}
},
"node_modules/supercluster": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
"integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
"license": "ISC",
"dependencies": {
"kdbush": "^4.0.2"
}
},
"node_modules/superjson": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
@@ -11454,6 +11716,12 @@
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/tinyqueue": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
"integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
"license": "ISC"
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

1
package.json
View File

@@ -14,6 +14,7 @@
"@nuxt/eslint": "^1.7.1",
"@tailwindcss/vite": "^4.1.11",
"eslint": "^9.31.0",
"mapbox-gl": "^3.16.0",
"nuxt": "^3.17.7",
"tailwindcss": "^4.1.11",
"vue": "^3.5.17",

14
pages/index.vue
View File

@@ -1,15 +1,5 @@
<template>
<div>
<h1>Welcome to Bravioo MapBox</h1>
<mapComp />
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
</template>