2 files changed, 9 insertions, 101 deletions
diff --git a/app/javascript/packs/routes/edit.js b/app/javascript/packs/routes/edit.js
index d6ceed60f..b787bec97 100644
--- a/app/javascript/packs/routes/edit.js
+++ b/app/javascript/packs/routes/edit.js
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
@@ -12,7 +14,7 @@ datas = JSON.parse(decodeURIComponent(datas))
 
 // logger, DO NOT REMOVE
 var applyMiddleware = require('redux').applyMiddleware
-var createLogger = require('redux-logger')
+import {createLogger} from 'redux-logger';
 var thunkMiddleware = require('redux-thunk').default
 var promise = require('redux-promise')
 
diff --git a/app/javascript/packs/routes/show.js b/app/javascript/packs/routes/show.js
index 7f14a6f11..c20de0800 100644
--- a/app/javascript/packs/routes/show.js
+++ b/app/javascript/packs/routes/show.js
@@ -1,102 +1,8 @@
 import clone from '../../helpers/clone'
+import RoutesMap from '../../helpers/routes_map'
+
 let route = clone(window, "route", true)
 route = JSON.parse(decodeURIComponent(route))
-
-const geoColPts = []
-const geoColLns = []
-const geoColEdges = [
-  new ol.Feature({
-    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]))
-  }),
-  new ol.Feature({
-    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[route.length - 1].longitude), parseFloat(route[route.length - 1].latitude)]))
-  })
-]
-route.forEach(function (stop, i) {
-  if (i < route.length - 1) {
-    geoColLns.push(new ol.Feature({
-      geometry: new ol.geom.LineString([
-        ol.proj.fromLonLat([parseFloat(route[i].longitude), parseFloat(route[i].latitude)]),
-        ol.proj.fromLonLat([parseFloat(route[i + 1].longitude), parseFloat(route[i + 1].latitude)])
-      ])
-    }))
-  }
-  geoColPts.push(new ol.Feature({
-    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(stop.longitude), parseFloat(stop.latitude)]))
-  })
-  )
-})
-var edgeStyles = new ol.style.Style({
-  image: new ol.style.Circle(({
-    radius: 5,
-    stroke: new ol.style.Stroke({
-      color: '#007fbb',
-      width: 2
-    }),
-    fill: new ol.style.Fill({
-      color: '#007fbb',
-      width: 2
-    })
-  }))
-})
-var defaultStyles = new ol.style.Style({
-  image: new ol.style.Circle(({
-    radius: 4,
-    stroke: new ol.style.Stroke({
-      color: '#007fbb',
-      width: 2
-    }),
-    fill: new ol.style.Fill({
-      color: '#ffffff',
-      width: 2
-    })
-  }))
-})
-var lineStyle = new ol.style.Style({
-  stroke: new ol.style.Stroke({
-    color: '#007fbb',
-    width: 3
-  })
-})
-
-var vectorPtsLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    features: geoColPts
-  }),
-  style: defaultStyles,
-  zIndex: 2
-})
-var vectorEdgesLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    features: geoColEdges
-  }),
-  style: edgeStyles,
-  zIndex: 3
-})
-var vectorLnsLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    features: geoColLns
-  }),
-  style: [lineStyle],
-  zIndex: 1
-})
-
-var map = new ol.Map({
-  target: 'route_map',
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    }),
-    vectorPtsLayer,
-    vectorEdgesLayer,
-    vectorLnsLayer
-  ],
-  controls: [new ol.control.ScaleLine(), new ol.control.Zoom(), new ol.control.ZoomSlider()],
-  interactions: ol.interaction.defaults({
-    zoom: true
-  }),
-  view: new ol.View({
-    center: ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]),
-    zoom: 13
-  })
-});
+var map = new RoutesMap('route_map')
+map.addRoute(route)
+map.fitZoom()