FlexMap
FlexMap
バブルマップ
このデモは、バブルマップの視覚化を示しています。
機能
サンプル
説明
このサンプルは、バブルマップの使用方法を示しています。バブルの大きさは国のGDPに対応しています。
ソース
BubbleMapController.cs
using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexMapController : Controller { public ActionResult BubbleMap() { return View(); } } }
BubbleMap.cshtml
@using System.Drawing @{ var europeStyle = new SVGStyle { Fill = "rgba(133,193,233,1)", Stroke="white" }; var bubbleStyle = new SVGStyle { Fill = "rgba(86,101,115,1)", Stroke="#AED6F1" }; } @section Scripts{ <script> function geoMapItemsSourceChanged(layer, a) { var map = wijmo.Control.getControl("#flexMap"); const bb = new wijmo.Rect(-29, 36, 90, 35); map.zoomTo(bb); let features = layer.getAllFeatures(); let pts = []; let gdpData = getGdpData(); let dataMap = new Map(); gdpData.forEach(function (el) { dataMap.set(el.Country, el); }); features.forEach(function(f) { let rect = map.layers[0].getGeoBBox(f); let name = f.properties.name; let pt = new wijmo.Point(rect.left + 0.5 * rect.width, rect.top + 0.5 * rect.height); if (name == 'Norway') { pt = new wijmo.Point(10.752222, 59.913889); } else if (name == 'Russia') { pt = new wijmo.Point(37.617222, 55.755833); } let el = dataMap.get(name); if (el) { pts.push({ x: pt.x, y: pt.y, name: name, gdp: parseFloat(el[2020]), rank: parseInt(el['Rank']) }); } }); map.layers[1].itemsSource = pts; } function tooltipPopup(tt, e) { if (!wijmo.isFunction(tt.content)) { tt.content = function (ht) { return ht.gdp ? '<b>{name}</b> \${gdp}<br>rank {rank}' : '<b>{name}</b>'; } e.cancel = true; } } function getGdpData() { return [ { "Rank": 1, "Country": "Luxembourg", "2020": "112875" }, { "Rank": 2, "Country": "Ireland", "2020": "89383" }, { "Rank": 3, "Country": "Switzerland", "2020": "68340" }, { "Rank": 4, "Country": "Norway", "2020": "64856" }, { "Rank": 5, "Country": "Denmark", "2020": "57781" }, { "Rank": 6, "Country": "Netherlands", "2020": "57101" }, { "Rank": 7, "Country": "Austria", "2020": "55406" }, { "Rank": 8, "Country": "Iceland", "2020": "54482" }, { "Rank": 9, "Country": "Germany", "2020": "53571" }, { "Rank": 10, "Country": "Sweden", "2020": "52477" }, { "Rank": 11, "Country": "Belgium", "2020": "50114" }, { "Rank": 12, "Country": "Finland", "2020": "49334" }, { "Rank": 13, "Country": "France", "2020": "45454" }, { "Rank": 14, "Country": "United Kingdom", "2020": "44288" }, { "Rank": 15, "Country": "Malta", "2020": "43087" }, { "Rank": 16, "Country": "Czech Republic", "2020": "40293" }, { "Rank": 17, "Country": "Italy", "2020": "40066" }, { "Rank": 18, "Country": "Cyprus", "2020": "39079" }, { "Rank": 19, "Country": "Lithuania", "2020": "38605" }, { "Rank": 20, "Country": "Slovenia", "2020": "38506" }, { "Rank": 21, "Country": "Spain", "2020": "38143" }, { "Rank": 22, "Country": "Estonia", "2020": "37033" }, { "Rank": 23, "Country": "Poland", "2020": "33739" }, { "Rank": 24, "Country": "Portugal", "2020": "33131" }, { "Rank": 25, "Country": "Hungary", "2020": "32434" }, { "Rank": 26, "Country": "Slovakia", "2020": "32184" }, { "Rank": 27, "Country": "Latvia", "2020": "30579" }, { "Rank": 28, "Country": "Romania", "2020": "30141" }, { "Rank": 29, "Country": "Greece", "2020": "29045" }, { "Rank": 30, "Country": "Croatia", "2020": "27681" }, { "Rank": 31, "Country": "Russia", "2020": "27394" }, { "Rank": 32, "Country": "Bulgaria", "2020": "23741" }, { "Rank": 33, "Country": "Montenegro", "2020": "19931" }, { "Rank": 34, "Country": "Belarus", "2020": "19759" }, { "Rank": 35, "Country": "Serbia", "2020": "18840" }, { "Rank": 36, "Country": "North Macedonia", "2020": "16609" }, { "Rank": 37, "Country": "Bosnia and Herzegovina", "2020": "14895" }, { "Rank": 38, "Country": "Albania", "2020": "13651" }, { "Rank": 39, "Country": "Moldova", "2020": "13253" }, { "Rank": 40, "Country": "Ukraine", "2020": "12710" } ]; } </script> } <c1-flex-map id="flexMap" header="Europe - GDP per capita" height="600px"> <c1-geo-map-layer url="@Url.Content("~/Content/data/europe.json")" items-source-changed="geoMapItemsSourceChanged" style="@europeStyle"></c1-geo-map-layer> <c1-scatter-map-layer binding="x,y,gdp" symbol-min-size="5" symbol-max-size="20" style="@bubbleStyle"> </c1-scatter-map-layer> <c1-flex-chart-tooltip content="<b>{name}</b>" popup="tooltipPopup"></c1-flex-chart-tooltip> </c1-flex-map> @section Summary{ @Html.Raw(FlexMapRes.BubbleMap_Text0) } @section Description{ <p>@Html.Raw(FlexMapRes.BubbleMap_Text1)</p> }
マニュアル