src/VTMap.js
/* Renders Map and Handles Zoom Functions*/
Renders Map and Handles Zoom Functions
Renders Map and Handles Zoom Functions
render() {
    let VTBorder = borderData.geometry.coordinates[0].map((coordSet) => {
      return [coordSet[1], coordSet[0]];
    });
    console.log(VTBorder);
    return (
      <>
        <div>
          <Map
            center={this.state.center}
            zoom={this.state.zoom}
            style={this.state.style}
            zoomControl={this.state.zoomControl}
            scrollWheelZoom={this.state.scrollWheelZoom}
            attributionControl={this.state.attributionControl}
          >
            <TileLayer
              url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
              attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
            />
            <Polygon positions={VTBorder} />
          </Map>
        </div>
        <div>
          <Buttons
            disabled={this.state.disabled}
            handleClick={this.getCurrentLoc}
            guessButton={this.state.guessButton}
            quitButton={this.state.quitButton}
            randomLat={this.state.center[0]}
            randomLong={this.state.center[1]}
            currentTown={this.state.town}
            currentCounty={this.state.county}
          />
        </div>
        <div>
          <Navigation
            disabled={this.state.disabled}
            handleClick={this.handleClick}
            handleNorthClick={this.handleNorthClick}
          />
        </div>
        <div></div>
      </>
    );
  }
render ( ) { let VTBorder = borderData . geometry . coordinates [ 0 ] . map ( ( coordSet ) => { return [ coordSet [ 1 ] , coordSet [ 0 ] ] ; } ) ; console . log ( VTBorder ) ; return ( < > < div > < Map center = { this . state . center } zoom = { this . state . zoom } style = { this . state . style } zoomControl = { this . state . zoomControl } scrollWheelZoom = { this . state . scrollWheelZoom } attributionControl = { this . state . attributionControl } > < TileLayer url = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" attribution = "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community" / > < Polygon positions = { VTBorder } / > < / Map > < / div > < div > < Buttons disabled = { this . state . disabled } handleClick = { this . getCurrentLoc } guessButton = { this . state . guessButton } quitButton = { this . state . quitButton } randomLat = { this . state . center [ 0 ] } randomLong = { this . state . center [ 1 ] } currentTown = { this . state . town } currentCounty = { this . state . county } / > < / div > < div > < Navigation disabled = { this . state . disabled } handleClick = { this . handleClick } handleNorthClick = { this . handleNorthClick } / > < / div > < div > < / div > < / > ) ; }
Renders Map and Handles Zoom Functions
Renders Map and Handles Zoom Functions