The visualization ability of Map Suite WebAPI Edition can be customized to show information exactly the way you want! It’s possible to filter regions by attribute, display graphs of important data, create a custom style with your own icons, show frequency of events, map intensity, and more. This sample shows just a few of the popular ways to visualize data in Map Suite WebAPI Edition.

Filter Style – Only shows features that meet a certain criteria. In this example, we use population of US states. When the population meets the criteria, the state is displayed in the style. The Settings dialog can be accessed by clicking the gear icon on the menu in the upper-left corner. In this dialog, it is possible to change the Condition and the Value that sets the criteria. The sample begins by highlighting states with a population GreaterThanOrEqualTo 3,000,000. Change the layer style by clicking the layer icon on the menu.

Cluster Style – Instead of displaying every point, Cluster Style merges multiple data points into a cluster. In this example, the number of earthquakes is shown. For regions with many earthquakes, one larger cluster is displayed.

Custom Style – Map Suite WebAPI Edition is extremely versatile. We open up the API to allow you to create a custom style that meets your specific needs. This Custom Style example that displays weather was built to show you that anything is possible.

ZedGraph – ZedGraph can show Pie, Bar, and Line Charts on your map. In our example, we display pie charts that represent the demographics of major U.S. cities.

Class Break Style – Similar to Filter Style, but instead of either showing or not showing a feature, Class Break Style displays features differently depending on what range the value falls into. Here we show U.S. states colorized based upon population, with blue representing a sparsely populated state, red a densely populated one, and other colors representing states in between.

Dot Density Style – A visual representation of density by dots. The dots are randomly spread out across the feature. The dots in our example represent the density of that state, not where the population is located in that state.

Isoline Style – Delineates regions of similar values. We show regions that have experienced a similar magnitude of earthquake in the same color and separate those regions with isolines. This is similar to what is seen on elevation maps.

Icon Style – Displays icons on the map, such as vehicles.

Heatmap – Creates a radius around the point, with a color corresponding to the value. In our example, we show earthquakes with a colored radius corresponding to the magnitude.

The div “styles-panel” holds the list of styles that can be displayed on the map when the user clicks the layers button on the menu. Div “edit-panel” shows styles settings that are displayed for the layers that have dynamic parameters. In our example, only Filter Style has dynamic parameters. The client-side page imports jQuery and Leaflet libraries, but could also use OpenLayers. We use jQuery to handle the click event that tells Leaflet the URL of the WebAPI Visualization Controller used to redraw the style.

The WebAPI Visualization Controller uses a RoutePrefix of “tile.” Since the styles other than Filter Style are static, they are cached on the server before the user ever arrives on the webpage. Filter Style is dynamically generated based upon the style settings. The function GetTile calls GetFilterStyleOverlay to create the Filter Style Overlay but pulls from the cache for the other styles. Because this is a REST-based WebAPI controller, we do not use the session state to save the style. We save it to a local JSON file, but you could use a database or another mechanism for saving user data settings.

In OverlayBuilder, the style is added to the FeatureLayer. Attributes for the styles are completely customizable. For example, the size and color of the clusters in Cluster Style, the ranges of the Class Break Style, the colors of the isolines in Isoline Style, and the icons and features of the Custom Style can all be modified.