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 System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexMapController : Controller { public ActionResult BubbleMap() { return View(); } } }
BubbleMap.cshtml
@using System.Drawing @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> } @(Html.C1().FlexMap().Id("flexMap") .Header("Europe - GDP per capita") .Height(600) .Tooltip(tt => tt.Content("<b>{name}</b>").OnClientPopup("tooltipPopup")) .Layers(ls => { ls.AddGeoMapLayer() .Url(Url.Content("~/Content/data/europe.json")) .Style(s => s.Fill("rgba(133,193,233,1)").Stroke("white")) .OnClientItemsSourceChanged("geoMapItemsSourceChanged"); ls.AddScatterMapLayer() .Style(s => s.Fill("rgba(86,101,115,1)").Stroke("#AED6F1")) .Binding("x,y,gdp") .SymbolMinSize(5) .SymbolMaxSize(20); }) ) @section Summary{ @Html.Raw(Resources.FlexMap.BubbleMap_Text0) } @section Description{ <p>@Html.Raw(Resources.FlexMap.BubbleMap_Text1)</p> }
Documentation