FlexMap
FlexMap
Bubble Map
The demo shows bubble map visualization.
Features
Sample
Description
This sample shows demonstration of bubble map. In which, the size of bubble corresponds to country's GDP.
Source
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> }
Documentation