Commit b14088a8 authored by Hamer Iboshi's avatar Hamer Iboshi

Added communities map, shape and fixed special cases like no file found, no...

Added communities map, shape and fixed special cases like no file found, no lat or lng, and no shape
parent 16ff4ddb
......@@ -2485,6 +2485,5 @@ const CommunitiesJson = {
};
export function findFileById(id) {
console.log('getCommunities',id,CommunitiesJson[id]);
return(CommunitiesJson[id]);
}
\ No newline at end of file
......@@ -36,7 +36,6 @@ import { Map, TileLayer, Polygon, Marker, Popup } from 'react-leaflet';
import PageTable from '../Components/PageTable'
import { findFileById } from '../Components/Communities';
// import CustomMarker from '../Components/CustomMarker'
import './Styles/Eixo1.css'
import { Store } from '../Store';
......@@ -98,17 +97,34 @@ class Eixo1 extends Component {
})
return final
}
componentDidMount() {
this.clearMap()
}
shapeMap() {
if(this.state.clickedRow['shape_territorio'] === null){
return [[0, 0]];
}
let coordinates = this.state.clickedRow['shape_territorio']['coordinates'];
let shape = [];
coordinates.forEach((shapeGroup, i) => {
shape.push([]);
shapeGroup.forEach((coordinatesGroup, j) => {
shape[i].push([])
coordinatesGroup.forEach((coordinate) => {
shape[i][j].push([coordinate[1], coordinate[0]]);
})})
})
return shape;
}
openModal(e, where) {
Promise.all([findFileById(where.original['ID'])]).then(([json_file]) => {
this.setState({
clickedRow: json_file ? json_file['comunidades'][0] : {},
clickedRow: json_file ? json_file['comunidades'][0] : null,
modalOpen: true
})
});
})
}
......@@ -116,7 +132,6 @@ class Eixo1 extends Component {
this.setState({
modalOpen: false,
});
// console.log(this.state.clickedRow['shape_territorio'].coordinates[0][0])
}
render() {
......@@ -130,27 +145,28 @@ class Eixo1 extends Component {
<Button onClick={this.closeModal} flat modal="close" waves="light">Fechar</Button>
</div>
}
header={"Mapa " + ((this.state.clickedRow !== null) ? this.state.clickedRow['nome'] : '')}
modalOptions={{ dismissible: false }}
>
{console.log(this.state.clickedRow)}
{this.state.modalOpen ?
<Row>
<Col s={12}>
<Card title = {"Mapa " + this.state.clickedRow['nome_territorio']}>
{ (this.state.clickedRow && this.state.clickedRow.lat) ?
<Map
center={[this.state.clickedRow.lat, this.state.clickedRow.lng]}
center={this.state.clickedRow.lat ? [this.state.clickedRow.lat, this.state.clickedRow.lng] : this.shapeMap()[0][0][1]}
zoom={13}
onClick={this.addMarker}
onLocationfound={this.handleLocationFound}
ref="map"
length={13}
>
<TileLayer
<Polygon color='#ca3829' positions={this.shapeMap()}/>
}
<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"
/>
</Map>
</Card>
/>
</Map> : <span>Não há mapas disponíveis para está comunidade</span>}
</Col>
</Row> : null }
</Modal>
......@@ -231,25 +247,6 @@ class Eixo1 extends Component {
<CardFooter source="INCRA (Jan, 2016)" />
</Card>
<Row>
<Col s={12}>
<Card>
<Map
center={[-38.51,-4.14]}
zoom={13}
onClick={this.addMarker}
onLocationfound={this.handleLocationFound}
ref="map"
length={13}
>
<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"
/>
</Map>
</Card>
</Col>
</Row>
</div>
</div>
);
......
......@@ -31,12 +31,6 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
font-style: italic;
}
.leaflet-container {
height: 40vh;
width: 40vw;
margin: 0 auto;
}
.clearmapbtn{
background-color: #ca3829;
}
......@@ -151,8 +145,8 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
}
/* Map css */
#mapContainer{
height: 400px;
width: 400px;
.leaflet-container {
height: 51vh;
width: 50vw;
margin: 0 auto;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment