Map.vue

Map.vue holds a lot of code that HAS TO be IN THAT FILE for making the map work.

Some of it is general for the whole app, like making a marker show the searched address, or turning on imagery.

Some of it is to make specific map functionality work for a specific topic, such as showing nearby information as circle markers in the Nearby Activity topic, or allowing regmaps to be toggled on and off in the Deeds topic.

Some of it is specific to making cyclomedia and eagleview (formerly pictometry) work, and showing a camera icon and viewcone on the map to indicate where the cyclomedia imagery is taken from.

Sections of the file:

• $config
• keep image sources as computed props so that the publicPath can be used, for pushing the app to different environments
• Map.vue onMounted
  • create the maplibre map
  • add the address marker and camera icon sources
  • add the unchanged maplibre controls
  • map.on event callbacks setup
    • whenever the map moves, check whether the cyclomedia recording circles are on and update them if so
    • if the L&I topic is selected, and a building footprint is clicked, set the selected building number in the LiStore
    • if a cyclomedia recording circle is clicked, set its coordinates in the MapStore
    • if a nearby circle marker is clicked or hovered on, set its id in the MainStore as the hoveredStateId
    • if the map is clicked (not on the layers above), if in draw mode, a polygon is drawn, otherwise, the lngLat is pushed to the app route
  • mapbox-gl-draw is initialized
  • map is added as Mapstore.map
• General geocode/parcel/topic watches
  • watch AddressStore.addressData for moving map center and setting zoom
  • watch address pwd coordinates for moving address marker
  • watch dor parcel coordinates for moving dor parcel
  • watch topic for changing map style
• allow the imagery to be toggled on and off, and set to different images
• Features specific to different topics
  • for the Deeds topic, watch selectedRegmap for adding and changing regmap layer
  • Opacity changes
    • for the Deeds topic, change opacity of regmap layer
    • for the Zoning topic, change opacity of zoning layer
    • for the CityAtlas Stormwater topic, change opacity of stormwater layer
  • for the L&I topic, watch selected building for changing building footprint color
  • for the Voting topic, watch voting division and polling place for changing map center and zoom
  • for the Nearby topic, watch the clicked row to fly to its coordinates and show a popup
  • for the Nearby topic, watch the id of the circle marker that is hovered on to change the color of the circle
• the distance measure control is added in the template with a ref, so that functions within the component can be called from this file
• Cyclomedia
  • toggle cyclomedia on and off
  • an object class called CyclomediaRecordingsClient is used for adding the cyclomedia recordings circles to the map
  • everything for adding, moving, and orienting the cyclomedia camera icon and viewcone
• toggle eagleview on and off