react-leaflet-geojson-patterns

The component extended default GeoJSON for support svg patterns

Demo | Documentation

Install

npm install --save react-leaflet-geojson-patterns

Usage

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import { GeoJSONFillable, Patterns} from 'react-leaflet-geojson-patterns';
 
<Map center={[47.9, -71.4]} zoom={10} style={{ height: "300px" }}>
  <TileLayer
    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <GeoJSONFillable
    data={{
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {
            style: "stripe",
            name: "Loisirs Lavoie et St-Jean-Baptiste"
          },
          geometry: {
            type: "Polygon",
            coordinates: [
              [
                [-71.729270299794578, 48.010418784700107],
                [-71.291070323784993, 48.004374022337799],
                [-71.291070323784993, 47.777183877693901],
                [-71.729270299794578, 47.786290622064854],
                [-71.729270299794578, 48.010418784700107]
              ]
            ]
          }
        }
      ]
    }}
    style={feature => ({
      color: "red",
      fillPattern: Patterns.CirclePattern({
        x: 7,
        y: 7,
        radius: 5,
        fill: true,
        width: 15,
        height: 15,
        color: "red",
        key: "circle"
      })
    })}
  />
</Map>;

Built With

• Leaflet.pattern - The plugin for leaflet that allows for use of fill patterns in Paths.
• Leaflet-react - React components for 🍃 Leaflet maps

License

MIT © lkazberova