This package is to add administrative boundaries tool with CGAZ dataset to Maplibre GL JS.
npm install @undp-data/cgaz-admin-tool``shell`
pnpm i -D @undp-data/cgaz-admin-tool
`ts
import MaplibreCgazAdminControl from '@undp-data/cgaz-admin-tool';
import '@undp-data/cgaz-admin-tool/dist/maplibre-cgaz-admin-control.css';
const options = {
url: 'https://undpngddlsgeohubdev01.blob.core.windows.net/admin/cgaz-geoboundaries.pmtiles',
attribution: Administrative boundaries courtesy of geoBoundaries,
isHover: true,
sourceId: 'cgaz',
layerId: 'cgaz',
sourceLayer: 'admin',
featureId: 'id',
maxZoom: 10,
adminRange: [0, 2],
adminName: 'admin{level}_name',
fillColor: 'hsla(0, 0%, 0%, 0.25)',
fillOutlineColor: 'hsla(0, 0%, 0%, 1)'
};
map.addControl(new MaplibreCgazAdminControl(options), 'top-left');
`
In order to use this plugin, please also setup PMTiles Javascript API as follows.
`shell`
pnpm i -D pmtiles
`ts
import maplibregl from 'maplibre-gl';
import * as pmtiles from 'pmtiles';
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);
`
| Property | Description | Default |
| ---------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
| url | URL for CGAZ PMTiles | URL |
| attribution | Attribution for CGAZ | Administrative boundaries courtesy of geoBoundaries |
| isHover | If true, hovering by feature ID will be enabled. Default is true. | true |
| sourceId | Source ID for maplibre. | cgaz |
| layerId | layer ID for maplibre. | cgaz |
| sourceLayer | source-layer property value for maplibre. | admin |
| featureId | FeatureState ID. | id |
| maxZoom | Max zoom level of CGAZ PMTiles. | 10 |
| adminRange | Range of admin levels covered. | [0, 2] (level 0 to 2) |
| adminName | field name of administrative boundaries. {level} is replaced with admin level. | "admin{level}\_name". |
| fillColor | fill-color property value for CGAZ polygon layer. | 'hsla(0, 0%, 0%, 0.25)' |
| fillOutlineColor | fill-outline-color property value for CGAZ polygon layer. | 'hsla(0, 0%, 0%, 1)' |
Everything you need to build a Svelte library, powered by create-svelte.
Read more about creating a library in the docs.
If you're seeing this, you've probably already done this step. Congrats!
`bashcreate a new project in the current directory
npm create svelte@latest
$3
Once you've created a project and installed dependencies with
npm install (or pnpm install or yarn), start a development server:`bash
npm run devor start the server and open the app in a new browser tab
npm run dev -- --open
`Everything inside
src/lib is part of your library, everything inside src/routes can be used as a showcase or preview app.$3
To build your library:
`bash
npm run package
`To create a production version of your showcase app:
`bash
npm run build
`You can preview the production build with
npm run preview.> To deploy your app, you may need to install an adapter for your target environment.
$3
Go into the
package.json and give your package the desired name through the "name" option. Also consider adding a "license" field and point it to a LICENSE file which you can create from a template (one popular option is the MIT license).To publish your library to npm:
`bash
npm publish
``