Jsvectormap

Lightweight JavaScript library for creating interactive maps.

How to use

Import jsvectormap vendor file which imports all the necessary files from Jsvectormap and contains the default settings.

 import(/* webpackChunkName: 'jsvectormap' */ './vendors/jsvectormap')
.then(({mapDefaultOptions}) => {
 // furter code
})
.catch(console.warn);

By using code splitting and dynamic import techniques you don't need to worry about the size of the JavaScript file. Dashly will only import the necessary files when they are needed.

Example

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

 // dashly/theme/src/js/user.js
    
const worldMap = document.getElementById('worldMap');
 
if(worldMap) {
    import(/* webpackChunkName: 'jsvectormap' */ './vendors/jsvectormap')
    .then(({mapDefaultOptions}) => {
        const worldMapMarkers = [
            {
                coords: [-33.8481643, 150.7915504],
                name: 'Sydney',
                description: 'Hello this is Sydney'
            },
            {
                coords: [40.7127837, -74.0059413],
                name: 'New York',
                description: 'Welcom from Sydney'
            },
            {
                coords: [34.052235, -118.243683],
                name: 'Los Angeles',
                description: 'Hurray LA!'
            },
            {
                coords: [51.507351, -0.127758],
                name: 'London'
            },
            {
                coords: [19.0822375, 72.8109751],
                name: 'Mumbai'
            }
        ];
        
        const mapUserOptions = {
            selector: worldMap,
            markers: worldMapMarkers,
            onMarkerTooltipShow(event, tooltip, index) {
                tooltip.getElement().innerHTML = `${tooltip.text()}${
                    worldMapMarkers[index].description || ''
                }`;
            }
        }
        
     // Merge map options
        const options = {
            ...mapDefaultOptions,
            ...mapUserOptions
        };
    
        const map = new jsVectorMap(options);
    })
    .catch(console.warn);
}

	import(/* webpackChunkName: 'jsvectormap' */ './vendors/jsvectormap')
	.then(({mapDefaultOptions}) => {
	// furter code
	})
	.catch(console.warn);

	// dashly/theme/src/js/user.js

	const worldMap = document.getElementById('worldMap');

	if(worldMap) {
	import(/* webpackChunkName: 'jsvectormap' */ './vendors/jsvectormap')
	.then(({mapDefaultOptions}) => {
	const worldMapMarkers = [
	{
	coords: [-33.8481643, 150.7915504],
	name: 'Sydney',
	description: 'Hello this is Sydney'
	},
	{
	coords: [40.7127837, -74.0059413],
	name: 'New York',
	description: 'Welcom from Sydney'
	},
	{
	coords: [34.052235, -118.243683],
	name: 'Los Angeles',
	description: 'Hurray LA!'
	},
	{
	coords: [51.507351, -0.127758],
	name: 'London'
	},
	{
	coords: [19.0822375, 72.8109751],
	name: 'Mumbai'
	}
	];

	const mapUserOptions = {
	selector: worldMap,
	markers: worldMapMarkers,
	onMarkerTooltipShow(event, tooltip, index) {
	tooltip.getElement().innerHTML = `${tooltip.text()}${
	worldMapMarkers[index].description \|\| ''
	}`;
	}
	}

	// Merge map options
	const options = {
	...mapDefaultOptions,
	...mapUserOptions
	};

	const map = new jsVectorMap(options);
	})
	.catch(console.warn);
	}