import React from 'react' import PropTypes from 'prop-types' import { Map as OlMap, View } from 'ol' import { defaults as defaultsControl, Attribution, FullScreen, Rotate, ScaleLine, Zoom } from 'ol/control' import Feature from 'ol/Feature' import Point from 'ol/geom/Point' import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer' import { fromLonLat } from 'ol/proj' import { OSM, Vector as VectorSource } from 'ol/source' import { urlServeur } from '../utils/ParametersUtils' import { levelColor } from '../utils/FunctionUtils' import { Icon, Style } from 'ol/style' // Map class Map extends React.Component { componentDidMount() { const icon = urlServeur+'pictures/markers/PNG/map_cms_'+levelColor(this.props.level)+'.png' const feature = new Feature({ geometry: new Point(fromLonLat(this.props.coordinates)), }) const vectorSource = new VectorSource({ features: [feature], attributions: [ ' © Aquasys', ], }) const vectorLayer = new VectorLayer({ source: vectorSource, name: 'vectorLayer', zIndex: 1, style: new Style({ image: new Icon({ anchor: [0.5, 55], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: icon, size: [50, 60], scale: 0.75 }) }) }) // Define basic layer with OpenStreetMap const tileLayer = new TileLayer({ source: new OSM(), name: 'OSM', zIndex: 0 }) // Define the view of the map const view = new View({ maxZoom: 18, center: fromLonLat(this.props.coordinates), // center: [-244780.24508882355, 5986452.183179816], zoom: 9, }) // Define the scaleLine const scaleLine = new ScaleLine({ units: 'metric', }) // Define the button to rotate const rotate = new Rotate({ className: 'ol-rotate ol-custom-rotate', autoHide: false, tipLabel: 'Rotation vers le nord', }) // Define button to zoom const zoom = new Zoom({ className: 'ol-zoom ol-custom-zoom', zoomInTipLabel: 'Zoom +', zoomOutTipLabel: 'Zoom -', }) // Define the attribution const attribution = new Attribution({ className: 'ol-attribution ol-custom-attribution', tipLabel: 'Contributeurs', collapseLabel: 'X', collapsible: true, }) // Define button to put the map in full screen const fullScreen = new FullScreen({ className: 'ol-custom-full-screen', tipLabel: 'Plein écran', }) // Define the map const map = new OlMap({ layers: [tileLayer, vectorLayer], target: 'mapActu'+this.props.divId, view: view, controls: defaultsControl({ zoom: false, attribution: false, rotate: false }).extend([ scaleLine, rotate, zoom, attribution, fullScreen, ]) }) this.olMap = map } render() { return (
) } } Map.propTypes = { coordinates: PropTypes.arrayOf( PropTypes.number ), divId: PropTypes.number, level: PropTypes.number } export default Map