What's New in Wijmo 2021 v1

Wijmo 2021 v1 (Build 5.20211.794) - June 3, 2021

• FlexMap (Beta) our newest visualization map control
• Cloropleth Maps
• Scatter Maps
• Bubble Map
• RestCollectionView for Binding to Any REST API

We also released a hotfix build that includes:

• Angular 12 Support
• ListBox Virtualization

Read more here

_________________________________________________________________

Wijmo 2021 v1 - March 16, 2021

Visualization Map for JavaScript, Angular, React, and Vue

We are pleased to announce FlexMap, a beautiful new map control for visualizing geographic data. Map controls can bring your data to life and make it much easier to analyze. This JavaScript UI component enables you to create stunning visualizations with your geodata easily. The map is currently in beta so if you have feedback, we want to hear it! We plan to refine it and add some map packs (regional map files) for convenience.

FlexMap supports rendering choropleths and point maps, such as scatter and bubble. The map uses GeoJSON for binding geographical feature layers and point layers. We recommend NaturalEarthData as a source for public domain GeoJSON data and MapShaper to customize as needed. Of course, there are many other sources, and you might already have your own!

Create Choropleth Maps in JavaScript, Angular, React, and Vue

With FlexMap, you can easily create choropleth maps with just a few lines of code. Choropleth maps are used to show statistical values for geographic areas. Each area is colored based on the data it represents.

• JavaScript Choropleth Map Demo
• Angular Choropleth Map Demo
• React Choropleth Map Demo
• Vue Choropleth Map Demo

Create Scatter Map in JavaScript, Angular, React, and Vue

FlexMap also supports point charts, which creates scatter maps easily. Scatter maps are used to show points of interest at specific coordinates on a map.

• JavaScript Scatter Map Demo
• Angular Scatter Map Demo
• React Scatter Map Demo
• Vue Scatter Map Demo

Create Bubble Maps in JavaScript, Angular, React, and Vue

Similarly, FlexMap can be used to create bubble maps. bubble maps also show points of interest on maps, but they ascribe values to the point. The bubble's size depends on the value of the data (larger value = larger bubble).

• JavaScript Bubble Map Demo
• Angular Bubble Map Demo
• React Bubble Map Demo
• Vue Bubble Map Demo

New Dynamic Palettes for Charts

To create beautiful choropleth maps, we added some new palettes to our existing wijmo.chart.Palettes api. The new palettes can be used in charts as well as maps!

The palettes were inspired by ColorBrewer 2 and are grouped in the following categories:

• Sequential (SequentialSingle and SequentialMulti) - Best used to show ordered data that progress from low to high–light colors for low data values to dark colors for high data values.
• Diverging - Gives equal emphasis to mid-range critical values and extremes at both ends–light colors for mid-range and dark color for extreme low and high values.
• Qualitative - Best used to show nominal or categorical data. The color is not indicative of differences in values.

These new palettes can create stunning charts. Try them for yourself in our Chart Palettes demo.

• JavaScript Chart Palettes Demo
• Angular Chart Palettes Demo
• React Chart Palettes Demo
• Vue Chart Palettes Demo

RestCollectionView for Binding to any REST API

Many of our customers have a REST API that they use for managing data. We made a convenient base class that extends and makes a bindable CollectionView–connecting to your own REST API. You can bind any number of components to the RestCollectionView and communicate them entirely to the server.

To use it, you simply create a class that extends RestCollectionView and add overrides for the following methods:

• getItems: Gets a list of items from the server. The list may be sorted, filtered, and paged.
• addItem: Adds an item to the collection on the server.
• patchItem: Edits an item in the collection on the server.
• deleteItem: Deletes an item from the collection on the server.

By default, sorting, paging, and filtering are done on the server, but you can change any of those settings to occur on the client.

From there, Wijmo does the rest! You can bind your custom RestCollectionView to any Wijmo control, and it will automatically make calls to the server for different CRUD operations needed.

• JavaScript REST CollectionView Demo
• Angular REST CollectionView Demo
• React REST CollectionView Demo
• Vue REST CollectionView Demo

Cell Templates added to MultiRow for Angular, React, and Vue

Cell Templates are one of the most popular features of FlexGrid when using Angular, React, or Vue. They allow you to use markup to define custom content in cells. Now, this feature is available in MultiRow! You can add custom cell templates for any cell in MultiRow. Cell Templates support binding syntax, nested components, custom HTML, and conditional logic. They offer a straightforward and declarative way of customizing the grid in any way imaginable.

• Angular Cell Templates in MultiRow Demo
• React Cell Templates in MultiRow Demo
• Vue Cell Templates in MultiRow Demo

Change Log

• [FlexGrid] Expand/Collapse multiple column groups with ctrl+click. This is consistent with expanding/collapsing multiple row groups with ctrl+click.
• [FlexGrid] Improved autoRowHeights property to account for the autoSizeMode property value when updating row heights.
• [FlexGrid] Improved scrolling performance with an improved cell reordering algorithm.
• [PivotField] Added a getAggregateValue property to support the creation of fields with custom aggregates based on other aggregates.
• [Calendar, InputDate] Added a rangeChanged event for convenience.
• [Globalize] FormatNumber no longer shows negative signs for negative numbers that look like zero (e.g. formatNumber(-0.4, 'n0') now returns '0' instead of '-0').
• [RESTCollectionView] Added a wijmo.rest module with a RESTCollectionView abstract class designed to help implement custom REST-based CollectionView classes.
• [FlexMap] Introduced a new charting control FlexMap specially designed for visualization geospatial data. The new control is included in the new wijmo.chart.map module.
• [FlexChart] Added color schemes from ColorBrewer (https://colorbrewer2.org).
• [MultiRow] The content of the layoutDefinition property can now be defined using a collection of the MultiRowCellGroup objects, which in turn include collections of the MultiRowCell objects. The old way to define layoutDefinition using a POJO array is supported as well.
• [MultiRow/Interops] Added support for cell templates in Angular, React, and Vue frameworks, similar to cell templates in FlexGrid. A new Grid/MultiRow/CellTemplates sample is added to demonstrate the feature.

Check out the Wijmo 2021 V1 Release