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

Vue.js 2 Installation | Documentation

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

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

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:

<script type="text/javascript" src="https://unpkg.com/vue2"></script>		
<script type="text/javascript" src="http://yoursite.com/mapdata.js"></script>		
<script  type="text/javascript" src="http://yoursite.com/worldmap.js"></script>

Add the following HTML to your webpage:
```
<div id="app">
	<button v-on:click="map_visible=!map_visible" v-if="!map_visible">Show Map</button>
	<map-component v-if="map_visible"></map-component>
</div>
```
This creates your Vue.js #app container <div> and creates a component called <map-component> to hold your map. The <map-component> is only visible when the data property map_visible is true which requires the Show Map button to be clicked. We've set things up this way because often you'll only want to show the map after some other event has ocurred.

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

<script>
new Vue({
	el: '#app',
	data: {map_visible: false,}
})

Vue.component('map-component', {
	template: '<div><div id="map"></div><button v-on:click="make_red()">Make Map Red</button></div>',
	mounted: function(){
		simplemaps_usmap.load();
	},
	computed: {
		simplemaps_usmap: function () {return window.simplemaps_usmap;}
	},
	methods: {
		make_red: function(){
			simplemaps_usmap.mapdata.main_settings.state_color = 'red';
			simplemaps_usmap.refresh();
		}
	}
})	
</script>

When the component is mounted, the map will load manually. 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 2 Installation | Documentation

HTML5 Map Documentation v4.2

Customization

Installation

How can I...

Troubleshooting

JavaScript API