菜单
Guide for creating map visualizations in dashboards. Covers geographic data detection, shape-based maps (polygons/GeoJSON), point-based maps (lat/lon coordinates), and world map backgrounds. Referenced by dashboard-builder skill. Do not use directly - use dashboard-builder instead.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/BLSQ/mcp_servers --skill dashboard-maps命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | dashboard-maps |
| description | Guide for creating map visualizations in dashboards. Covers geographic data detection, shape-based maps (polygons/GeoJSON), point-based maps (lat/lon coordinates), and world map backgrounds. Referenced by dashboard-builder skill. Do not use directly - use dashboard-builder instead. |
Create geographic visualizations with ECharts maps.
Search for columns matching these patterns:
| Type | Column Names |
|---|---|
| Latitude | lat, latitude, y, lat_coord, geo_lat |
| Longitude | lon, lng, longitude, x, lon_coord, geo_lon |
| Combined | geolocation, coordinates, geo, location, geometry |
| Shapes | polygon, shape, boundary, geojson, geometry |
| Region | region, district, country, province, admin_level |
After fetching sample data, check the actual values:
sample = data[];
hasLatLon = (
( sample. === && .(sample.) <= ) &&
( sample. === && .(sample.) <= )
);
hasShapes = (
sample. === &&
(sample..() || sample..())
);
Geographic data detected?
├── YES: Contains shapes (polygons/GeoJSON)?
│ ├── YES → Use Shape-Based Map (choropleth)
│ └── NO: Contains lat/lon points?
│ ├── YES → Use Point-Based Map with world background
│ └── NO → Cannot create map
└── NO → Cannot create map
Use when data contains polygon geometries (boundaries, regions).
// Register custom GeoJSON
echarts.registerMap('customMap', geoJsonData);
const option = {
geo: {
map: 'customMap',
roam: true, // Enable zoom/pan
itemStyle: {
areaColor: '#FDF2F8',
borderColor: '#ED4B82'
},
emphasis: {
itemStyle: {
areaColor: '#F472B6'
}
}
},
series: [{
type: 'map',
map: 'customMap',
data: [
{ name: 'Region A', value: 100 },
{ name: 'Region B', value: 200 }
]
}]
};
If shapes are in WKT format or separate columns:
function toGeoJSON(data) {
return {
type: 'FeatureCollection',
features: data.map(row => ({
type: 'Feature',
properties: {
name: row.name,
value: row.value
},
geometry: typeof row.geometry === 'string'
? JSON.parse(row.geometry)
: row.geometry
}))
};
}
Use when data contains latitude/longitude coordinates without shapes.
Load the world map GeoJSON:
// Fetch world map
const worldMap = await fetch('https://cdn.jsdelivr.net/npm/echarts-map@3.0.1/json/world.json')
.then(r => r.json());
echarts.registerMap('world', worldMap);
const option = {
geo: {
map: 'world',
roam: true,
itemStyle: {
areaColor: '#F3F4F6',
borderColor: '#E5E7EB'
},
emphasis: {
itemStyle: {
areaColor: '#FDF2F8'
}
}
},
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: data.map(row => ({
name: row.name,
value: [row.lon, row.lat, row.value], // [longitude, latitude, value]
itemStyle: {
color: '#ED4B82'
}
})),
symbolSize: function(val) {
return Math.max(6, Math.min(30, val[2] / 10)); // Size based on value
},
encode: {
value: 2
}
}],
tooltip: {
formatter: function(params) {
return `${params.name}<br/>Value: ${params.value[2]}`;
}
}
};
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
data: pointData,
symbolSize: 10,
rippleEffect: {
brushType: 'stroke',
scale: 3
},
itemStyle: {
color: '#ED4B82'
}
}]
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['High', 'Low'],
calculable: true,
inRange: {
color: ['#FDF2F8', '#F472B6', '#ED4B82', '#BE185D'] // Light to dark pink
}
}
geo: {
roam: true, // Enable both zoom and pan
// OR
roam: 'move', // Pan only
// OR
roam: 'scale', // Zoom only
scaleLimit: {
min: 0.5,
max: 10
},
center: [0, 20], // Initial center [lon, lat]
zoom: 1.5 // Initial zoom level
}
<button onclick="resetMapView()" class="bg-[#4361EE] text-white px-3 py-1 rounded">
Reset View
</button>
<script>
function resetMapView() {
chart.setOption({
geo: { center: [0, 20], zoom: 1.5 }
});
}
</script>
async function createMap(containerId, data) {
// Load world map background
const worldGeo = await fetch('https://cdn.jsdelivr.net/npm/echarts-map@3.0.1/json/world.json')
.then(r => r.json());
echarts.registerMap('world', worldGeo);
const chart = echarts.init(document.getElementById(containerId));
chart.setOption({
backgroundColor: 'transparent',
geo: {
map: 'world',
roam: true,
itemStyle: {
areaColor: '#F3F4F6',
borderColor: '#E5E7EB'
}
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: Math.max(...data.map(d => d.value)),
inRange: { color: ['#FDF2F8', '#ED4B82'] },
calculable: true
},
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: data.map(d => ({
name: d.name,
value: [d.lon, d.lat, d.value]
})),
symbolSize: val => Math.sqrt(val[2]) * 2,
itemStyle: { color: '#ED4B82' }
}]
});
return chart;
}
Guide for creating OpenHEXA data pipelines. Use when users ask to create a pipeline, build a data pipeline, automate data processing, or schedule data workflows.
Work with DHIS2 health information systems - extract data, query metadata, run validations, manage users, or check system info. Use this skill for ANY DHIS2-related request. It routes to specialized sub-skills and provides centralized client setup and API patterns.
Query aggregated analytics data from DHIS2. Use for calculated/aggregated values, indicator values, or cross-dimensional analysis. ALWAYS use with dhis2-query-optimization skill. Routed via dhis2 skill for general DHIS2 requests.