Skip to content

Instantly share code, notes, and snippets.

@fukata
Last active January 15, 2023 02:20
Show Gist options
  • Save fukata/712875778d6c26788aa9939c328918b7 to your computer and use it in GitHub Desktop.
Save fukata/712875778d6c26788aa9939c328918b7 to your computer and use it in GitHub Desktop.
<template>
<div>
<div id="world_map" style="width: 100%; height: 100vh; background-color: #ccc;"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import * as am5 from '@amcharts/amcharts5';
import * as am5map from '@amcharts/amcharts5/map';
import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";
const runtimeConfig = useRuntimeConfig()
const { data: world_map_colors } = await useFetch('/posts/maps', {baseURL: runtimeConfig.public.api_endpoint});
onMounted(() => {
// Create root and chart
let root = am5.Root.new("world_map");
let chart = root.container.children.push(
am5map.MapChart.new(root, {
projection: am5map.geoMercator(),
})
);
// Create polygon series
let polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude: ["AQ"]
})
);
// for All
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{name}",
interactive: true,
fill: am5.color('#999999'),
templateField: "polygonSettings",
});
// hover event
polygonSeries.mapPolygons.template.states.create("hover", {
fill: am5.color('#ff0000'),
});
// click event
polygonSeries.mapPolygons.template.events.on("click", (ev) => {
const data = ev.target.dataItem.dataContext;
console.log(data.id);
});
// per countries color
const countryIds = Object.keys(world_map_colors._rawValue.world_map_colors);
polygonSeries.data.setAll(
countryIds.map(countryId => {
const r = world_map_colors.value.world_map_colors[countryId];
return {
id: countryId,
polygonSettings: {
fill: am5.color(r.color),
},
}
})
);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment