Add Map to Vue.js 3 - HTML5/JavaScript Interactive Map Documentation

Vue.js 3 Installation | Documentation

These instructions are for Vue 3, we have different instructions for Vue 2.

Vue.js is an amazing lightweight JavaScript framework that is easy to use with our maps. In fact, you can just use the typical installation process (either self-hosted or using our file hosting) as long as you embed:

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

directly inside Vue.js's root app (#app by convention) or outside of Vue's scope altogether.

This tutorial is for users who want to use our maps within a Vue.js component or those who want to dynamiclly update the map using Vue.js.

Download Demo View Demo in Browser

To use the map in a Vue.js component, follow these steps:

Choose the map you want to install:

Embed Vue.js and your map files into the <head> of your webpage and disable auto loading:

<script type="text/javascript" src=""https://cdn.jsdelivr.net/npm/vue@3"></script>		
<script type="text/javascript" src="http://yoursite.com/mapdata.js"></script>		
<script>simplemaps_worldmap_mapdata.main_settings.auto_load = 'no';</script>
<script  type="text/javascript" src="http://yoursite.com/worldmap.js"></script>

Add the following HTML to your webpage:
```
<div id="components-demo">
  <map-component></map-component>
</div>
```
This creates your Vue.js #components-demo container <div> and creates a component called <map-component> to hold your map.

Add the following JavaScript to initiate Vue.js and create your map component:

<script>
const app = Vue.createApp({el: '#app', })    
		
app.component('map-component', {
  data() {
    return {
      map_red: false
    }
  }, 
  
  template: '<div id="map"></div><div><button v-on:click="make_red" v-if="!map_red">Make Red</button></div>',
  
  mounted: function(){
    simplemaps_usmap.load();
  },
  computed: {
    simplemaps_usmap: function () {return window.simplemaps_usmap;}
  },
  methods: {
    make_red: function(){
      this.map_red = true;
      simplemaps_usmap.mapdata.main_settings.state_color = 'red';
      simplemaps_usmap.refresh();
    }        
  }
})

app.mount("#components-demo");

</script>

Our map will load when the component has been mounted. By default, Vue doesn't recognize global variables, so we assign window.simplemaps_usmap to the variable name simplemaps_usmap using computed. We've also used the component's template to create a button that calls a method to turn the map red. This demonstrates how you can dynamically update the map.

That's all! You now have a map component that you can integrate into your Vue.js project. If you still have any questions, contact us for help.

Vue.js 3 Installation | Documentation

HTML5 Map Documentation v4.1

Customization

Installation

How can I...

Troubleshooting

JavaScript API