https://github.com/p3tecracknell/pattern-generator

Generate patterns ideal for Mapbox
https://github.com/p3tecracknell/pattern-generator

Last synced: 9 days ago
JSON representation

Generate patterns ideal for Mapbox

• Host: GitHub
• URL: https://github.com/p3tecracknell/pattern-generator
• Owner: p3tecracknell
• Created: 2024-04-27T19:34:23.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-29T22:33:42.000Z (7 months ago)
• Last Synced: 2024-11-01T15:40:08.661Z (16 days ago)
• Language: HTML
• Size: 47.9 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pattern Generator

Generate sprites suitable for Mapbox

## Usage

Install and run with -

```bash

npm install pattern-generator

npm start

```

Use the [pattern designer](https://p3tecracknell.github.io/pattern-generator) to generate the pattern identifier.

Use it in layers with `fill-pattern` and load it into your MapboxGL application with `generateImageData`:

```javascript

import { generateImageData } from 'pattern-generator'

const map = new mapboxgl.Map({...})

map.on('styleimagemissing', (event) => {

    const data = generateImageData(event.id)

    map.addImage(event.id, data)

})

map.addLayer({

    ...

    type: 'fill',

    paint: {

        'fill-pattern': 'd1-16-15-0-0-255-100-255-0-0-10'

    }

})

```

## Specification

Patterns are defined using the following layout:

```javascript

[direction]-[size]-[lineWidth]-[strokeRed]-[strokeGreen]-[strokeBlue]-[strokeAlpha]-[backgroundRed]-[backgroundGreen]-[backgroundBlue]-[backgroundAlpha]

```