MapLibre: Building a map from a JSON style

Building a map from a 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.json"
>
</MapLibre>

Content of /data/ksa.json:

{
  "version": 8,
  "name": "Kahramanmaraş Survey",
  "minzoom": 0,
  "maxzoom": 24,
  "sources": {
    "vectorLyr": {
      "type": "vector",
      "tiles": [
        "https://db.lad-sapienza.it/gis/curry/scms_ksa/{z}/{x}/{y}"
      ],
      "maxzoom": 24
    },
    "EsriSat": {
      "type": "raster",
      "tiles": [
        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
      ]
    }
  },
  "layers": [
    {
      "id": "sat-esri",
      "source": "EsriSat",
      "type": "raster",
      "metadata": {
        "label": "ESRI Satellite"
      }
    },
    {
      "id": "ksa",
      "source": "vectorLyr",
      "source-layer": "scms_ksa",
      "type": "circle",
      "metadata": {
        "label": "Kahramanmaraş Survey Sites"
      },
      "paint": {
        "circle-color": "#ff0000",
        "circle-opacity": 0.5,
        "circle-radius": 5,
        "circle-stroke-width": 1.5,
        "circle-stroke-color": "#000000"
      }
    }
  ]
}