Wijmo has just shipped its first major release of 2021. This release includes a new RestCollectionView, Cell Templates for MultiRow, and Beta for FlexMap–our visualization map control. Let's take a closer look at the release!
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.
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).
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
Watch the Webinar
Missed the live webinar? No worries! Watch on-demand as Wijmo Global Product Manager, Chris Bannon, and Technical Engagement Engineer, Joel Parks, discuss some of the exciting new features available in Wijmo 2020 v1.
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.
Chris Bannon