// this is where selection of particular place happens
import React, { Component } from 'react';
//import Axios from 'axios';
// import * as ReactBootStrap from 'react-bootstrap'
class DropDown extends Component {
constructor(props){
super(props)
this.state = {
item: [],
isLoaded: true,
district: [],
}
// let [items] = this.setState
// console.log(items.drawingInfo.renderer.uniqueValueInfos.value)
}
componentDidMount() {
fetch('api link')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoaded: false,
item: responseJson.drawingInfo.renderer.uniqueValueInfos,
district: responseJson.fields,
})
})
.catch((error) =>{
console.log(error)
})
}
handleChange = (itemD) => {
const value = itemD.target.value;
this.setState({
value: value
});
console.log(value)
};
render() {
const {item} = this.state;
const itemDropdown = item.map((division, index)=> (
<option key={index}>{division.value}</option>
))
const {district} = this.state;
const dist = district.map((districts, i)=> (
<option key={i}>{districts.alias}</option>
))
//console.log(dist)
//console.log(itemDropdown)
return (
<div>
<div>
<select onChange = {this.handleChange}>
{itemDropdown}
</select>
<select onChange = {this.handleChange}>
{dist}
</select>
</div>
</div>
);
}
}
export default DropDown;
// this is the code where I render the map
import React from 'react';
import { loadModules } from 'esri-loader';
export class WebMapView extends React.Component {
constructor(props) {
super(props);
this.mapRef = React.createRef();
this.state = {
homelink: this.mapRef
}
// this.state = {
// data: false
// }
}
// async componentDidMount() {
// const url = "Api link";
// const response = await fetch(url);
// const data = await response.json();
// console.log(data)
// }
// componentDidMount() {
// let url = "Api link"
// fetch(url,{
// method: 'GET',
// headers: {
// 'Accept' : 'application/json',
// 'Content-Type' : 'application/json',
// }
// }).then((result) => {
// result.json().then((resp) =>{
// this.setState({data:resp})
// })
// })
// }
// getData() {
// let division_sublayer = mapImageLayer.findSublayerById(0);
// let divisionquery = division_sublayer.createQuery();
// divisionquery.where = "Division is not null";
// divisionquery.outFields = ["Division"];
// divisionquery.displayFieldName = ["Division"];
// divisionquery.returnDistinctValues = true;
// divisionquery.returnGeometry = false;
// division_sublayer.queryFeatures(divisionquery).then(function (response) {
// response.features.forEach(function (arrayItem) {
// let division = arrayItem.attributes.division;
// let el = document.createElement("option");
// el.textContent = division;
// el.value = division;
// //dropdivision.appendChild(el);
// // console.log(el);
// });
// });
// }
// componentDidUpdate(){
// this.setState(prevState =>{
// return {llayer: prevState}
// })
// }
render() {
{/*This is where the map renders*/}
{/* Loading modules of different features of arcgis with react */}
loadModules(["esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/widgets/ScaleBar",
"esri/widgets/Home"
], {
css: true
})
.then(([ArcGISMap, MapView, MapImageLayer, LayerList, Legend, Expand, ScaleBar, Home]) => {
const mapImageLayer = new MapImageLayer({
id: 0,
url: "Api link",
sublayers: [{
title: "Division",
id: 0,
source: {
type: "map-layer",
mapLayerId: 0
}
}]
});
const map = new ArcGISMap({
basemap: "streets",
layers: [mapImageLayer]
});
const mapview = new MapView({
container: this.mapRef.current,
map: map,
center: [90, 24],
zoom: 7
});
mapview.when(function () {
const layer_List = new Expand({
content: new LayerList({
view: mapview
}),
view: mapview,
expanded: false
});
const legend = new Expand({
content: new Legend({
view: mapview
}),
view: mapview,
expanded: false
});
const scaleBar = new ScaleBar({
view: mapview,
unit: "metric",
style: "chart"
});
const home = new Home({
view: mapview,
})
mapview.ui.add(layer_List, "top-right");
mapview.ui.add(legend, "bottom-left");
mapview.ui.add(scaleBar, "bottom-right");
mapview.ui.add(home, "top-left");
});
})
return (
<div className="webmap" ref={this.state.homelink}>
</div>
);
}
}
export default WebMapView;