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:
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:
<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.
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.