Please note that I was able to consume the geojson data and create a layer on leaflet map with ease. Also, tried using lib arcgis-to-geojson-utils but not able to get it working.
Here is my code.
Your help is greatly appreciated.
view.when()
.then(fetchData)
.then(createGraphics)
.then(createLayer)
.then(addToView)
.catch(function(e) {
console.error("Creating FeatureLayer failed", e);
})
function fetchData() {
return fetch(url,options)
.then(response => {
return response.json()
});
}
function createGraphics(schoolsGeoData) {
const geoData = JSON.parse(schoolsGeoData);
return geoData.features.map((school, i) => {
let schoolAttr = {
OBJECTID: school.properties["id"],
name: school.properties["name"]
}
return new Graphic({
// type: "point",
attributes: schoolAttr,
geometry: new Point({
x: school.geometry.coordinates[0],
y: school.geometry.coordinates[1]
}),
});
})
}
function createLayer(graphics) {
return new FeatureLayer({
source: graphics,
objectIdField: "OBJECTID",
fields: schoolFeilds(),
popupTemplate: schoolTemplate(),
renderer: myRenderer(),
geometryType: "point" ,
spatialReference: {
wkid: 4326
},
});
}
function addToView(layer) {
if(layer) {
view.map.add(layer);
}
}
Your code have a reasonable logic, of course there are thing missing that I can not know it they are working. For example, I don't know what options you add to fetch operation, but by default it will get you the data correctly, and you do not have to convert to JSON because it realize that.
I was actually going to ask you for more code, or what exactly was your problem, but I decide to remind you that you actually have a specific layer to handle GeoJSON data, GeoJSONLayer.
ArcGIS API - GeoJSONLayer
ArcGIS Examples - GeoJSONLayer
But, anyway I will leave you here a running example of what you are trying to do, fetching the data and using FeatureLayer, using the data from the example I mention,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>GeoJSON with FeatureLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic"
], function(Map, MapView, FeatureLayer, Graphic) {
const map = new Map({
basemap: "gray"
});
const view = new MapView({
center: [-80, 35],
zoom: 8,
map,
container: "viewDiv"
});
view.when()
.then(fetchData)
.then(createGraphics)
.then(createLayer)
.then(addToView)
.catch(function(e) {
console.error("Creating FeatureLayer failed", e);
})
function fetchData() {
return fetch(
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
)
.then(response => {
return response.json()
});
}
function createGraphics(data) {
// const geoData = JSON.parse(data);
return data.features.map((feature, i) => {
return new Graphic({
attributes: {
OBJECTID: i,
title: feature.properties["title"],
mag: feature.properties["mag"],
type: feature.properties["type"],
place: feature.properties["place"],
time: feature.properties["time"]
},
geometry: {
type: "point",
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
},
});
})
}
function createLayer(graphics) {
const popupTemplate = {
title: "{title}",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
],
outFields: ["title", "mag", "type", "place", "time"]
}
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [
{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "10px"
},
{
value: 8,
size: "40px"
}
]
}
]
};
return new FeatureLayer({
source: graphics,
fields: [{
name: "OBJECTID",
alias: "ObjectID",
type: "oid"
}, {
name: "title",
alias: "Title",
type: "string"
}
, {
name: "mag",
alias: "Magnitude",
type: "double"
}
, {
name: "type",
alias: "Type",
type: "string"
}, {
name: "place",
alias: "Place",
type: "string"
}, {
name: "time",
alias: "Time",
type: "date"
}],
objectIdField: "OBJECTID",
popupTemplate,
renderer
});
}
function addToView(layer) {
if(layer) {
view.map.add(layer);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Related
In my vuejs project how to use google data-table chart? Google data-table chart link given below:
https://developers.google.com/chart/interactive/docs/gallery/table
I can implement this chart in normal javascript code. But how to use in vuejs code.
You can use your own component. Here I have made one simple example.
Vue.component('google-data-table', {
template: `<div id='app' ref="table_div"></div>`,
props: {
columns: {
type: Array,
required: true
},
tableData: {
type: Array,
required: true
}
},
mounted() {
google.charts.load('current', {
'packages': ['table']
});
google.charts.setOnLoadCallback(this.drawTable);
},
methods: {
drawTable: function() {
var data = new google.visualization.DataTable();
this.columns.forEach(element => {
data.addColumn(element.type, element.title);
});
data.addRows(this.tableData);
var table = new google.visualization.Table(this.$refs.table_div);
table.draw(data, {
showRowNumber: true,
width: '100%',
height: '100%'
});
}
}
});
new Vue({
el: '#app',
data: {
columns: [{
type: 'string',
title: 'Name'
},
{
type: 'number',
title: 'Salary'
},
{
type: 'boolean',
title: 'Full Time Employee'
}
],
tableData: [
['Mike', {
v: 10000,
f: '$10,000'
}, true],
['Jim', {
v: 8000,
f: '$8,000'
}, false],
['Alice', {
v: 12500,
f: '$12,500'
}, true],
['Bob', {
v: 7000,
f: '$7,000'
}, true]
]
}
});
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="app">
<google-data-table :columns='columns' :table-data='tableData' />
</div>
</body>
</html>
I would like to install in a component via CDN called vue-cc-quaggajs to read barcodes.
I've tried the following:
new Vue({
el: "#app",
data: {
readerSize: {
width: 640,
height: 480
}
},
methods: {
logIt (data) {
console.log('detected', data)
}
},
components: {
//QuaggaScanner
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#carloscgo/vue-cc-quaggajs#2.0.0/dist/vue-quagga.js"></script>
<div id="app">
<quagga-scanner :onDetected="logIt" :readerSize="readerSize" :readerType="'ean_reader'"></quagga-scanner>
</div>
But I'm getting some errors, like:
Cannot read property 'width' of undefined" found in Scanner - Root
Could you help me? I don't know if I'm referencing the right JS file or if I could use another component to scan barcodes.
I have succeeded with quagga-scanner by building the component with CDN. It works as the default package. Here is the live demo. I worked with this image and it gives me output at console.log.
Note: Use a good camera to read the barcode. Stackoverflow snippet will not work as you don't get the camera permission from the snippet.
Vue.component('quagga-scanner', {
props: {
onDetected: {
type: Function,
},
onProcessed: {
type: Function,
},
readerType: {
type: String,
default: 'code_128_reader',
},
readerSize: {
width: {
type: Number,
default: 640,
},
height: {
type: Number,
default: 480,
}
}
},
data() {
return {
quaggaState: {
inputStream: {
type: 'LiveStream',
constraints: {
width: {
min: this.readerSize.width
},
height: {
min: this.readerSize.height
},
facingMode: 'environment',
aspectRatio: {
min: 1,
max: 2
}
}
},
locator: {
patchSize: 'medium',
halfSample: true
},
numOfWorkers: 4,
frequency: 10,
decoder: {
readers: [{
format: this.readerType,
config: {}
}]
},
locate: true
},
}
},
mounted() {
this.init();
},
methods: {
init() {
Quagga.init(this.quaggaState, function(err) {
if (err) {
return console.log(err);
}
Quagga.start();
});
Quagga.onDetected(this.onDetected ? this.onDetected : this._onDetected);
Quagga.onProcessed(this.onProcessed ? this.onProcessed : this._onProcessed);
},
reInit() {
Quagga.stop();
this.init();
},
getImage() {
const canvas = Quagga.canvas.dom.image;
return canvas.toDataURL();
},
_onProcessed(result) {
let drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function(box) {
return box !== result.box;
}).forEach(function(box) {
Quagga.ImageDebug.drawPath(box, {
x: 0,
y: 1
}, drawingCtx, {
color: "green",
lineWidth: 2
});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {
x: 0,
y: 1
}, drawingCtx, {
color: "#00F",
lineWidth: 2
});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {
x: 'x',
y: 'y'
}, drawingCtx, {
color: 'red',
lineWidth: 3
});
}
}
},
_onDetected(result) {
console.log('detected: ', result);
},
},
template: `
<div id="interactive" class="viewport scanner">
<video></video>
<canvas class="drawingBuffer"></canvas>
</div>
`
})
new Vue({
el: "#app",
data: {
readerSize: {
width: 640,
height: 480
}
},
methods: {
logIt(data) {
console.log('detected', data)
},
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* In order to place the tracking correctly */
canvas.drawing,
canvas.drawingBuffer {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#carloscgo/vue-cc-quaggajs#2.0.0/dist/vue-quagga.js"></script>
<script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
<div id="app">
<quagga-scanner :on-detected="logIt" :reader-size="readerSize" :reader-type="'ean_reader'"></quagga-scanner>
</div>
</body>
</html>
I'm trying to add badges to my cytoscape.js nodes. Badges are HTML elements. I'm using bootstrap badges
Here are elements with badges. (the colors of the badges are irrelevant)
When I zoom out, the position of the badges is not set correctly. They go down and right a bit. WHY IS THAT?
Here is my code to set the positions. I but badges to to top left of the node. But I remove width of the HTML element to make it look like inside the node
let z1 = cy.zoom() / 2; // badges look too big with normal size so I downscale them
// e is cytoscape.js element, a node
const p = e.renderedPosition();
const eW = e.renderedWidth() / 2;
const eH = e.renderedHeight() / 2;
// div is an HTML element which is the badge
const w = div.clientWidth;
div.style.transform = `translate(${p.x + eW - w * z1}px, ${p.y - eH}px) scale(${z1})`;
I would personally prefer a solution using cytoscape.js resources/extensions, namely the popper.js extension.
As far as I understand your problem, you add bootstrap elements to cytoscape.js in some way (you didn't specify this, so I have to guess).
Nomrally, a sticky popper div does the trick for this problem:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
css: {
content: "data(id)",
"text-valign": "center",
"text-halign": "center",
height: "60px",
width: "160px",
shape: "round-rectangle"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "n0"
}
},
{
data: {
id: "n1"
}
},
{
data: {
id: "n2"
}
},
{
data: {
id: "n3"
}
},
{
data: {
id: "n4"
}
},
{
data: {
id: "n5"
}
},
{
data: {
id: "n6"
}
},
{
data: {
id: "n7"
}
},
{
data: {
id: "n8"
}
},
{
data: {
id: "n9"
}
},
{
data: {
id: "n10"
}
},
{
data: {
id: "n11"
}
},
{
data: {
id: "n12"
}
},
{
data: {
id: "n13"
}
},
{
data: {
id: "n14"
}
},
{
data: {
id: "n15"
}
},
{
data: {
id: "n16"
}
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
},
{
data: {
source: "n4",
target: "n5"
}
},
{
data: {
source: "n4",
target: "n6"
}
},
{
data: {
source: "n6",
target: "n7"
}
},
{
data: {
source: "n6",
target: "n8"
}
},
{
data: {
source: "n8",
target: "n9"
}
},
{
data: {
source: "n8",
target: "n10"
}
},
{
data: {
source: "n11",
target: "n12"
}
},
{
data: {
source: "n12",
target: "n13"
}
},
{
data: {
source: "n13",
target: "n14"
}
},
{
data: {
source: "n13",
target: "n15"
}
}
]
},
layout: {
name: "dagre",
padding: 5,
rankSep: 100
}
}));
var makeTippy = function(node, text) {
var ref = node.popperRef();
var dummyDomEle = document.createElement("div");
var tip = tippy(dummyDomEle, {
onCreate: function(instance) {
instance.popperInstance.reference = ref;
},
lazy: false, // mandatory
trigger: "manual", // mandatory
// dom element inside the tippy:
content: function() {
var div = document.createElement("div");
div.innerHTML = text;
return div;
},
// your own preferences:
arrow: false,
placement: 'top-end',
hideOnClick: false,
multiple: true,
sticky: true
});
return tip;
};
cy.ready(function() {
cy.zoom(0.75);
cy.center();
cy.ready(function() {
let nodes = cy.nodes();
nodes.each(function(node) {
let tippy = makeTippy(node, node.id());
tippy.show();
});
});
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.tippy-popper {
transition: none !important;
}
<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre#2.1.0/cytoscape-dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper#1.0.6/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#5.1.3/dist/tippy-bundle.iife.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#5.1.3/dist/tippy.css" />
</head>
<body>
<div id="cy"></div>
</body>
</html>
This snippet cuts some of the container off, so try this in your application for better results and take a look at the extensions used here
The problem stems from CSS scale. When I scale the element, the center point of the element remains invariant. The below sample shows What I mean
div {
position: absolute;
}
span {
font-size: 64px;
}
.s1 {
transform: scale(1);
background: red;
}
.s2 {
transform: scale(0.5);
background: blue;
}
<div class="s1"><span>00</span></div>
<div class="s2"><span>00</span></div>
So I have to consider the center point of the div. Below code does that
let z1 = this._g.cy.zoom() / 2;
const bb = e.renderedBoundingBox({ includeLabels: false, includeOverlays: false });
const w = div.clientWidth;
const h = div.clientHeight;
const deltaW4Scale = (1 - z1) * w / 2;
const deltaH4Scale = (1 - z1) * h / 2;
div.style.transform = `translate(${bb.x2 - deltaW4Scale - w * z1}px, ${bb.y1 - deltaH4Scale}px) scale(${z1})`;
Is it possible to automatically expand the height of the container of a graph, according to the size of the graph?
I want to display lots of graphs of different sizes on a web page, without having to specify the height of each DOM container.
Does it make sense?
Answer:
It is not the best solution to change anything regarding the container of cytoscape.
Alternative for you:
It is far better to work with the padding of the graph in order to display the graph in a dynamic/suitable way. The easiest way to do that, is to add your nodes and run your layout and then, when the layout is loaded, you can call cy.fit(cy.elements(), yourPadding).
In cytoscape, padding is handled exactly the same way as in css, so you just calculate (based on the number of nodes maybe?) the appropriate padding for your graph and fit it to the viewport.
Additionally, you can always wrap things up with a slick ease-in animation to top things off.
Code:
Snippet works when you click on edit the above snippet and run it in the snippet editor, here the function does not work due to the size limitation and I can't be bothered to adjust it without seeing the outcome in the editor.
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [
{
selector: "node",
css: {
content: "data(id)",
"text-valign": "bottom",
"text-halign": "center",
height: "60px",
width: "60px",
"border-color": "black",
"border-opacity": "1",
"background-image":
"https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ":selected",
css: {
"background-color": "black",
"line-color": "black",
"target-arrow-color": "black",
"source-arrow-color": "black"
}
}
],
elements: {
nodes: [
{ data: { id: "n0" } },
{ data: { id: "n1" } },
{ data: { id: "n2" } },
{ data: { id: "n3" } },
{ data: { id: "n4" } },
{ data: { id: "n5" } },
{ data: { id: "n6" } },
{ data: { id: "n7" } },
{ data: { id: "n8" } },
{ data: { id: "n9" } },
{ data: { id: "n10" } },
{ data: { id: "n11" } },
{ data: { id: "n12" } },
{ data: { id: "n13" } },
{ data: { id: "n14" } },
{ data: { id: "n15" } },
{ data: { id: "n16" } }
],
edges: [
{ data: { source: "n0", target: "n1" } },
{ data: { source: "n1", target: "n2" } },
{ data: { source: "n1", target: "n3" } },
{ data: { source: "n2", target: "n7" } },
{ data: { source: "n2", target: "n11" } },
{ data: { source: "n2", target: "n16" } },
{ data: { source: "n3", target: "n4" } },
{ data: { source: "n3", target: "n16" } },
{ data: { source: "n4", target: "n5" } },
{ data: { source: "n4", target: "n6" } },
{ data: { source: "n6", target: "n8" } },
{ data: { source: "n8", target: "n9" } },
{ data: { source: "n8", target: "n10" } },
{ data: { source: "n11", target: "n12" } },
{ data: { source: "n12", target: "n13" } },
{ data: { source: "n13", target: "n14" } },
{ data: { source: "n13", target: "n15" } }
]
},
layout: {
name: "dagre",
padding: 5
}
}));
cy.unbind("click");
cy.bind("click", "node", function(event) { // just for demonstration purposes here
var coll = cy.$(event.target).successors(); // get all outgoing nodes
coll = coll.add(event.target); // add their source
var removed = cy.remove(cy.elements().not(coll)); // remove all other elements
var len = cy.nodes().length;
var pad = (len < 10 ? (len < 5 ? (len < 3 ? (len < 2 ? 150 : 100 ) : 75 ) : 50 ) : 25); // custom padding function here
cy.animate({
fit: {
eles: cy.elements(),
padding: pad
}
}, {
duration: 500,
easing: 'ease-in'
});
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I'm trying to use the Drilldown in Map (vue-Highchart), but cannot get it working.
like this: https://www.highcharts.com/maps/demo/map-drilldown
Anyone have any examples of this in Vue.js? Please.
Tks.
Here is simple example of drilldown functionality(with vue-highcharts) which provides drilldown and drillup event from Vue-instance:
Vue.use(VueHighcharts, { Highcharts: Highcharts });
// helper script to load external script
let loadScript = function(url, onLoad){
var scriptTag = document.createElement('script');
scriptTag.src = url;
scriptTag.onload = onLoad;
scriptTag.onreadystatechange = onLoad;
document.body.appendChild(scriptTag);
};
// simple chart options
var options = {
chart: {},
title: {
text: 'Highcharts-Vue Map Drilldown Example'
},
subtitle: {
text: '',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'plotBox',
position: {
x: 70,
y: 280
}
}
},
series: [{
data: Highcharts.geojson(Highcharts.maps['countries/us/us-all']).map((d, i) => {
d.drilldown = true;
// set value just for example
d.value = i;
return d;
}),
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
}]
};
let vm = new Vue({
el: '#app',
data: {
isLoading: false,
options: options
},
created() {
// prepare events for chart from Vue instance
this.options.chart.events = {
drilldown: this.drilldown.bind(this),
drillup: this.drillup.bind(this)
}
},
methods: {
drilldown(e) {
let { chart } = this.$refs.highcharts;
if (!e.seriesOptions) {
mapKey = 'countries/us/' + e.point.properties['hc-key'] + '-all';
if (Highcharts.maps[mapKey]) {
this.prepareDrilldownData(mapKey, e.point);
return;
}
this.isLoading = true;
loadScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', () => {
this.isLoading = false;
this.prepareDrilldownData(mapKey, e.point);
});
}
chart.setTitle(null, { text: e.point.name });
},
drillup(e) {
let { chart } = this.$refs.highcharts;
chart.setTitle(null, { text: '' });
},
prepareDrilldownData(mapKey, point) {
let { chart } = this.$refs.highcharts;
data = Highcharts.geojson(Highcharts.maps[mapKey]).map((d, i) => {
// set value just for example
d.value = i;
return d;
});
chart.addSeriesAsDrilldown(point, {
name: point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-highcharts/dist/vue-highcharts.min.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="app">
<highmaps ref="highcharts" :options="options"></highmaps>
<div v-if="isLoading" style="text-align: center; margin-top: 15px; font-size: 20px;">Loading...</div>
</div>
There is also jsfiddle if you want.