Integrating MapLibre GL with VueJS: Creating a 3D Globe in Vue App - Part 1

Vue.js is one of the most popular JavaScript frameworks for building user interfaces. It’s known for its simplicity, flexibility, and progressive nature, making it an excellent choice for both small prototypes and large-scale applications.

In this tutorial, we’ll combine Vue.js with MapLibre GL, an open-source alternative to Mapbox GL, to create a stunning 3D globe visualization using WebGL. This integration allows developers to build powerful mapping applications without vendor lock-in or licensing fees.

🌍 Why Vue.js + MapLibre?

✅ Benefits of Vue.js

Reactive Data Binding: Makes UI updates intuitive and efficient.
Component-Based Architecture: Encourages reusable UI elements.
Ecosystem Support: Includes tools like Vue Router, Pinia (state management), and Vite (build tool).
Easy Learning Curve: Especially for developers familiar with HTML, CSS, and JavaScript.

✅ Benefits of MapLibre GL

Open Source & Free: No usage limits or API keys required (though you can use providers like MapTiler).
Customizable Styles: Supports custom map styles via JSON.
WebGL-Powered: High-performance rendering, especially useful for 3D maps.
No Vendor Lock-In: Unlike proprietary libraries such as Mapbox GL JS.

🧪 Prerequisites

Make sure you have the following installed:

Node.js (v16+ recommended)
npm or yarn
A basic understanding of Vue.js and JavaScript

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

🛠️ Step-by-Step Guide: Create a Vue.js Project with MapLibre GL

1. Create a New Vue.js Project

We’ll start by creating a new Vue project using create-vue, which gives us a modern setup with TypeScript, Vue Router, and more.

npm create vue@latest

Follow the prompts:

Project name: vue-maplibre
Features: Include TypeScript, Router, Pinia, Vitest, ESLint, Prettier
End-to-End Testing: Cypress
Experimental features: None

Once done, navigate into your project folder:

cd vue-maplibre
npm install
npm run format
npm run dev

Your development server should now be running at http://localhost:5173.

2. Install MapLibre GL

Install the MapLibre GL library:

npm install maplibre-gl

Also, ensure that maplibre-gl types are available if you’re using TypeScript:

npm install --save-dev @types/maplibre-gl

3. Set Up the Map Component

Now let’s create a component to display our 3D globe.

Create a file: `src/components/MapComponent.vue`

<template>
    <div id="map"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import maplibregl from 'maplibre-gl';

export default defineComponent({
    name: 'MapApp',

    data() {
        return {
            MAP_API_KEY: 'YOUR_MAP_API_KEY'
        };
    },

    mounted() {
        const map = new maplibregl.Map({
            container: 'map',
            style: `https://api.maptiler.com/maps/streets/style.json?key=${this.MAP_API_KEY}`,
            zoom: 3
        });


        map.on('style.load', () => {
            map.setProjection({
                type: 'globe',
            });
        });

    }
});
</script>

<style>
#map {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}
</style>

</template>

import { defineComponent } from 'vue';

import maplibregl from 'maplibre-gl';

export default defineComponent({

name: 'MapApp',

data() {

return {

MAP_API_KEY: 'YOUR_MAP_API_KEY'

};

mounted() {

const map = new maplibregl.Map({

container: 'map',

style: `https://api.maptiler.com/maps/streets/style.json?key=${this.MAP_API_KEY}`,

zoom: 3

});

map.on('style.load', () => {

map.setProjection({

type: 'globe',

});

}

});

</script>

<style>

#map {

width: 100%;

height: 100vh;

position: absolute;

top: 0;

left: 0;

}

</style>

💡 Replace 'YOUR_MAPTILER_API_KEY' with your actual MapTiler API key. You can get a free one if you don’t already have one.

4. Use the Map Component in main.js

Update main.js to include your new map component:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import Map from './components/Map.vue'

const app = createApp(Map)

app.use(createPinia())

app.mount('#app')

import './assets/main.css'

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import Map from './components/Map.vue'

const app = createApp(Map)

app.use(createPinia())

app.mount('#app')

5. Run the App

Start the development server again:

npm run dev

Visit http://localhost:5173 in your browser. You should see a 3D globe rendered using MapLibre GL inside a Vue.js application!

🌐 Bonus: Enable Terrain for Real 3D Effect

To make the globe truly 3D with elevation, add terrain support:

map.addLayer({
  id: 'terrain',
  type: 'terrain',
  source: {
    type: 'raster-dem',
    url: 'https://demotiles.maplibre.org/demotiles/tiles.json',
    tileSize: 256,
    maxzoom: 14
  },
  exaggeration: 1.5
});

Add this code inside the map.on('style.load') block.

This will give your globe a realistic look with hills and valleys.

✅ Summary

You’ve successfully created a Vue.js app that renders a 3D interactive globe using MapLibre GL. This opens up endless possibilities for visualizing geographic data in creative ways.

🔁 Key Takeaways:

Vue.js provides a clean, scalable structure for integrating third-party libraries.
MapLibre GL offers powerful WebGL-based map rendering capabilities — including 3D projections.
Using setProjection({ type: 'globe' }) enables immersive 3D globe views without any external plugins.

📚 Further Reading

🧩 Want More?

Try adding these enhancements next:

Add markers or 3D buildings
Animate camera fly-to animations
Overlay GeoJSON layers
Build a sidebar control panel using Vue components

Let me know if you’d like a follow-up tutorial on any of those!

Integrating MapLibre GL with VueJS: Creating a 3D Globe in Vue App – Part 1

🌍 Why Vue.js + MapLibre?

✅ Benefits of Vue.js

✅ Benefits of MapLibre GL

🧪 Prerequisites

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

🛠️ Step-by-Step Guide: Create a Vue.js Project with MapLibre GL

1. Create a New Vue.js Project

2. Install MapLibre GL

3. Set Up the Map Component

Create a file: `src/components/MapComponent.vue`

4. Use the Map Component in main.js

5. Run the App

🌐 Bonus: Enable Terrain for Real 3D Effect

✅ Summary

🔁 Key Takeaways:

📚 Further Reading

🧩 Want More?

1 thought on “Integrating MapLibre GL with VueJS: Creating a 3D Globe in Vue App – Part 1”

Leave a ReplyCancel reply

🌍 Why Vue.js + MapLibre?

✅ Benefits of Vue.js

✅ Benefits of MapLibre GL

🧪 Prerequisites

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

🛠️ Step-by-Step Guide: Create a Vue.js Project with MapLibre GL

1. Create a New Vue.js Project

2. Install MapLibre GL

3. Set Up the Map Component

Create a file: src/components/MapComponent.vue

4. Use the Map Component in main.js

5. Run the App

🌐 Bonus: Enable Terrain for Real 3D Effect

✅ Summary

🔁 Key Takeaways:

📚 Further Reading

🧩 Want More?

Related Posts

1 thought on “Integrating MapLibre GL with VueJS: Creating a 3D Globe in Vue App – Part 1”

Leave a ReplyCancel reply

Discover more from Spatial Dev Guru

Discover more from Spatial Dev Guru

Create a file: `src/components/MapComponent.vue`