3.1. Layers. GeoJSON

December 9, 2021 · View on GitHub

Theory

The first thing anyone wants to do when working with an interactive map is to add their favorite GeoJSON to it.

There are several ways to add geojson to the map in NgwMap.

Common:

ngwMap.addLayer("GEOJSON", {
  data: geojson,
  paint: { color: "red" },
});

Shortcut way:

ngwMap.addGeoJsonLayer({
  data: geojson,
  type: "line",
  paint: { weight: 4, color: "purple" },
});

Any layer added to the web map gets a unique identifier:

ngwMap.addLayer("GEOJSON").then((layer) => {
  console.log(layer.id); // automated generated ID
});

You can also assign this ID manually. In this case, you will have to monitor the uniqueness of the layer identifier yourself:

ngwMap.addLayer("GEOJSON", { id: "my-geojson-layer" }).then((layer) => {
  console.log(layer.id); // my-geojson-layer
});

After the layer is created, you can use this layer itself or its identifier in any of the following methods:

ngwMap.addLayer("GEOJSON", { id: "my-geojson-layer" }).then((layer) => {
  ngwMap.fitLayer(layer);
  ngwMap.hideLayer("my-geojson-layer");
});

Find more information on working with vector layers in Part 6 of this tutorial.

The program code of the lesson uses the fetchGeoJson auxiliary function. It returns a pure GeoJSON from which layers are then created and updated.

Since the function is asynchronous and the order of the layers must be strictly defined, the order option is used.

By default, all layers are interactive, and events can be received from them. The interactive option controls this behavior.

All other options are listed in the documentation

To run this example, you need to execute these commands in the terminal:

npm i
npm start

LAUNCH in the codesandbox.io.