MapLibre: Building a map from a JSON style

Building a map from a custom JSON style

Data from Kahramanmaraş Survey created by Elizabeth Carter and published on OpenContext add distributed with CC BY 4.0 International license.

import { MapLibre } from "../../../modules/scms.js"

<MapLibre 
  center="37.00416,37.48551,9"
  mapStyle="/data/ksa_custom.json"
/>

ksa_custom.json:

...
{
  "id": "ksa",
  "source": "vectorLyr",
  "source-layer": "scms_ksa",
  "type": "circle",
  "metadata": {
    "label": "Kahramanmaraş Survey Sites",
    "searchInFields": {
      "Item_Label": "Label",
      "Site_Name": "Site name",
      "Site_Description": "Site description"
    },
    "popupTemplate": "<div><h4>${Site_Name}</h4><p>${Site_Description}</p><small>${Item_Label}</small></div>"
  },
  "paint": {
    "circle-color": "#ff0000",
    "circle-opacity": 0.5,
    "circle-radius": 5,
    "circle-stroke-width": 1.5,
    "circle-stroke-color": "#000000"
  }
...