Adding GeoJSON Data

Let’s add our geoJSON data we made from our georeferenced map. By now you have already heard what geoJSON is and how it is structured, but if you want to know even more, Tom Macwright’s More than you ever wanted to know about GeoJSON is a great read.

Mapbox Example: Load data from an external GeoJSON file.

Add a GeoJSON Source

To Do

Verify you have your geoJSON data stored in the same directory as your map boilerplate. Your directory should look something like:

├── map-boilerplate
    |
    ├── map.html
    |
    └── snow_water_pumps.geojson

In VS Code, add the text below where you find the comment about adding a geojson source.

map.on("load", () => {
  map.addSource("datalayer", {
    type: "geojson",
    data: "snow_water_pumps.geojson", // be sure filename and path matches yours.
  });
  // add your layer and styles here
});

Save your map in VS Code.

Add and Style the GeoJSON Layer

The next step is to add the source as a layer on your map, while also giving it some styling. Since styles in Mapbox GL JS are applied differently to points, lines, and polygons, you will need to choose the appropriate directions below. The full documentation on adding and styling layers is essential in understanding how to make your data layers look and feel the way that you want them.

Mapbox Documentation: Style Spec Reference for Mapbox Layers.

Adding Points

To Do

If you are adding point data, add the text below to your map in VS Code. This will make the points appear as small blue circles with white strokes.

map.addLayer({
  id: "snow_water_pumps",
  type: "circle",
  source: "datalayer",
  layout: {},
  paint: {
    "circle-radius": 10,
    "circle-stroke-width": 2,
    "circle-color": "#88c0d0",
    "circle-stroke-color": "white",
  },
});

Adding Polygons

To Do

If you are adding polygon data, add the text below to your map in VS Code. This will make the polygons appear as blue shapes.

map.addLayer({
  id: "snow_water_pumps",
  type: "fill",
  source: "datalayer",
  layout: {},
  paint: {
    "fill-color": "#88c0d0",
    "fill-opacity": 0.5,
  },
});

Adding Lines

To Do

If you are adding line data, add the text below to your map in VS Code. This will make the lines appear blue with rounded edges.

map.addLayer({
  id: "snow_water_pumps",
  type: "line",
  source: "datalayer",
  layout: {
    "line-join": "round",
    "line-cap": "round",
  },
  paint: {
    "line-color": "#888",
    "line-width": 8,
  },
});

If done correctly, you should see a similarly functioning map:

PREVIOUSTransparency Sliders

NEXTPopups