Not a Package Manager

    react-leaflet-shapefile-v2

    3.0.3 • Public • Published

    react-leaflet-shapefile-v2 npm versionReleasenpmNode.js CINode.js CI

    Most recently tested with Leaflet React-Leaflet 3.0.5.

    React component build on top of React-Leaflet that integrate leaflet.shapefile functionality.

    example

    Install

    npm install react-leaflet-shapefile
    

    Complete example with react-leaflet

    Add some 'react-leaflet' so you can have a map. Then add

    import React from 'react';
    import { MapContainer, TileLayer, LayersControl } from 'react-leaflet'
    import { ShapeFile } from '../lib/index.js'
    
    const { BaseLayer, Overlay } = LayersControl;
    
    export default class ShapefileExample extends React.Component {
    
      state = {
        geodata: null,
        increment: 0
      }
    
      handleFile(e) {
        var reader = new FileReader();
        var file = e.target.files[0];
        reader.readAsArrayBuffer(file);
        reader.onload = function(buffer) {
          this.setState({ geodata: buffer.target.result });
        }.bind(this)
      }
      
      onEachFeature(feature, layer) {
        if (feature.properties) {
          layer.bindPopup(Object.keys(feature.properties).map(function(k) {
            return k + ": " + feature.properties[k];
          }).join("<br />"), {
            maxHeight: 200
          });
        }
      }
      
      style() {
        return ({
          weight: 2,
          opacity: 1,
          color: "blue",
          dashArray: "3",
          fillOpacity: 0.7
        });
      }
    
      render() {
        let ShapeLayers = null;
        if (this.state.geodata !== null) {
          ShapeLayers = (
          <Overlay checked name='Feature group'>
              <ShapeFile data={this.state.geodata} style={this.style} onEachFeature={this.onEachFeature}/>
          </Overlay>);
        }
        return (
          <div>
            <div >
              <input type="file" onChange={this.handleFile.bind(this)} className="inputfile"/>
            </div>
            <MapContainer center={[42.09618442380296, -71.5045166015625]} zoom={2} zoomControl={true}>
              <LayersControl position='topright'>
                <BaseLayer checked name='OpenStreetMap.Mapnik'>
                  <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"/>
                </BaseLayer>
                {ShapeLayers}
              </LayersControl>
            </MapContainer>
          </div>
        )
      }
    }

    You can find the following example in the folder example. Run the above code by executing the following scripts in package.json, with the order they are stated underneath:

    1. build

    2. example

    Install

    npm i react-leaflet-shapefile-v2

    DownloadsWeekly Downloads

    7

    Version

    3.0.3

    License

    MIT

    Unpacked Size

    9.38 MB

    Total Files

    25

    Last publish

    Collaborators

    • tageoforce