Remove google maps, use OpenStreetMap instead #88
Conversation
![hound[bot]](https://avatars.githubusercontent.com/in/3598?s=60&v=4){kind=small}
| return feature; | ||
| } | ||
|
|
||
| export default EvNotifyMap; |
There was a problem hiding this comment.
'export' is only available in ES6 (use 'esversion: 6').
|
|
||
| function createMarker(coordinates, src) { | ||
| const feature = new Feature({geometry: new Point(coordinates)}); | ||
| feature.setStyle(new Style({image: new Icon({src, anchor: [0.5, 1]})})); |
There was a problem hiding this comment.
'object short notation' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| }; | ||
|
|
||
| function createMarker(coordinates, src) { | ||
| const feature = new Feature({geometry: new Point(coordinates)}); |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| }) | ||
| })); | ||
| this.map.on('click', event => { | ||
| this.map.forEachFeatureAtPixel(event.pixel, feature => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
| features: [marker] | ||
| }) | ||
| })); | ||
| this.map.on('click', event => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
| const start = createMarker(coordinates[0], require('../assets/marker-start.svg')); | ||
| const end = createMarker(coordinates[coordinates.length - 1], require('../assets/marker-finish.svg')); | ||
| const pathDrivenLineString = new LineString(coordinates); | ||
| const pathDrivenFeature = new Feature({ |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
|
|
||
| const start = createMarker(coordinates[0], require('../assets/marker-start.svg')); | ||
| const end = createMarker(coordinates[coordinates.length - 1], require('../assets/marker-finish.svg')); | ||
| const pathDrivenLineString = new LineString(coordinates); |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| .map(value => fromLonLat([value.longitude, value.latitude])); | ||
|
|
||
| const start = createMarker(coordinates[0], require('../assets/marker-start.svg')); | ||
| const end = createMarker(coordinates[coordinates.length - 1], require('../assets/marker-finish.svg')); |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| .filter(value => value.longitude != null && value.latitude != null) | ||
| .map(value => fromLonLat([value.longitude, value.latitude])); | ||
|
|
||
| const start = createMarker(coordinates[0], require('../assets/marker-start.svg')); |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| EvNotifyMap.prototype.addLog = function (log) { | ||
| const coordinates = log.stats | ||
| .filter(value => value.longitude != null && value.latitude != null) | ||
| .map(value => fromLonLat([value.longitude, value.latitude])); |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
yankee42
force-pushed
the
openstreetmap
branch
from
6f59f09
to
78eacd7
Compare
| Popup.prototype.show = function (heading, contentHtml, feature) { | ||
| this.headingElement.innerText = heading; | ||
| this.bodyElement.innerHTML = contentHtml; | ||
| const extent = feature.getGeometry().getExtent(); |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| }); | ||
| }); | ||
|
|
||
| this.bodyElement = element(root, 'div', body => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
|
|
||
| element(head, 'a', closeElement => { | ||
| closeElement.setAttribute('href', 'javascript:void(0)'); | ||
| closeElement.addEventListener('click', () => this.hide()); |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
| this.headingElement = element(head, 'h1'); | ||
|
|
||
| element(head, 'a', closeElement => { | ||
| closeElement.setAttribute('href', 'javascript:void(0)'); |
| head.setAttribute('class', 'map-popup-head'); | ||
| this.headingElement = element(head, 'h1'); | ||
|
|
||
| element(head, 'a', closeElement => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
| import VectorSource from 'ol/source/Vector'; | ||
| import Point from 'ol/geom/Point'; | ||
| import {Icon, Style, Stroke} from 'ol/style'; | ||
| import MomentJS from 'moment'; |
There was a problem hiding this comment.
'import' is only available in ES6 (use 'esversion: 6').
| import Feature from 'ol/Feature'; | ||
| import VectorSource from 'ol/source/Vector'; | ||
| import Point from 'ol/geom/Point'; | ||
| import {Icon, Style, Stroke} from 'ol/style'; |
There was a problem hiding this comment.
'import' is only available in ES6 (use 'esversion: 6').
| import VectorLayer from 'ol/layer/Vector'; | ||
| import Feature from 'ol/Feature'; | ||
| import VectorSource from 'ol/source/Vector'; | ||
| import Point from 'ol/geom/Point'; |
There was a problem hiding this comment.
'import' is only available in ES6 (use 'esversion: 6').
| import LineString from 'ol/geom/LineString'; | ||
| import VectorLayer from 'ol/layer/Vector'; | ||
| import Feature from 'ol/Feature'; | ||
| import VectorSource from 'ol/source/Vector'; |
There was a problem hiding this comment.
'import' is only available in ES6 (use 'esversion: 6').
| import OSM from 'ol/source/OSM'; | ||
| import LineString from 'ol/geom/LineString'; | ||
| import VectorLayer from 'ol/layer/Vector'; | ||
| import Feature from 'ol/Feature'; |
There was a problem hiding this comment.
'import' is only available in ES6 (use 'esversion: 6').
In the triplog and also on the dashboard for last known position the map is not directly shown. There is a "why?" link which says:
That's strange... OpenStreetMap is free and... at least in my opinion also clearly superior to Google Maps. You can't find that this bad, because in the Android-App it is already OpenStreetMap. Why not use it on the Web UI as well?
Here is a PR to replace Google Maps with OSM. It's work in progress however. I have a problem with the Map not initially drawing. As soon as I resize the browser window a tiny bit, the map comes up fine. Why? I have never worked with vue, so in case it has to do with something that Vue does I wouldn't know. (For that matter, the last time I coded plain JavaScript or used OpenLayers is many years ago...). So maybe another pair of eyes can see what I cannot see?
BTW: A little confusing: Some files are indented with 4 spaces, others with 2 spaces. I didn't really know what to do...
I also added some typedefs for the Log. I get totally lost without automatic code completion ;-). However some values seem to be always
nullfor me. Maybe you got some improvements there.