https://github.com/hongfaqiu/pbf-basic-render

Fork of maplibre-gl-js that gives you explicit control of which source tiles you render and where
https://github.com/hongfaqiu/pbf-basic-render

Last synced: about 6 hours ago
JSON representation

Fork of maplibre-gl-js that gives you explicit control of which source tiles you render and where

• Host: GitHub
• URL: https://github.com/hongfaqiu/pbf-basic-render
• Owner: hongfaqiu
• License: other
• Created: 2022-02-13T08:32:35.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-07T08:37:45.000Z (almost 3 years ago)
• Last Synced: 2024-04-24T21:20:53.602Z (9 months ago)
• Language: TypeScript
• Size: 156 MB
• Stars: 0
• Watchers: 1
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt
  • Code of conduct: CODE-OF-CONDUCT.md

Awesome Lists containing this project

README

        
# Pbf BasicRender

**Pbf BasicRender** is a fork from [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js).

## Usage

```js

npm install pbf-basic-render --save

yarn add pbf-basic-render

```

```ts

import { BasicRenderer } from "pbf-basic-render";

const workCanv = document.createElement('canvas');

const basicRender = new BasicRenderer({

  canvas: workCanv,

  transformRequest: (url: string) => {

    return {

      url,

      headers: someHeaders

    }

  },

  style: {

    version: 8,

    sources: {

      origin: {

        type: "vector",

        tiles: ['https://api.mapbox.com/v4/mapbox.82pkq93d/{z}/{x}/{y}.vector.pbf?sku=1012RMlsjWj1O&access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg'],

      },

    },

    layers: [

      {

        id: "background",

        type: "background",

        paint: {

          "background-color": "transparent",

        },

      },

      {

        id: "polygon",

        source: "origin",

        "source-layer": "original",

        type: "fill",

        paint: {

          "fill-color": "#00ffff",

          'fill-outline-color': 'rgba(0,0,0,0.1)',

        }

      }

    ],

  },

});

```

## Introduction

You should also check [Mapbox-vector-tiles-basic-js-renderer](https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer) for more detail.

## Bugs

- ('text-field') render can't work

## Compile

Ensure you have installed [node-gyp](https://github.com/nodejs/node-gyp) and Python environment, and then run this commond: 

```node

npm install

npm run postinstall

```

## Credit

https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer

https://github.com/davenquinn/maplibre-gl-js