Created
August 3, 2021 16:07
-
-
Save odoe/daeeb1a0f185abe858af21e5d20b6bd6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useRef, useEffect, useState } from "react"; | |
| import ArcGISMap from "@arcgis/core/Map"; | |
| import MapView from "@arcgis/core/views/MapView"; | |
| import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; | |
| import clasess from "./esri-map.module.css"; | |
| import { func } from "prop-types"; | |
| const layers = [ | |
| { | |
| layerId: 1, | |
| layerName: "District", | |
| layerUrl: | |
| "http://dev.ksrsac.in/maps/rest/services/Boundaries/Admin_Dynamic/MapServer/1", | |
| }, | |
| { | |
| layerId: 2, | |
| layerName: "Taluk", | |
| layerUrl: | |
| "http://dev.ksrsac.in/maps/rest/services/Boundaries/Admin_Dynamic/MapServer/2", | |
| }, | |
| ]; | |
| function EsriMap() { | |
| const [loading, setLoading] = useState(false); | |
| const [mapLayer, setMapLayer] = useState(layers); | |
| const [mapLayerId, setMapLayerId] = useState(0); | |
| const mapDiv = useRef(); | |
| // in scope for other methods | |
| let map; | |
| const mapp = () => { | |
| map = new ArcGISMap({ | |
| basemap: "gray", | |
| }); | |
| vieww(map); | |
| }; | |
| const vieww = (map) => { | |
| const view = new MapView({ | |
| map, | |
| container: mapDiv.current, | |
| extent: { | |
| spatialReference: { | |
| wkid: 102100, | |
| }, | |
| xmax: 9318041.682582326, | |
| xmin: 7685897.199114412, | |
| ymax: 2134999.5715922136, | |
| ymin: 1257953.6118566156, | |
| }, | |
| zoom: 7, | |
| }); | |
| }; | |
| const handleClick = (layerUrl) => { | |
| console.log("I am from handelclick " + layerUrl); | |
| const layer1 = new FeatureLayer({ | |
| url: layerUrl, | |
| }); | |
| // make sure it is defined | |
| if (map) { | |
| map.add(layer1); | |
| } | |
| }; | |
| useEffect(() => { | |
| mapp(); | |
| }, []); | |
| if (loading) { | |
| return ( | |
| <> | |
| <section>Loading...</section> | |
| </> | |
| ); | |
| } | |
| return ( | |
| <> | |
| <div className={clasess.mainmapdiv} ref={mapDiv}></div>; | |
| <div> | |
| {mapLayer.map((lay) => { | |
| const { layerId, layerName, layerUrl } = lay; | |
| return ( | |
| <label key={layerId}> | |
| <input type="checkbox" onClick={() => handleClick(layerUrl)} /> | |
| // here onclick, what ever I get, I want to set to map.addlayer | |
| {layerName} | |
| </label> | |
| ); | |
| })} | |
| </div> | |
| </> | |
| ); | |
| } | |
| export default EsriMap; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment