mhasbie / react-leaflet-vectorgrid Goto Github PK

"lodash": "4.17.11",
"react": "16.8.3",
"react-leaflet": "2.2.0",
"react-leaflet-vectorgrid": "2.2.1",

declare module 'react-leaflet-vectorgrid' {
  import VectorGrid = require('react-leaflet-vectorgrid');
  export = VectorGrid;
}

import { withLeaflet } from 'react-leaflet';
import VectorGridDefault from 'react-leaflet-vectorgrid';

const VectorGridComponent: any = withLeaflet(VectorGridDefault);

export interface VectorGridProps {
  data: Object;
  type?: 'slicer' | 'protobuf';
  idField?: string;
  tooltip?: string;
  popup?: Function;
  style?: Object;
  hoverStyle?: Object;
  activeStyle?: Object;
  zIndex?: number;
  interactive?: boolean;
  onClick?: Function;
  onMouseover?: Function;
  onMouseout?: Function;
  onDblclick?: Function;
}

class VectorGrid extends React.Component<VectorGridProps, {}> {
  render() {
    return <VectorGridComponent {...this.props} />;
  }
}

export default VectorGrid;

import React, { useContext } from 'react';
import { Map, TileLayer, LayersControl, LayerGroup, WMSTileLayer, withLeaflet} from 'react-leaflet';
import { BingLayer } from 'react-leaflet-bing-v2';
import L, { CRS } from 'leaflet';
import { FeatureContext } from './FeatureContext';
import VectorGridDefault from "react-leaflet-vectorgrid";


export default function MapComponent({ data }) {
    const [feature, setFeature] = useContext(FeatureContext);

    function getFeatureData(featureData) {
        setFeature(featureData);
        console.log(feature)
    }

    const vectorStyles = {
        ING_FINAL: {
          fill: true,
          weight: 1,
          fillColor: "#ff00ff",
          color: "#ff00ff",
          fillOpacity: 0.9,
          opacity: 0.9,
          maxNativeZoom: 14,
          minNativeZoom: 1
        }
      };
      const VectorGrid = withLeaflet(VectorGridDefault);
      const options = {
        tolerance: 30, 
        extent: 4096, 
        buffer: 128, 
        rendererFactory: L.svg.tile ,
        type: "protobuf",
        url: "http://{server_ip}/ING_VT/{z}/{x}/{y}.pbf",
        vectorTileLayerStyles: vectorStyles,
        subdomains: "abcd",
        key: "abcdefghi01234567890",
        interactive: true,
        zIndex: 401
      };

    return (
        <Map center={[-34.238347, -70.250921]} zoom={8} minZoom={6} maxZoom={12} maxBounds={[[-35.494268, -70.735148], [-32.963408, -69.766694]]} crs={CRS.EPSG3857} >
            {/* Control de Capas */}
            <LayersControl position="topright">
                {/* GRUPO DE CAPAS WORLD IMAGERY+ SHADERELIEF */}
                <LayersControl.BaseLayer checked name="HillShade" >
                    <LayerGroup>
                        {/* ESRI WORLD IMAGERY */}
                        <TileLayer
                            attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
                            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                        />
                        {/* OPEN MAP SURFER HILLSHADE */}
                        <TileLayer
                            attribution='Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> | Map data  <a href="https://lpdaac.usgs.gov/products/aster_policies">ASTER GDEM</a>, <a href="http://srtm.csi.cgiar.org/">SRTM</a>'
                            url="https://maps.heigit.org/openmapsurfer/tiles/asterh/webmercator/{z}/{x}/{y}.png"
                        />
                    </LayerGroup>
                </LayersControl.BaseLayer>

                {/* ESRI Shaded Relief */}
                <LayersControl.BaseLayer name="ESRI Shaded Relief">
                    <TileLayer
                        attribution='Tiles &copy; Esri &mdash; Source: Esri'
                        url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}" 
                    />
                </LayersControl.BaseLayer>

                {/* BING Maps Satellital */}
                <LayersControl.BaseLayer name="BING Maps Satellital">
                    <BingLayer bingkey={bing_key} />
                </LayersControl.BaseLayer>

                <VectorGrid {...options}  onClick={ (e) => (getFeatureData(e.layer.properties))  } />
                
            </LayersControl>
        </Map>
    )
}

import React, { Component } from "react";
import { 
  Path, 
  withLeaflet,                 
  GeoJSON,                     
  LayerGroup,                  
  LayersControl                
} from 'react-leaflet';        
  
import ReactDOM from "react-dom";
import L from "leaflet";
import VectorGridDefault from 'react-leaflet-vectorgrid';
            
import aladag from "./data/adana/aladag.json";
import ceyhan from "./data/adana/ceyhan.json";
const VectorGrid = withLeaflet(VectorGridDefault); 


class AdanaOverlays extends Component {
 
  constructor(){
    super(); 
  }

  render (){
    return (
      <LayersControl>
        <Overlay name="Aladag">
          <VectorGrid type="protobuf" url="http://localhost:8123/aladag/{z}/{x}/{y}.mvt" />
        </Overlay>

        <Overlay name="Ceyhan">
          <VectorGrid type="protobuf" url="http://localhost:8123/ceyhan/{z}/{x}/{y}.mvt" />
        </Overlay>
      </LayersControl>
    )
  }

export default AdanaOverlays;

{
    "@material-ui/styles": "4.9.6",
    "leaflet": "1.6.0",
    "react": "16.13.1",
    "react-dom": "16.12.0",
    "react-leaflet": "2.6.3",
    "react-leaflet-vectorgrid": "2.2.1",
    "react-scripts": "3.0.1"
  }

var _context = this.context,
map = _context.map,
pane = _context.pane,
layerContainer = _context.layerContainer;

import VectorGridDefault from 'react-leaflet-vectorgrid';
const VectorGrid = withLeaflet(VectorGridDefault);

<VectorGrid
                ref={mapRef}
                key={key}
                url={apiURL}
                type="protobuf"
                subdomains={['a', 'b', 'c']}
                minZoom={minZoom}
                vectorTileLayerStyles={defaultStyle}
                bounds={bounds}
                zIndex={zIndex}
                updateWhenIdle={false}
                updateWhenZooming={false}
                updateInterval={600}
                onLoading={() => console.log('loading')}
                onLoad={() => console.log('loaded')}
/>