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>
   )
 }