Mapa Interativo com VueJS

VueJS é um framework JavaScript popular para construir interfaces de usuário interativas e dinâmicas. Neste artigo, vamos construir um mapa interativo utilizando VueJS e algumas bibliotecas externas.

Passo 1: Instalar as bibliotecas necessárias

Primeiramente, vamos instalar as bibliotecas necessárias para criar nosso mapa interativo. Utilizaremos o Vue2Leaflet, uma biblioteca de mapeamento baseada no Leaflet, e o Vue2LeafletMarkerCluster para adicionar clusters de marcadores ao nosso mapa.

        
            npm install vue2-leaflet vue2-leaflet-markercluster
        
    

Passo 2: Criar o componente do mapa

Agora, vamos criar um componente Vue para o nosso mapa interativo. Vamos importar as bibliotecas instaladas anteriormente e configurar o mapa com alguns marcadores.

        
            <template>
                <l-map :zoom="zoom" :center="center">
                    <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
                    <l-marker v-for="(marker, index) in markers" :key="`marker-${index}`" :lat-lng="marker"></l-marker>
                </l-map>
            </template>

            <script>
                import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
                import 'leaflet/dist/leaflet.css';

                export default {
                    data() {
                        return {
                            zoom: 10,
                            center: [47.413220, -1.219482],
                            markers: [
                                [47.407400, -1.187345],
                                [47.420237, -1.643124]
                            ]
                        };
                    },
                    components: {
                        LMap,
                        LTileLayer,
                        LMarker
                    }
                };
            </script>
        
    

Passo 3: Adicionar o componente do mapa ao aplicativo Vue

Por fim, vamos adicionar o componente do mapa ao nosso aplicativo Vue principal. Basta registrá-lo no arquivo principal do aplicativo e adicionar a tag correspondente ao componente do mapa no template.

        
            import Vue from 'vue';
            import Map from './Map.vue';

            new Vue({
                el: '#app',
                components: {
                    Map
                },
                template: '<Map />'
            });
        
    

Agora você tem um mapa interativo em seu aplicativo VueJS! Você pode personalizá-lo adicionando mais marcadores, definindo diferentes camadas de mapa e explorando outras funcionalidades oferecidas pelo Vue2Leaflet e outras bibliotecas relacionadas. Divirta-se construindo seu mapa interativo com VueJS!