Introduction to Modern Web Development 6 - UI Components

Resources

store.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue'
import Vuex from 'vuex'
import parks from './assets/parks.json'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    parks: parks,
    selected: null
  },
  mutations: {
    selected(state, props) {
      state.selected = props
    }
  },
  actions: {

  }
})
Map.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <div id="map">Hi</div>
</template>

<script>
  import 'leaflet/dist/leaflet.css';
  import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
  import * as L from 'leaflet';
  import 'leaflet-defaulticon-compatibility';

  export default {
    name: "my-map",
    mounted() {
      let _this = this

      var map = L.map('map').setView([35.26, -80.84], 10);

      L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
      }).addTo(map);

      L.geoJSON(_this.parks, {
        onEachFeature: function(feature, layer) {
          layer.bindPopup(feature.properties.prkname)
          layer.on({
            click: function(e) {
              map.setView(feature.geometry.coordinates.reverse(), 14)
              _this.$store.commit("selected", feature.properties)
            }
          })
        }
      }).addTo(map);
    },
    computed: {
      parks() {
        return this.$store.state.parks
      }
    }
  }
</script>

<style scoped>
#map {
  width: 100%;
  height: 500px;
}
</style>
Info.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div v-if="selected">
    <h3>{{selected.prkname}}</h3>
    <p>
      {{selected.prktype}} <br> {{selected.prkaddr}}
    </p>
  </div>
</template>

<script>
  export default {
    name: "info",
    computed: {
      selected() {
        return this.$store.state.selected 
      }
    },
    
  }
</script>

<style scoped>

</style>