I've mentioned before that the more objects there are to represent with WFS markers, the more it directly translates into cost.

But what if — and this is a big if — you really need to show every single one of a huge number of objects as markers? Whatever the reason, if you run into this problem, WebGL can be the solution.

In this chapter, we use the WebGL renderer to display 300,000 markers.

With OpenLayers' typical renderer, performance becomes very slow once you have more than about 20,000 markers displayed.

But as mentioned before, since it's not particularly meaningful to cram markers densely on a map anyway, most map services either hide markers or simplify them into a Cluster Map once you zoom out past a certain level.

It's a kind of trick that secures data visibility while effectively reducing the rendering burden at the same time.

However, with the WebGL renderer, rendering more than 20,000 items at once is no longer a problem.

We'll set the number of data points to render at around 300,000. There's no particular reason it's 300,000.

TYPESCRIPT
const features: Feature<Geometry>[] = [];

let x = 14333482;
let y = 4304950;

for (let i = 0; i < 300000; i++)
{
	x += 500;

	// Move down a row every 500 items
	if (i % 500 === 0)
	{
		y += 500;

		x -= 250000;
	}

	const point = new Point([ x, y ]);

	const feature = new Feature<Geometry>({
		geometry: point
	});

	features.push(feature);
}

This is logic that generates points at regular intervals based on an arbitrary location [ 14333482, 4304950 ].

500 points per row, 600 rows total, generating the data.

Create a WebGLPointsLayer that uses WebGL as its renderer. There's no major difference from VectorLayer.

TYPESCRIPT
import WebGLPointsLayer from 'ol/layer/WebGLPoints';

const layer = new WebGLPointsLayer({
	source: source,
	zIndex: 5,
	properties: { name: 'wfs' }
});

WebGLPointsLayer doesn't have precise API docs at the moment. It's fine to use it in a similar way to VectorLayer.

However, styling is a bit different — while the existing VectorLayer used a Style object, WebGLPointsLayer takes a literal instead.

For example, it looks something like this.

JSON
{
	"symbol": {
		"symbolType": "circle",
		"size": 14,
		"color": "red",
		"opacity": 0.6
	}
}

Usage after this is the same as WFS.

You can check out an example implementing this at OpenLayers6 Sandbox - WebGL.

You can toggle WebGL on/off, so it would be worth comparing the difference yourself.

The long, long series of GIS project posts has finally come to an end.

It wasn't originally supposed to be this long, but it grew quite a bit as I kept adding this and that.

It also grew in volume, and got pushed back partway through due to the blog renewal work, so it seems to have dragged on for a long time.

Over the long duration of this work, there were parts that felt lacking here and there, and moments where my focus seemed to waver, so I think I'll need to gradually go back and fill those in later. If I tried to write it perfectly from the start, there'd be no end to it...

Since I generally dislike working on several things in parallel, I couldn't pick up anything else because I wanted to finish this first — but now I think I'll pick a different topic and give it a try.

By the way, I haven't been able to get much done at home lately due to a bout of lethargy. What's more, running a blog is closer to self-promotion than development, so for someone who just recently changed jobs, it doesn't really mean much more than a hobby to me.

The last thing I was really immersed in was probably the renewal...

I want to pick something and focus on it, but there's nothing in particular to do, and even finding a topic is a chore in itself.