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:
directly inside Vue.js's root app (#app by convention) or outside of Vue's scope altogether.<div id="map"></div>
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.
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.
Home | License | Privacy | Releases | Testimonials | Resources | Documentation | Order Lookup | All Maps | FAQs
Formerly FlashUSAmap.com and FlashWorldMap.com
SimpleMaps.com is a product of Pareto Software, LLC. © 2010-2024.