|
|
@ -59,7 +59,6 @@ baselayer |
|
|
|
|
|
|
|
|
|
|
|
import React, { Component, Suspense, Fragment } from 'react'; |
|
|
|
import React, { Component, Suspense, Fragment } from 'react'; |
|
|
|
import ReactDOM from 'react-dom'; |
|
|
|
import ReactDOM from 'react-dom'; |
|
|
|
// import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
|
|
|
|
|
|
|
|
import { Button, UncontrolledTooltip } from 'reactstrap'; |
|
|
|
import { Button, UncontrolledTooltip } from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
|
|
import './Map.css'; |
|
|
|
import './Map.css'; |
|
|
@ -76,7 +75,6 @@ import OlSourceOsm from 'ol/source/OSM'; |
|
|
|
import OlSourceTileJson from 'ol/source/TileJSON'; |
|
|
|
import OlSourceTileJson from 'ol/source/TileJSON'; |
|
|
|
import OlLayerGroup from 'ol/layer/Group'; |
|
|
|
import OlLayerGroup from 'ol/layer/Group'; |
|
|
|
import OlSourceTileWMS from 'ol/source/TileWMS'; |
|
|
|
import OlSourceTileWMS from 'ol/source/TileWMS'; |
|
|
|
// import OlLayerSwitcher from 'ol/control/LayerSwitcher';
|
|
|
|
|
|
|
|
import {fromLonLat, transformExtent} from 'ol/proj'; |
|
|
|
import {fromLonLat, transformExtent} from 'ol/proj'; |
|
|
|
import {Vector as VectorSource, XYZ as XYZSource, Cluster} from 'ol/source'; |
|
|
|
import {Vector as VectorSource, XYZ as XYZSource, Cluster} from 'ol/source'; |
|
|
|
import Overlay from 'ol/Overlay'; |
|
|
|
import Overlay from 'ol/Overlay'; |
|
|
@ -98,20 +96,13 @@ import { |
|
|
|
import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil'; |
|
|
|
import CapabilitiesUtil from '@terrestris/ol-util/dist/CapabilitiesUtil/CapabilitiesUtil'; |
|
|
|
import LayerSwitcher from '@terrestris/react-geo/dist/LayerSwitcher/LayerSwitcher'; |
|
|
|
import LayerSwitcher from '@terrestris/react-geo/dist/LayerSwitcher/LayerSwitcher'; |
|
|
|
import axios from 'axios'; |
|
|
|
import axios from 'axios'; |
|
|
|
// import { PopupContainer } from '../../components/PopupContainer';
|
|
|
|
|
|
|
|
import PopupContainer from '../../components/PopupContainer'; |
|
|
|
import PopupContainer from '../../components/PopupContainer'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
AppHeader |
|
|
|
AppHeader |
|
|
|
} from '@coreui/react'; |
|
|
|
} from '@coreui/react'; |
|
|
|
// import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem,
|
|
|
|
|
|
|
|
// InputGroup, Input, InputGroupAddon, InputGroupText, Button
|
|
|
|
|
|
|
|
// } from 'reactstrap';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const DefaultHeader = React.lazy(() => import('../../containers/DefaultLayout/DefaultHeader'));
|
|
|
|
|
|
|
|
// import MapHeader from './MapHeader';
|
|
|
|
|
|
|
|
import MapHeader from '../../components/MapHeader'; |
|
|
|
import MapHeader from '../../components/MapHeader'; |
|
|
|
import MapToolbar from '../../components/MapToolbar'; |
|
|
|
import MapToolbar from '../../components/MapToolbar'; |
|
|
|
// import MapLayerSwitcher from '../../components/MapLayerSwitcher';
|
|
|
|
|
|
|
|
import { appConfig, setRequestMapHeader, layerStyleUrl } from '../../const/MapConst.js'; |
|
|
|
import { appConfig, setRequestMapHeader, layerStyleUrl } from '../../const/MapConst.js'; |
|
|
|
import { Icon } from '@iconify/react'; |
|
|
|
import { Icon } from '@iconify/react'; |
|
|
|
import imageOutline from '@iconify/icons-ion/image-outline'; |
|
|
|
import imageOutline from '@iconify/icons-ion/image-outline'; |
|
|
@ -123,23 +114,14 @@ import createOutline from '@iconify/icons-ion/create-outline'; |
|
|
|
import contractIcon from '@iconify/icons-ion/contract'; |
|
|
|
import contractIcon from '@iconify/icons-ion/contract'; |
|
|
|
import {Col, Row} from 'reactstrap'; |
|
|
|
import {Col, Row} from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
|
|
// import {
|
|
|
|
|
|
|
|
// custom, //name spaces
|
|
|
|
|
|
|
|
// //group
|
|
|
|
|
|
|
|
// //objects
|
|
|
|
|
|
|
|
// } from "react-openlayers";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const MappifiedNominatimSearch = mappify(NominatimSearch); |
|
|
|
const MappifiedNominatimSearch = mappify(NominatimSearch); |
|
|
|
const MappifiedMeasureButton = mappify(MeasureButton); |
|
|
|
const MappifiedMeasureButton = mappify(MeasureButton); |
|
|
|
// const MappifiedLayerTree = mappify(LayerTree);
|
|
|
|
|
|
|
|
const Map = mappify(onDropAware(MapComponent)); |
|
|
|
const Map = mappify(onDropAware(MapComponent)); |
|
|
|
|
|
|
|
|
|
|
|
// const center = [ 788453.4890155146, 6573085.729161344 ];
|
|
|
|
|
|
|
|
const projection = 'EPSG:3857'; //default
|
|
|
|
const projection = 'EPSG:3857'; //default
|
|
|
|
const projection4326 = 'EPSG:4326'; |
|
|
|
const projection4326 = 'EPSG:4326'; |
|
|
|
// const projection = 'EPSG:4326'; // lat long
|
|
|
|
|
|
|
|
// Indonesia
|
|
|
|
|
|
|
|
const lat = -2.6000285; |
|
|
|
const lat = -2.6000285; |
|
|
|
const lon = 118.015776; |
|
|
|
const lon = 118.015776; |
|
|
|
const zoom = 5; |
|
|
|
const zoom = 5; |
|
|
@ -464,7 +446,6 @@ const tanah_kantor_instansi_pemerintah = new OlLayerTile({ |
|
|
|
}); |
|
|
|
}); |
|
|
|
}*/ |
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
|
|
// map.on('postcompose', map.updateSize);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*const overlay = new Overlay({ |
|
|
|
/*const overlay = new Overlay({ |
|
|
|
element: document.getElementById('popup'), |
|
|
|
element: document.getElementById('popup'), |
|
|
@ -474,14 +455,7 @@ const tanah_kantor_instansi_pemerintah = new OlLayerTile({ |
|
|
|
} |
|
|
|
} |
|
|
|
});*/ |
|
|
|
});*/ |
|
|
|
|
|
|
|
|
|
|
|
// const popupClick = () => {
|
|
|
|
|
|
|
|
// alert('hellawwww');
|
|
|
|
|
|
|
|
// console.log('hellaawww');
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const popupC = (
|
|
|
|
|
|
|
|
// <button onClick={popupClick}>Helloww</button>
|
|
|
|
|
|
|
|
// )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*class PopupC extends Component { |
|
|
|
/*class PopupC extends Component { |
|
|
|
constructor(props) { |
|
|
|
constructor(props) { |
|
|
|