How to Style Wijmo GeoMapLayer

Mescius’ Wijmo FlexMap provides powerful mapping capabilities for web applications, allowing developers to create interactive and visually appealing maps. One of the key components of Wijmo FlexMap is GeoMapLayer, which is designed for rendering geographical shapes such as countries, states, or regions on the map. Styling GeoMapLayer involves configuring various properties to achieve the desired visual representation.

Data Binding

Ensure that your GeoMapLayer is bound to the appropriate data source containing geographical information using itemsSource. This data may include shapefiles or GeoJSON files:

geoMapLayer.itemsSource = yourDataSource;

Or it may look like this:

<GeoMapLayer itemsSource={yourDataSource} />

Styling

Be sure to import Wijmo Styling:

import "@mescius/wijmo.styles/wijmo.css";

Define the appearance of the geographical shapes by configuring properties like fill, stroke, and strokeThickness using the style property:

geoMapLayer.style = {
  fill: 'lightblue',
  stroke: 'darkblue',
  strokeThickness: 2
};

Or it may look like this:

<GeoMapLayer itemsSource={yourDataSource} style={{ fill: 'lightblue', stroke: 'darkblue', strokeThickness: 2 }}>

Hope this helps with styling your map! Be sure to check out our map demos, they are useful to reference when building your own.

Happy coding!