Related
I'm using Vuetify's v-data-tables with expandable rows. The expandable rows work fine when there's only one v-data-table on the page. When I have multiple v-data-tables, the expandable rows no longer function. I'm assuming I'm missing something that would make each data table or slot unique?
CodePen: https://codepen.io/tapal/pen/poyOdBw (this is essentially the expandable rows CodePen from Vuetify's documentation but split into two tables).
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
expanded: [],
singleExpand: false,
headers: [{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{
text: 'Calories',
value: 'calories'
},
{
text: 'Fat (g)',
value: 'fat'
},
{
text: 'Carbs (g)',
value: 'carbs'
},
{
text: 'Protein (g)',
value: 'protein'
},
{
text: 'Iron (%)',
value: 'iron'
},
{
text: '',
value: 'data-table-expand'
},
],
firstDessert: [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
],
secondDessert: [{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.3.10/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.3.10/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="firstDessert" :single-expand="singleExpand" :expanded.sync="expanded" item-key="name" show-expand class="elevation-1">
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>First Dessert</v-toolbar-title>
<v-spacer></v-spacer>
<v-switch v-model="singleExpand" label="Single expand" class="mt-2"></v-switch>
</v-toolbar>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">More info about {{ item.name }}</td>
</template>
</v-data-table>
<hr />
<v-data-table :headers="headers" :items="secondDessert" :single-expand="singleExpand" :expanded.sync="expanded" item-key="name" show-expand class="elevation-1">
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Second Dessert</v-toolbar-title>
<v-spacer></v-spacer>
<v-switch v-model="singleExpand" label="Single expand" class="mt-2"></v-switch>
</v-toolbar>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">More info about {{ item.name }}</td>
</template>
</v-data-table>
</v-app>
</div>
Looking at the examples on this page, what is the way to apply toUpper to all header items? It looks too clumsy having to do it one-by-one (i.e. header.calories, header.fat...) and I can't figure out how a v-for can wrap around the template/v-slot element. Is the only way to use a 'div' and flex it horizontally?
<template>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:header.name="{ header }">
{{ header.text.toUpperCase() }}
</template>
</v-data-table>
</template>
<script>
export default {
data: () => ({
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
....// rest of it
],
}),
}
</script>
It is possible to loop the headers to make all capitalize
here is the working codepen: https://codepen.io/chansv/pen/gOaRWQb?editors=1010
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
hide-default-header
>
<template v-slot:header="{ props }">
<th v-for="head in props.headers">{{ head.text.toUpperCase() }}
</template>
</v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}),
})
The easiest thing would just be to use custom CSS on your component. In the <style> section add:
<style>
.v-data-table-header th {
text-transform: uppercase;
}
</style>
However, if you need to do more extensive customization on the headers, you can replace the entire header row like this:
<v-data-table
:headers="headers"
hide-default-header
>
<template #header="{ props: { headers } }">
<thead class="v-data-table-header">
<tr>
<th
v-for="header in headers"
:key="header.value"
class="text-uppercase"
scope="col"
>
{{ header.text }}
</th>
</tr>
</thead>
</template>
</v-data-table>
BUT, I would discourage this because you'll lose the built-in sorting functionality that Vuetify provides. That said, you CAN use this to add an additional header row that will appear before the default one. Just leave off the hide-default-header attribute on the v-data-table component and you will get two header rows, one with all of Vuetify's default functionality plus another custom one of your own design.
your code is correct but in this form you need to add each header alone like this:
<template>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:header.name="{ header }">
{{ header.text.toUpperCase() }}
</template>
<template v-slot:header.calories="{ header }">
{{ header.text.toUpperCase() }}
</template>
...
</v-data-table>
</template>
<script>
export default {
data: () => ({
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
....// rest of it
],
}),
}
</script>
this way you need to do this to every header alone the way of doing it is by adding v-slot:header.<value from headers array in the data>
example:
headers = [
{
text: "text1",
...
value: "category"
}
]
code will be:
<template v-slot:header.category="{ header }">
{{ header.text.toUpperCase() }}
</template>
First answer is correct, But I want to suggest a little improvement so you don't have to style it manually.
<template v-slot:header="{ props }">
<thead class="v-data-table-header">
<tr>
<th v-for="header in props.headers" :key="header.text">{{ header.text }} </th>
</tr>
</thead>
</template>
I want to programatically control the selected items in a v-data-table.
I am trying to do this by pushing items onto and splicing items out of the selected variable that I passed to v-data-table's v-model.
This example works far better in a codepen:
https://codepen.io/masonk-the-decoder/pen/OJPdmaq?editable=true&editors=101
<div id="app">
<v-app id="inspire">
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:top>
<v-switch v-model="singleSelect" label="Single select" class="pa-3"></v-switch>
</template>
</v-data-table>
<v-btn #click="clearSelection">Clear Selection</v-btn>
<v-btn #click="random">Select Random</v-btn>
</v-app>
</div>
const selected = [];
const desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
];
new Vue({
el: '#app',
vuetify: new Vuetify(),
watch: {
selected: (val) => console.log("selected watch: ", val),
},
data () {
return {
singleSelect: false,
selected,
desserts,
random() {
const idx = Math.floor(Math.random() * desserts.length);
selected.push(desserts[idx]);
console.log("Pushed: ", idx, desserts[idx]);
},
clearSelection() {
selected.splice(0, selected.length);
},
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
}
},
})
What I've found is that when I press "select random" the first time, causing select.push to be called, it succeeds at changing the selection. But push the button again and nothing happens.
clearSelection never works.
Clicking to select always works.
Edit: Moving the handlers to methods makes it work. But, I don't understand why having the handlers in data broke anything. Closures are just bits of data themselves, so what's happening here?
(Codepen: https://codepen.io/masonk-the-decoder/pen/MWYLoyp)
const selected = [];
const desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
];
new Vue({
el: '#app',
vuetify: new Vuetify(),
watch: {
selected: (val) => console.log(val),
},
methods: {
random() {
const idx = Math.floor(Math.random() * desserts.length);
this.selected.push(desserts[idx]);
console.log("Pushed ", idx, desserts[idx]);
},
clearSelection() {
console.log(this.selected.length);
this.selected.splice(0, this.selected.length);
},
},
data () {
return {
singleSelect: false,
selected,
desserts,
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
}
},
})
You can't refer to other data properties inside the data property. Also, why have you initialized both the selected array and the desserts array outside of the Vue instance? selected/deserts should be initialized inside the data property.
I have created a bar horizontal chart in chartjs and want to add a vertical scrollbar when more than 5 data, then add scroll in chart automatically. it is showing scroll but i want scroll within the chart, and only need to show 5 records, rest records in scroll.
I have tried so far...
$(document).ready(function(){
let data1 = [{
label: 'Notebook',
backgroundColor: '#0360b8',
data: [399,309,278,239,235, 203,182, 157, 149, 144, 143, 137, 134, 138, 118, 107, 127, 137]
}, {
label: 'Pen',
backgroundColor: '#579ee2',
data: [112, 211, 232, 232, 203,182, 157, 149, 144, 143, 231, 286, 234, 345, 321, 306, 399, 403]
}, {
label: 'Papers',
backgroundColor: '#97c5f5',
data: [399,309,278,239,235, 203,182, 157, 149, 144, 143, 137, 134, 138, 118, 107, 127, 137]
}];
let myChart = new Chart(document.getElementById('divchart'), {
type: 'horizontalBar',
data: {
labels: ["Division 1", "Division 2", "Division 3", "Division 4", "Division 5", "Division 6", "Division 7", "Division 8", "Division 9", "Division 10", "Division 11", "Division 12", "Division 13", "Division 14", "Division 15", "Division 16", "Division 17", "Division 18"],
datasets: data1
},
options: {
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false,
}
}],
},
legend: {
display: true,
position: 'bottom',
},
maintainAspectRatio: false,
}
});
});
.chartheight{height:250px; overflow-y:auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="chartheight">
<canvas class="" id="divchart"></canvas>
</div><!-- end xol-xs-12 div -->
So I have a map that display and currently has all state data available except Puerto Rico. Even though when I dynamically load the data and Puerto Rico isn't apart of the data set it still is allowing me to hover over with balloontext. I want to disable Puerto Rico all together. Here is my map script:
function initializeFoodSafetyMap() {
var mapData = $('#foodSafetyMap').data('url');
var newmapdata = [];
var mapHeader = ['map-hdr-us'];
$.ajax({
url: mapData,
cache: false,
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (index, item) {
if (item.CategoryAmount > 0) {
newmapdata.push({
id: "US-" + item.GeoCode,
title: item.Category,
value: item.CategoryAmount,
balloonText: "<b>" + item.GeoName +
"</b>" + "<br>$" + item.CategoryAmount.toLocaleString(),
info: 'TEST',
color: "#91B2AB"
});
}
});
var map = AmCharts.makeChart("foodSafetyMap", {
type: "map",
"theme": "light",
dragMap: true,
fixedSize: false,
colorSteps: 10,
"responsive": {
"enabled": true,
// Rules
"rules": [
// at 500px wide, we hide baloons
{
"maxWidth": 500,
"overrides": {
"balloon": {
"enabled": false
},
"imagesSettings": {
"labelPosition": "middle",
"labelFontSize": 8
}
}
}
]
},
// End of Rules
"areasSettings": {
"autozoom": true,
outlineColor: "#000000"
},
dataProvider: {
map: "usaLow",
areas: newmapdata,
getAreasFromMap: true,
images: [
{
label: "AL",
latitude: -40,
longitude: 81,
linkToObject: "US-AL"
}, {
label: "AK",
latitude: -84,
longitude: -130,
linkToObject: "US-AK"
}, {
label: "AZ",
latitude: -4,
longitude: -85,
linkToObject: "US-AZ"
}, {
label: "AR",
latitude: -11,
longitude: 41,
linkToObject: "US-AR"
}, {
label: "CA",
latitude: 70,
longitude: -135,
linkToObject: "US-CA"
}, {
label: "CO",
latitude: 60,
longitude: -42,
linkToObject: "US-CO"
}, {
"label": "CT",
"latitude": 71,
"longitude": 180,
"linkToObject": "US-CT",
//labelBackgroundColor: "#cccccc",
labelBackgroundAlpha: .8
}, {
label: "DE",
//labelBackgroundColor: "#cccccc",
latitude: 38,
longitude: 180,
linkToObject: "US-DE",
labelBackgroundAlpha: .8
}, {
//labelBackgroundColor: "#cccccc",
label: "DC",
latitude: -20,
longitude: 180,
linkToObject: "US-DC",
labelBackgroundAlpha: .8
}, {
label: "FL",
latitude: -78,
longitude: 120,
linkToObject: "US-FL"
}, {
label: "GA",
latitude: -40,
longitude: 102,
linkToObject: "US-GA"
}, {
label: "HI",
latitude: -88.7,
longitude: -35.7,
linkToObject: "US-HI"
},
{
label: "PR",
latitude: -88.9,
longitude: 22.9,
linkToObject: "US-PR"
},
{
label: "ID",
latitude: 85,
longitude: -85,
linkToObject: "US-ID"
}, {
label: "IL",
latitude: 65,
longitude: 60,
linkToObject: "US-IL"
}, {
label: "IN",
latitude: 67,
longitude: 78,
linkToObject: "US-IN"
}, {
label: "IA",
latitude: 77,
longitude: 35,
linkToObject: "US-IA"
}, {
label: "KS",
latitude: 48,
longitude: 5,
linkToObject: "US-KS"
}, {
label: "KY",
latitude: 42,
longitude: 87,
linkToObject: "US-KY"
}, {
label: "LA",
latitude: -65,
longitude: 43,
linkToObject: "US-LA"
}, {
label: "ME",
latitude: 88.3,
longitude: 168,
linkToObject: "US-ME"
}, {
label: "MD",
//labelBackgroundColor: "#cccccc",
latitude: 10,
longitude: 180,
linkToObject: "US-MD",
labelBackgroundAlpha: .8
}, {
label: "MA",
latitude: 83.5,
longitude: 180,
linkToObject: "US-MA",
labelBackgroundAlpha: .8,
//labelBackgroundColor: "#cccccc",
}, {
label: "MI",
latitude: 82.7,
longitude: 85,
linkToObject: "US-MI"
}, {
label: "MO",
latitude: 48,
longitude: 40,
linkToObject: "US-MO"
}, {
label: "MN",
latitude: 87,
longitude: 28,
linkToObject: "US-MN"
}, {
label: "MS",
latitude: -40,
longitude: 61,
linkToObject: "US-MS"
}, {
label: "MT",
latitude: 88.2,
longitude: -55,
linkToObject: "US-MT"
}, {
label: "NE",
latitude: 75,
longitude: 0,
linkToObject: "US-NE"
}, {
label: "NV",
latitude: 75,
longitude: -107,
linkToObject: "US-NV"
}, {
label: "NH",
//labelBackgroundColor: "#cccccc",
latitude: 86.2,
longitude: 180,
linkToObject: "US-NH",
labelBackgroundAlpha: .8
}, {
label: "NJ",
//labelBackgroundColor: "#cccccc",
latitude: 58,
longitude: 180,
linkToObject: "US-NJ",
labelBackgroundAlpha: .8
}, {
label: "NM",
latitude: -10,
longitude: -46,
linkToObject: "US-NM"
}, {
label: "NY",
latitude: 85,
longitude: 140,
linkToObject: "US-NY"
}, {
label: "NC",
latitude: 23,
longitude: 128,
linkToObject: "US-NC"
}, {
label: "ND",
latitude: 88,
longitude: -5,
linkToObject: "US-ND"
}, {
label: "OH",
latitude: 70,
longitude: 98,
linkToObject: "US-OH"
}, {
label: "OK",
latitude: -6,
longitude: 11,
linkToObject: "US-OK"
}, {
label: "OR",
latitude: 87,
longitude: -122,
linkToObject: "US-OR"
}, {
label: "PA",
latitude: 78,
longitude: 128,
linkToObject: "US-PA"
}, {
label: "RI",
//labelBackgroundColor: "#cccccc",
latitude: 79,
longitude: 180,
linkToObject: "US-RI",
labelBackgroundAlpha: .8
}, {
label: "SC",
latitude: -12,
longitude: 117,
linkToObject: "US-SC"
}, {
label: "SD",
latitude: 84.5,
longitude: -5,
linkToObject: "US-SD"
}, {
label: "TN",
latitude: 12,
longitude: 83,
linkToObject: "US-TN"
}, {
label: "TX",
latitude: -65,
longitude: 0,
linkToObject: "US-TX"
}, {
label: "UT",
latitude: 66,
longitude: -77,
linkToObject: "US-UT"
}, {
label: "VT",
latitude: 87,
longitude: 150.5,
linkToObject: "US-VT"
}, {
label: "VA",
latitude: 55,
longitude: 128,
linkToObject: "US-VA"
}, {
label: "WA",
latitude: 89,
longitude: -112,
linkToObject: "US-WA"
}, {
label: "WV",
latitude: 60,
longitude: 112,
linkToObject: "US-WV"
}, {
label: "WI",
latitude: 85,
longitude: 53,
linkToObject: "US-WI"
}, {
label: "WY",
latitude: 82.5,
longitude: -47,
linkToObject: "US-WY"
}
],
lines: [
{
//DC LINE
latitudes: [66.8921, -20],
longitudes: [135.6241, 173]
}, {
//CT LINE
latitudes: [82.8921, 71],
longitudes: [153.8241, 173]
}, {
//DE LINE
latitudes: [69.0921, 38],
longitudes: [145.2241, 173]
}, {
//MD LINE
latitudes: [69.8921, 10],
longitudes: [136.8241, 172.5]
}, {
//MA LINE
latitudes: [84.0921, 83],
longitudes: [153.8241, 173]
}, {
//NH LINE
latitudes: [86.0921, 86.2],
longitudes: [156.8241, 173]
}, {
//NJ LINE
latitudes: [76.0921, 58],
longitudes: [147.8241, 173]
}, {
//RI LINE
latitudes: [83.0921, 78],
longitudes: [162.8241, 173.5]
}
]
},
zoomControl: {
zoomControlEnabled: true,
panControlEnabled: false
},
"imagesSettings": {
"labelPosition": "middle",
"labelFontSize": 11
},
"listeners": [{
"event": "clickMapObject",
"method": function (event) {
document.getElementById("info").innerHTML = '<hr><p><b>' + event.mapObject.title + '</b></p><p>' + event.mapObject.info + '</p>';
}
}]
});
}
});
}
I figured it out, I had to remove
getAreasFromMap: true,