FlexMap
FlexMap
Overview
This view shows how to use FlexMap control for visualization geographical data.
Features
Description
This sample uses FlexMap control to show the Airport Map.
The sample does the following:
- Using a GeoMapLayer to display map of lands.
- Using another GeoMapLayer to display Europe land with colors.
- Using ScatterMapLayer to display airports as dots, in which the size of dots reflects the flow of airports.
- And also use a GeoGridLayer to display the grid of coordinates on the map.
- The ColorScale feature enables to customize colors for map layers.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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 Index() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | @using System.Drawing@{ string[] palette = new string[] { "#9c88d9", "#a3d767", "#8ec3c0", "#e9c3a9", "#91ab36", "#d4ccc0", "#61bbd8", "#e2d76f", "#80715a" };}@section Scripts{ <script> function scatterMapItemsSourceChanged(layer, a) { const bb = new wijmo.Rect(-200, -10, 500, 80); var map = wijmo.Control.getControl("#flexMap"); map.zoomTo(bb); var features = layer.itemsSource; features.forEach(function (f) { var v = f.coordinates.split(","); f.x = v[0]; f.y = v[1]; f.flow = 100000 + Math.random() * 100000000; }); } function colorScale(v) { return 1 - v; } function colorScaleBindingLand(o) { return o.properties.color; } function colorScaleBindingEurope(o) { return o.properties.name.charCodeAt(0); } </script>}@(Html.C1().FlexMap().Id("flexMap") .Header("Airport Map") .Height(600) .Tooltip(tt => tt.Content("✈ <b>{iata_code}</b><br>{name}")) .Layers(ls => { ls.AddGeoMapLayer() .Url(Url.Content("~/Content/data/land.json")) .ColorScale(cs => cs.Scale("colorScale") .Binding("colorScaleBindingLand") .Colors(palette)); ls.AddGeoMapLayer() .Url(Url.Content("~/Content/data/europe.json")) .ColorScale(cs => cs.Scale("colorScale") .Binding("colorScaleBindingEurope") .Colors(C1.Web.Mvc.Chart.Palettes.Organic)); ls.AddGeoGridLayer(); ls.AddScatterMapLayer() .Url(Url.Content("~/Content/data/airports.json")) .Style(s => s.Fill("rgba(10,10,10,1)")) .Binding("x,y,flow") .SymbolMinSize(3) .SymbolMaxSize(8) .OnClientItemsSourceChanged("scatterMapItemsSourceChanged"); }))@section Summary{ @Html.Raw(Resources.FlexMap.Index_Text0)} @section Description{ <p>@Html.Raw(Resources.FlexMap.Index_Text1)</p> <p>@Html.Raw(Resources.FlexMap.Index_Text2)</p> <ol> <li>@Html.Raw(Resources.FlexMap.Index_Text3)</li> <li>@Html.Raw(Resources.FlexMap.Index_Text4)</li> <li>@Html.Raw(Resources.FlexMap.Index_Text5)</li> <li>@Html.Raw(Resources.FlexMap.Index_Text6)</li> <li>@Html.Raw(Resources.FlexMap.Index_Text7)</li> </ol>} |