Day 3 - Polygons

Lafayette, CO

For day 3's theme of polygons I decided to stick with using Boulder County's Geospatial Open Data site and grabbed the geojson for municipalities. They have a nice filtering feature that allows you to filter on whatever properties you want to view and then download that filtered data. Below is the Lafayette, Colorado municipality. It always amazes me how jagged and hole filled some of these municipalities are.

Blog updates

We now have code snippets working properly in light and dark mode! Here's the onLoad function I used in the map component to get today's map loading the municipal data.

const onLoad = (map: mapboxgl.Map) => {
  fetch('/data/municipalities.geojson')
    .then((response) => response.json())
    .then((data) => {
      map.addSource('municipalities', {
        type: 'geojson',
        data: data,
      });

      map.addLayer({
        id: 'municipalities-layer',
        type: 'fill',
        source: 'municipalities',
        layout: {},
        paint: {
          'fill-color': '#B2EF9B',
          'fill-opacity': 0.5,
        },
      });

      map.addLayer({
        id: 'municipalities-borders',
        type: 'line',
        source: 'municipalities',
        layout: {},
        paint: {
          'line-color': '#1B460B',
          'line-width': 2,
        },
      });

      const initialBounds = map.getBounds();
      if (initialBounds) {
        map.setMaxBounds(initialBounds);
      }

      setIsLoading(false);
    })
    .catch((error) => console.error('Error loading GeoJSON:', error));
};

Oh and I also learned about a useful jq command to remove all whitespace and newlines from a json file. See you tomorrow!

jq -c . original.json > small.json