diff options
| -rw-r--r-- | app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js | 62 | ||||
| -rw-r--r-- | app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js | 13 |
2 files changed, 53 insertions, 22 deletions
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js index d9f6eb909..95e0726cb 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js +++ b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js @@ -36,19 +36,19 @@ class OlMap extends Component{ if(prevProps.value.olMap.isOpened == false && this.props.value.olMap.isOpened == true){ var that = this var vectorLayer = new ol.layer.Vector({ - source: new ol.source.Vector({ - format: new ol.format.GeoJSON(), - url: 'https://gist.githubusercontent.com/ThomasHaddad/7dcc32af24feea2fc4a329445c91af17/raw/4346a71a37326f055ff4fe576eaeb0040596c916/5.geojson' - }), - style: new ol.style.Style({ - image: new ol.style.Circle(({ - radius: 4, - stroke: new ol.style.Stroke({ - color: '#000000', - width: 2 - }) - })) - }) + source: new ol.source.Vector({ + format: new ol.format.GeoJSON(), + url: 'https://gist.githubusercontent.com/ThomasHaddad/7dcc32af24feea2fc4a329445c91af17/raw/4346a71a37326f055ff4fe576eaeb0040596c916/5.geojson' + }), + style: new ol.style.Style({ + image: new ol.style.Circle(({ + radius: 4, + stroke: new ol.style.Stroke({ + color: '#000000', + width: 2 + }) + })) + }) }); var map = new ol.Map({ target: 'stoppoint_map' + that.props.index, @@ -70,6 +70,26 @@ class OlMap extends Component{ zoom: 18 }) }); + + // Selectable marker + var select = new ol.interaction.Select({ + style: new ol.style.Style({ + image: new ol.style.Circle(({ + radius: 4, + fill: new ol.style.Fill({ + color: '#000000' + }) + })) + }) + }); + map.addInteraction(select); + select.on('select', function(e) { + var data = e.target.getFeatures().getArray()[0]; + console.log('Selected item'); + console.log('id:' + data.getId()); + console.log('LonLat:' + data.getGeometry().getCoordinates()); + }); + // let extent = map.getView().calculateExtent(map.getSize()) // setTimeout(()=>{ // that.fetchApiForMap(extent, that.props.value.stoparea_id) @@ -81,7 +101,21 @@ class OlMap extends Component{ render() { if (this.props.value.olMap.isOpened) { - return <div id={"stoppoint_map" + this.props.index} className='map'></div> + return ( + <div className='row'> + <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4" style={{marginTop: 15}}> + <p><strong>Nom de l'arrêt : </strong>XXX</p> + <p className='small'><strong>Nom public : </strong>XXX</p> + <p className='small'><strong>N° d'enregistrement : </strong>XXX</p> + <p className='small'><strong>Réseau : </strong>XXX</p> + + <div className='btn btn-primary btn-sm'>Sélectionner</div> + </div> + <div className='col-lg-8 col-md-8 col-sm-8 col-xs-8'> + <div id={"stoppoint_map" + this.props.index} className='map'></div> + </div> + </div> + ) } else { return false } diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js index 34f797be8..fe4e9aa21 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js +++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js @@ -69,14 +69,11 @@ const StopPoint = (props) => { </div> </div> </div> - <div className="row"> - <div className='col-lg-12 col-md-12 col-sm-12 col-xs-12'> - <OlMap - value = {props.value} - index = {props.index} - /> - </div> - </div> + + <OlMap + value = {props.value} + index = {props.index} + /> </div> ) } |