diff --git a/src/Map/FloatingMapLogo/FloatingMapLogo.example.md b/src/Map/FloatingMapLogo/FloatingMapLogo.example.md index 7594e784f1..1c4892019d 100644 --- a/src/Map/FloatingMapLogo/FloatingMapLogo.example.md +++ b/src/Map/FloatingMapLogo/FloatingMapLogo.example.md @@ -1,58 +1,51 @@ This is a example containing a map component and a floating map logo ```jsx -import './FloatingMapLogo.less'; - -import FloatingMapLogo from '@terrestris/react-geo/dist/Map/FloatingMapLogo/FloatingMapLogo'; +import FloatingMapLogo from '@terrestris/react-util/dist/Components/FloatingMapLogo/FloatingMapLogo'; +import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent'; import OlLayerTile from 'ol/layer/Tile'; import OlMap from 'ol/Map'; +import { + fromLonLat +} from 'ol/proj'; import OlSourceOsm from 'ol/source/OSM'; import OlView from 'ol/View'; -import * as React from 'react'; +import React from 'react'; import logo from '../../../assets/user.png'; -class FloatingMapLogoExample extends React.Component { - - constructor(props) { - - super(props); - - this.mapDivId = `map-${Math.random()}`; - - this.map = new OlMap({ - view: new OlView({ - center: [801045, 6577113], - zoom: 9 - }), - layers: [ - new OlLayerTile({ - source: new OlSourceOsm() - }) - ] - }); - } - - componentDidMount() { - this.map.setTarget(this.mapDivId); - } - - render() { - return ( -
- -
- ); - } -} +const FloatingMapLogoExample = () => { + + const map = new OlMap({ + view: new OlView({ + center: fromLonLat([ + 7.1219992, + 50.729458 + ]), + zoom: 11 + }), + layers: [ + new OlLayerTile({ + source: new OlSourceOsm() + }) + ] + }); + + return ( + + + + ); + +}; ``` diff --git a/src/Map/FloatingMapLogo/FloatingMapLogo.less b/src/Map/FloatingMapLogo/FloatingMapLogo.less deleted file mode 100644 index e37e8c1a81..0000000000 --- a/src/Map/FloatingMapLogo/FloatingMapLogo.less +++ /dev/null @@ -1,8 +0,0 @@ -.react-geo-floatingmaplogo { - position: absolute; - left: 5px; - bottom: 5px; - background-color: fade(white, 50%); - border-radius: 5px; - z-index: 10; -}