React-Leaflet-Mapping einer Liste von Plots auf Marker

Question

Ich habe eine React Leaflet-Map, die in Ordnung ist.

Ich habe eine Liste der Grundstücke im Zustand bekam, was in Ordnung erscheinen (ich sie sehen kann, wenn ich auf der Komponenten Zustand aussehen.

Jede Parzelle eine GeoJSON Polygon Eigenschaft hat.

Ich habe hat eine benutzerdefinierte Markerkomponente, die auf der Grundlage des Zooms unterschiedlich rendert (entweder ein GeoJSON-Polygon oder eine Markierung in der Mitte des Polygons des Plots).

Ich ordnet die Plot-Liste zu und instanziiere eine benutzerdefinierte Markerkomponente aus jedem einzelnen. Aber das macht keine Plots.

Was fehlt mir?

Die Kartenkomponente:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../../actions'; 
import { Map, TileLayer, LayersControl, MapControl } from 'react-leaflet'; 
import { GoogleLayer } from './GoogleLayer'; 
import { geolocated } from 'react-geolocated'; 
import 'leaflet-geocoder-mapzen'; 
import SearchBox from './searchBox'; 
import Control from 'react-leaflet-control'; 
import PlotMarker from './plotMarker'; 
import { centroid } from '@turf/turf'; 

const { BaseLayer } = LayersControl; 
const key = 'MYKEY'; 
const hybrid = 'HYBRID'; 
const terrain = 'TERRAIN'; 
const road = 'ROADMAP'; 
const satellite = 'SATELLITE'; 

const centerLat = props => { 
    if (
     props.isGeolocationAvailable && 
     props.isGeolocationEnabled && 
     props.coords 
    ) { 
     return props.coords.latitude; 
    } 
    return 32.11; 
}; 

const centerLong = props => { 
    if (
     props.isGeolocationAvailable && 
     props.isGeolocationEnabled && 
     props.coords 
    ) { 
     return props.coords.longitude; 
    } 
    return 34.963; 
}; 

const initialMapCenter = props => { 
    return [centerLat(props), centerLong(props)]; 
}; 

const initialZoomLevel = 11; 

const markers = props => { 
    if (props.plots) { 
     return (
      <div> 
       {(props.filteredPlots || props.plots).map(
        plot => 
         plot.feature && (
          <PlotMarker 
           key={plot._id} 
           geoJSON={plot.feature} 
           position={centroid(plot.feature).geometry.coordinates} 
          /> 
         ) 
       )} 
      </div> 
     ); 
    } 
}; 
export class PlotMap extends Component { 
    render() { 
     this.props.plots && 
      (this.props.filteredPlots || this.props.plots).forEach(plot => { 
       plot.feature && 
        console.log(centroid(plot.feature).geometry.coordinates); 
      }); 
     return (
      <div 
       className="col-sm-8 m-auto p-0 flex-column float-right" 
       style={{ height: `85vh` }}> 
       <Map 
        center={initialMapCenter(this.props)} 
        zoom={initialZoomLevel} 
        zoomControl={true} 
        onZoomend={e => { 
         this.props.setZoomLevel(e.target.getZoom()); 
        }} 
        onMoveEnd={e => { 
         this.props.setMapCenter(e.target.getCenter()); 
        }}> 
        <LayersControl position="topright"> 
         <BaseLayer name="Google Maps Roads"> 
          <GoogleLayer googlekey={key} maptype={road} /> 
         </BaseLayer> 
         <BaseLayer name="Google Maps Terrain"> 
          <GoogleLayer googlekey={key} maptype={terrain} /> 
         </BaseLayer> 
         <BaseLayer name="Google Maps Satellite"> 
          <GoogleLayer googlekey={key} maptype={satellite} /> 
         </BaseLayer> 
         <BaseLayer checked name="Google Maps Hybrid"> 
          <GoogleLayer 
           googlekey={key} 
           maptype={hybrid} 
           libraries={['geometry', 'places']} 
          /> 
         </BaseLayer> 
        </LayersControl> 
        <SearchBox postion="bottomright" /> 
        {markers(this.props)} 
       </Map> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     filteredPlots: state.plots.filteredPlots, 
     plots: state.plots.plots, 
     mapCenter: state.plots.mapCenter 
    }; 
} 

export default geolocated({ 
    positionOptions: { 
     enableHighAccuracy: false 
    }, 
    userDecisionTimeout: 5000, 
    suppressLocationOnMount: false 
})(connect(mapStateToProps, actions)(PlotMap)); 

Die Marker-Komponente:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../../actions'; 
import { Marker, GeoJSON } from 'react-leaflet'; 

export class PlotMarker extends Component { 
    render() { 
     const { key, position, geoJSON, zoomLevel } = this.props; 
     if (zoomLevel > 14) { 
      return <GeoJSON key={key} data={geoJSON} />; 
     } 
     return <Marker key={key} position={position} />; 
    } 
} 

function mapStateToProps(state) { 
    return { 
     selectedPlot: state.plots.selectedPlot, 
     plotBeingEdited: state.plots.plotBeingEdited, 
     zoomLevel: state.plots.zoomLevel 
    }; 
} 

export default connect(mapStateToProps, actions)(PlotMarker); 

Answer 1

Die Frage stellt sich heraus, dass GeoJSON verwendet Lang lat, während Leaflet lat-long verwendet (geerbt von Google Maps .) Also erschienen meine Marker in einem anderen Teil der Welt. Dies zu beheben ist sehr einfach - rufen Sie einfach .reverse() für das Koordinaten-Array auf, das Sie als Position an die Marker-Komponente übergeben:

<PlotMarker 
     key={plot._id} 
     geoJSON={plot.feature} 
     position={centroid(plot.feature).geometry.coordinates} 
/>