Skip to content

Commit

Permalink
Added Forecast Tool, fixed GNSS, refined event listener logic and lea…
Browse files Browse the repository at this point in the history 
…flet-kml logic, and removed need for Vuex store.
  • Loading branch information
cosmic-tichy committed Jun 18, 2020
1 parent 583ecaf commit 702bf19
Show file tree
Hide file tree
Showing 15 changed files with 404 additions and 149 deletions.
3 changes: 2 additions & 1 deletion frontend/package.json
View file
Expand Up @@ -16,14 +16,15 @@
"leaflet-easybutton": "^2.4.0",
"leaflet-geometryutil": "^0.9.3",
"leaflet-kml": "^1.0.1",
"leaflet-kmz": "^0.3.8",
"qs": "^6.9.4",
"vue": "^2.6.11",
"vue-resource": "^1.5.1",
"vue-router": "^3.3.3",
"vue2-leaflet": "^2.5.2",
"vuex": "^3.4.0",
"vuex-persistedstate": "^3.0.1",
"webpack-bundle-tracker": "^1.0.0-alpha.1"
"webpack-bundle-tracker": "0.4.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
Expand Down
141 changes: 141 additions & 0 deletions frontend/src/assets/test.kml
View file
@@ -0,0 +1,141 @@
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Folder>
<Placemark>
<description><![CDATA[
<a href="https://sideshow.jpl.nasa.gov/post/links/LTHM.html">
<img src="https://sideshow.jpl.nasa.gov/post/plots/LTHM.jpg" width="300" height="300">
</a>
]]></description>
<Style><IconStyle>
<color>FF78FF78</color>
<scale>0.500000</scale>
<Icon><href>https://maps.google.com/mapfiles/kml/paddle/wht-blank.png</href></Icon>
</IconStyle></Style>
<Point>
<coordinates>
-94.170158,39.575958,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<Style>
<LineStyle>
<color>FF0000FF</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<color>7F0000FF</color>
<fill>1</fill>
</PolyStyle>
</Style>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-94.167580,39.575958,0
-94.167636,39.576372,0
-94.167802,39.576767,0
-94.168072,39.577127,0
-94.168433,39.577435,0
-94.168869,39.577680,0
-94.169361,39.577849,0
-94.169889,39.577935,0
-94.170428,39.577935,0
-94.170955,39.577849,0
-94.171447,39.577680,0
-94.171884,39.577435,0
-94.172244,39.577127,0
-94.172514,39.576767,0
-94.172680,39.576372,0
-94.172737,39.575958,0
-94.172680,39.575545,0
-94.172514,39.575150,0
-94.172244,39.574790,0
-94.171884,39.574481,0
-94.171447,39.574237,0
-94.170955,39.574068,0
-94.170428,39.573982,0
-94.169889,39.573982,0
-94.169361,39.574068,0
-94.168869,39.574237,0
-94.168433,39.574481,0
-94.168072,39.574790,0
-94.167802,39.575150,0
-94.167636,39.575545,0
-94.167580,39.575958,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<description><![CDATA[
<a href="https://sideshow.jpl.nasa.gov/post/links/SLAI.html">
<img src="https://sideshow.jpl.nasa.gov/post/plots/SLAI.jpg" width="300" height="300">
</a>
]]></description>
<Style><IconStyle>
<color>FF78FF78</color>
<scale>0.500000</scale>
<Icon><href>https://maps.google.com/mapfiles/kml/paddle/wht-blank.png</href></Icon>
</IconStyle></Style>
<Point>
<coordinates>
-93.698874,41.900583,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<Style>
<LineStyle>
<color>FFFF0000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<color>7FFF0000</color>
<fill>1</fill>
</PolyStyle>
</Style>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-93.708997,41.900583,0
-93.708776,41.899016,0
-93.708122,41.897518,0
-93.707064,41.896154,0
-93.705647,41.894984,0
-93.703935,41.894058,0
-93.702002,41.893417,0
-93.699932,41.893090,0
-93.697816,41.893090,0
-93.695746,41.893417,0
-93.693813,41.894058,0
-93.692101,41.894984,0
-93.690685,41.896154,0
-93.689627,41.897518,0
-93.688973,41.899016,0
-93.688751,41.900583,0
-93.688973,41.902149,0
-93.689627,41.903647,0
-93.690685,41.905011,0
-93.692101,41.906182,0
-93.693813,41.907108,0
-93.695746,41.907748,0
-93.697816,41.908076,0
-93.699932,41.908076,0
-93.702002,41.907748,0
-93.703935,41.907108,0
-93.705647,41.906182,0
-93.707064,41.905011,0
-93.708122,41.903647,0
-93.708776,41.902149,0
-93.708997,41.900583,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</kml>
2 changes: 1 addition & 1 deletion frontend/src/components/MMCalc.vue
View file
@@ -1,5 +1,5 @@
<template>
<div>
<div class="tool">
<b-input-group prepend="Length" append="km">
<b-form-input v-model="mm_length" placeholder="249"></b-form-input>
</b-input-group>
Expand Down
17 changes: 11 additions & 6 deletions frontend/src/components/MapTools.vue
View file
Expand Up @@ -39,27 +39,32 @@
data() {
return {
selected: [],
ucerfUrl: "https://raw.githubusercontent.com/GeoGateway/GeoGatewayStaticResources/master/kmz/ucerf3_black.kml",
boundariesUrl: 'https://raw.githubusercontent.com/GeoGateway/GeoGatewayStaticResources/master/kmz/gz_2010_us_040_00_20m.kml',
coastsUrl: 'https://raw.githubusercontent.com/GeoGateway/GeoGatewayStaticResources/master/kmz/ne_50m_coastline.kml',
}
},
methods: {
updateLayer(l){
//Should the store be used in this case or is the event bus sufficient?
// Should the store be used in this case or is the event bus sufficient?
// TODO improve efficiency and utilize vue mutations to do this
switch (l) {
case 'ucerf':
this.mapTools.ucerf[0]=!this.mapTools.ucerf[0];
bus.$emit('UrlAddLayer', this.ucerfUrl, 'ucerfL')
break;
case 'kml':
this.mapTools.kml[0]=!this.mapTools.kml[0];
break;
case 'boundaries':
this.mapTools.boundaries[0]=!this.mapTools.boundaries[0];
bus.$emit('UrlAddLayer', this.boundariesUrl, 'boundariesL')
break;
case 'coasts':
this.mapTools.coasts[0]=!this.mapTools.coasts[0];
bus.$emit('UrlAddLayer', this.boundariesUrl, 'coastsL')
break;
}
bus.$emit('mapToolsLayer', l);
},
},
computed: {
Expand Down
120 changes: 48 additions & 72 deletions frontend/src/components/MyMap.vue
View file
Expand Up @@ -4,7 +4,7 @@
<ToolBar />
<div id="map">
</div>
<b-button id="refreshButton" @click="refreshLayers()">Refresh</b-button>
<!-- <b-button id="refreshButton" @click="refreshLayers()">Refresh</b-button>-->
</div>

</template>
Expand All @@ -18,6 +18,7 @@
import 'leaflet-draw'
import "leaflet-draw/dist/leaflet.draw.css";
import TopNav from "./TopNav";
import "leaflet-kmz"
// import axios from "axios";
// import GeometryUtil from 'leaflet-geometryutil'
Expand All @@ -30,6 +31,14 @@
data() {
return {
map: null,
'woForecastL': null,
'caForecastL': null,
'ucerfL': null,
'boundariesL': null,
'coastsL': null,
};
},
mounted() {
Expand All @@ -43,13 +52,31 @@
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
}).addTo(this.map);
bus.$on('mapToolsLayer', () =>
this.mapToolsLayer());
//global map layer event listeners
bus.$on('UrlAddLayer', (url, layerName) =>
this.kmlUrl(url, layerName));
bus.$on('TextAddLayer', (text, layerName)=>
this.kmlText(text, layerName));
bus.$on('drawToolbar', () =>
this.drawToolbar());
//convert to above abstracted event listener
bus.$on('gnssLayer', (text) =>
this.gnssLayer(text));
this.kmlText(text));
bus.$on('WoForecast', (text) =>
this.kmlText(text, 'woForecastL'));
bus.$on('CaForecast', (text) =>
this.kmlText(text, 'caForecastL'));
bus.$on('RemoveLayer', (name) =>
this.removeLayer(name));
},
Expand Down Expand Up @@ -92,48 +119,37 @@
console.log(this.gs_latitude, this.gs_longitude);
console.log(this.gs_height, this.gs_width)
}
});
},
mapToolsLayer(){
for(var key in this.mapToolsState){
if(this.mapToolsState[key][0] &&
this.globalLayers[key] === null){
this.kmlLayer(this.mapToolsState[key][1], key);
}else if(!(this.mapToolsState[key][0]) &&
this.globalLayers[key] != null) {
this.map.removeLayer(this.globalLayers[key]);
this.globalLayers[key] = null;
}
}
},
gnssLayer(kmltext){
// TODO make addLayer and removeLayer methods for use with $emit $on
// ie refine layer logic so this method is not necessary
kmlText(text, layerName){
// console.log(this.globalLayers.gnss1)
const parser = new DOMParser();
const kml = parser.parseFromString(kmltext, 'text/xml');
const track = new L.KML(kml);
this.map.addLayer(track);
const bounds = track.getBounds();
const kml = parser.parseFromString(text, 'text/xml');
this[layerName] = new L.KML(kml);
this.map.addLayer(this[layerName]);
const bounds = this[layerName].getBounds();
this.map.fitBounds(bounds);
},
kmlLayer(url, layer) {
kmlUrl(url, layerName) {
fetch(url).then(res => res.text())
.then(kmltext => {
const parser = new DOMParser();
var kml = parser.parseFromString(kmltext, "text/xml");
this.globalLayers[layer] = new L.KML(kml);
this.map.addLayer(this.globalLayers[layer]);
this.map.fitBounds(this.globalLayers[layer].getBounds());
this[layerName] = new L.KML(kml);
this.map.addLayer(this[layerName]);
this.map.fitBounds(this[layerName].getBounds());
});
},
removeLayer(layerName){
this.map.removeLayer(this[layerName])
this[layerName] = null;
}
},
computed: {
mapToolsState(){
Expand All @@ -145,46 +161,6 @@
globalLayers() {
return this.$store.state.globalLayers;
}
// kmltype_sel: {
// get(){
// return this.GNSS.formData.kmltype_sel;
// },
// set(value){
// this.$store.commit('setkml', value);
// }
// },
// latitude: {
// get(){
// return this.GNSS.formData.gs_latitude;
// },
// set(value){
// this.$store.commit('setLat', value);
// }
// },
// gs_longitude: {
// get(){
// return this.GNSS.formData.gs_longitude;
// },
// set(value){
// this.$store.commit('setLng', value);
// }
// },
// gs_width: {
// get(){
// return this.GNSS.formData.gs_width;
// },
// set(value){
// this.$store.commit('setWidth', value);
// }
// },
// height: {
// get(){
// return this.GNSS.formData.gs_height;
// },
// set(value){
// this.$store.commit('setHeight', value);
// }
// },
},
Expand Down

0 comments on commit 702bf19

Please sign in to comment.