Map Styles

There are 4 main things to know from all of the styling rules documented in the Maplibre GL JS Style Specification.

• for anything you want on the map, you have to separately include a source and a layer that refers to that source
• the source types we typically use are raster tiles or geojson. More info about geojson here. There are more options than those 2.
• in the layers, for controlling things like colors, shapes and sizes of features on the map, you use a type, layout, paint, fill, and other properties with css-like code values
• you can change the style after the map is initialized

Separately include Source and Layer

To create a style for a map which has a pwd basemap, you create a json object with sources, including the pwd tiles:

sources: {
  pwd: {
    tiles: ['https://tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityBasemap/MapServer/tile/{z}/{y}/{x}'],
    type: 'raster',
    tileSize: 256,
  },...

And then the json object will have layers, again including the pwd tiles, and referring to the pwd source:

layers: [
  {
    id: 'pwd',
    source: 'pwd',
    type: 'raster',
  },...

Source types

While there are 6 source types, we typically only use "raster" (as seen above) and "geojson". We usually initialize the map with empty geojson placeholders like:

addressMarker: {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [],
    }
  }
},
dorParcel: {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [[[]]],
    }
  }
},

And then, after an address has been searched, use the Maplibre GL JS API to add the coordinates for marking the address (using the Turf.js point() function):

map.getSource('addressMarker').setData(point(pwdCoordinates.value));

Or drawing a polygon at the address (using the Turf.js polygon() function)

const newParcel = polygon([ dorCoordinates.value ]);
map.getSource('dorParcel').setData(newParcel);

Layer types