Map vs Building name discrepancy

[solderq35]

Map page (https://dashboard.sustainability.oregonstate.edu/#/map) and Building List Page (https://dashboard.sustainability.oregonstate.edu/#/buildings) have slightly different names for buildings (e.g. Arnold Cafeteria on Map vs Arnold Dining Hall on Building List page).

This is because Building list calls a VueX frontend state function, while Map calls Openstreet API for building names.

It's a good idea to consolidate this, especially if we may be adding buildings in future that aren't in OpenStreet. Right now we're hard coding OSU Operations building name into our frontend code, for Map.

Map relevant code

https://github.com/OSU-Sustainability-Office/energy-dashboard/blob/master/src/components/map/map.vue#L209

Building list relevant code

https://github.com/OSU-Sustainability-Office/energy-dashboard/blob/master/src/components/building_list/building_list.vue#L94

Openstreetmap

• https://www.openstreetmap.org

• https://github.com/OSU-Sustainability-Office/energy-dashboard/blob/master/src/store/api.js#L70C10-L70C53

• https://wiki.openstreetmap.org/wiki/Planet.osm

VueX

• https://vuex.vuejs.org/guide/#the-simplest-store
• https://vuex.vuejs.org/guide/getters.html

SQL Database

Buildings Table (just for reference, use the equivalent this.$store.getters['map/buildings'] when coding)

• SELECT * from buildings

Code Reference logs

• src\components\map\map.vue line 207 ish

  •    layer.on( 'mouseover', e => {
         console.log(this.$store.getters['map/buildings']) // buildings table name / id etc should be here
         console.log(e.target.feature)
         console.log(e.target.feature.id) // openstreetmap building way
         console.log(e.target.feature.properties.id) // openstreetmap building id
         console.log(e.target.feature.properties.name) // openstreetmap building name
    

  • EDIT: Changed layer.on( 'mouseover', function ( e ) { to layer.on( 'mouseover', e => {, fixed not being able to access this variables in this section
  • Copied syntax of layer.on( 'click', e => { a few lines up in map.vue file. Should be a harmless change, but watch for any bugs or performance issues
• src\components\building_list\building_list.vue line 94 ish

  •    let buildings = this.$store.getters['map/buildings']
       console.log(buildings)
       // console.log(buildings.geoJSON.id)  // openstreetmap building way
       // console.log(buildings.id) // buildings table id
    

[s-egge]

Code Reference Logs

Building off of the above code, all console.log's in the same mouseover function:

• console.log(this.$store.getters['map/buildings'])

  • This is a building getter function that takes the building id
    

• console.log(e.target.feature)

  • 

• console.log(this.$store.getters['map/buildings']( e.target.feature.properties.id ))

  • The building grabbed here has a name property that comes from the building list, this is the name we want to use
    
    If you expand geoJSON, you can see the id matches from the OpenStreetMap information, but the name does not, this is where the discrepancy was coming from
    

• To summarize, this.$store.getters['map/buildings']( e.target.feature.properties.id ).name will give the correct building name as it uses the same route as Building List to grab the building