Feature Creation and Dynamic Layer Styling


Level of Experience Basic
Requirements An embedded map
Time Required 15 min
Source Code https://github.com/mapworksio/feature-creation-custom-styling

Overview

Because Mapworks uses client side rendering of vectors, you can completely change the styling of your layers without ever having to request new data from the server. 

Defining the styling may seem daunting at first, but this tutorial will help you get the hang of it and we hope that you find it to be a powerful tool.

Step 1: Dynamically Drawing Features

Lets start by creating a new layer and adding some features into there. You can view the API for creating features under Studio.core.Map

map.once('ready', function() {
    map.setViewCenter(115.85541616994009, -31.954543192882383, 30000);
	var layer = new Studio.core.entity.TreeVectorLayerEntity({
      visible: true
	  }, {map: map});  
	map.getTree().add(layer);
	map.createPoint(115.856871, -31.9635701708822,layer);
	map.createPoint(115.8551432, -31.96434151915544,layer);
	map.createPoint(115.855416, -31.96634740155249,layer);
	map.createPoint(115.8575076, -31.96727312644149,layer);
	map.createPoint(115.8589626, -31.965884535607742,layer);
	map.createPoint(115.8585078, -31.964187283954324,layer);
	map.createPolyline([115.8503236, 115.8656918, 115.8729666, 115.8770588, 115.885152, 115.8897898, 115.8855158], [-31.96503582886565, -31.973136060185436, -31.96897032105072, -31.970281837530667, -31.967118896164994, -31.961332783076426, -31.959944102405597], 7 ,layer);
	map.createPolygon([115.851142, 115.8585988, 115.8773316, 115.8828786, 115.8829696, 115.8805144, 115.8686926, 115.8605084, 115.851142], [-31.940268361357855, -31.959018303625452, -31.96457295630886, -31.96233576261631, -31.954311789268584, -31.944975425471377, -31.940808408864186, -31.939187917381002, -31.940268361357855], 9,layer);
	map.createCircle(115.8395024, -31.949836677737895, 0.01, layer);
});

Step 2: Apply Styling using API

Now lets define a style that we want to apply to the layer. See Studio.core.entity.StyleEntity for a description of all the styles we can assign.

// specify styling
var style = new Studio.core.entity.StyleEntity();
// point styling
style.setPointWidth(6).setPointFill("#FF7F50").setPointLineWidth(1).setPointLineFill("#FF0000");
// line / fill styling
style.setPolygonOpacity(0.5).setLineWidth([2]).setLineFill("#0000CD").setPolygonFill("#00FA9A");

We will set this to be our default style. There are different categories of styles that can be specified:

  • default - The default style
  • active - Style that is applied if the layer is active (which means it can be interacted with) and is moused over
  • selected - Style that is applied if the feature is selected using one of the selection tools
  • navigation - Style that is applied during navigation. If there are very complicated line styles, it may improve performance to have a simpler line style during navigation

See Studio.core.entity.StylesEntity for the list of style categories.

var styles = new Studio.core.entity.StylesEntity();
styles.setDefault(style);

Finally we add it to a LayerStyles entity and apply it to the layer. The name given to the style can be any name, and this allows you to specify multiple cascading styles for complex styling (such as piped roads).

var layerStyles = new Studio.core.entity.LayerStylesEntity();
layerStyles.setStyles("myStyle", styles);
layer.setStyles(layerStyles);

Step 3: Apply Styling using JSON Configuration

Now that might seem like quite a bit of work just to set up some styles, but essentially what you're doing is building a JSON configuration object up from scratch. You can see what the object looks like by running:

JSON.stringify(layerStyles.toJSON(), null, '\t')

The alternative is to just to use the JSON object directly:

var layerStyles = new Studio.core.entity.LayerStylesEntity({
	"myStyle": {
		"default": {
			"pointWidth": 6,
			"pointFill": "#FF7F50",
			"pointLineWidth": 1,
			"pointLineFill": "#FF0000",
			"polygonOpacity": 0.5,
			"lineWidth": [2],
			"lineFill": "#0000CD",
			"polygonFill": "#00FA9A"
		}
	}
});
layer.setStyles(layerStyles);

You can use this same technique when creating most of the entities in Mapworks Studio.

Your final code should look like this:

  map.once('ready', function() {

    // Create the layer
    var layer = new Studio.core.entity.TreeVectorLayerEntity({
      visible: true
    }, {
      map: map
    });
    map.getTree().add(layer);
    map.setViewCenter(115.85541616994009, -31.954543192882383, 30000);

    // Draw some features
    map.createPoint(115.856871, -31.9635701708822, layer);
    map.createPoint(115.8551432, -31.96434151915544, layer);
    map.createPoint(115.855416, -31.96634740155249, layer);
    map.createPoint(115.8575076, -31.96727312644149, layer);
    map.createPoint(115.8589626, -31.965884535607742, layer);
    map.createPoint(115.8585078, -31.964187283954324, layer);
    map.createPolyline([115.8503236, 115.8656918, 115.8729666, 115.8770588, 115.885152, 115.8897898, 115.8855158], [-31.96503582886565, -31.973136060185436, -31.96897032105072, -31.970281837530667, -31.967118896164994, -31.961332783076426, -31.959944102405597], 7, layer);
    map.createPolygon([115.851142, 115.8585988, 115.8773316, 115.8828786, 115.8829696, 115.8805144, 115.8686926, 115.8605084, 115.851142], [-31.940268361357855, -31.959018303625452, -31.96457295630886, -31.96233576261631, -31.954311789268584, -31.944975425471377, -31.940808408864186, -31.939187917381002, -31.940268361357855], 9, layer);
    map.createCircle(115.8395024, -31.949836677737895, 0.01, layer);
 
	// create the style
    var layerStyles = new Studio.core.entity.LayerStylesEntity({
      "myStyle": {
        "default": {
          "pointWidth": 6,
          "pointFill": "#FF7F50",
          "pointLineWidth": 1,
          "pointLineFill": "#FF0000",
          "polygonOpacity": 0.5,
          "lineWidth": [2],
          "lineFill": "#0000CD",
          "polygonFill": "#00FA9A"
        }
      }
    });
	// set the style
    layer.setStyles(layerStyles);
  });

See the Pen Styling API Example by Mapworks (@mapworks) on CodePen.

Next: Creating a Custom Tooltip