OTM/template/module/map.pug

l-map(
  :zoom.sync="journey_data.main[idx].map.zoom",
  :center.sync="journey_data.main[idx].map.center",
  style="padding-top: 100%"
)
  l-tile-layer(
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    attribution="© <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"
  )
  l-control-scale(position="topright", :imperial="false", :metric="true")
  l-marker(
    v-if="journey_data.main[idx].hotel",
    :lat-lng="journey_data.main[idx].hotel.latlon"
  )
    l-icon
      div(v-html="generate_icon(journey_data.main[idx].hotel, 'darkblue')")
    l-popup
      h1.row.text-medium.text-center {{ journey_data.main[idx].hotel.sname }}
      span.row.text-small.text-gray {{ journey_data.main[idx].hotel.display_name }}
      span(v-if="journey_edit")
        .row.input
          textarea-autosize.col-12.col-sm-12.text-small(
            placeholder="Notes",
            v-model="journey_data.main[idx].hotel.notes",
            :min-height="30",
            :max-height="350"
          )
      span.row.text-small.text-white(v-else) {{ journey_data.main[idx].hotel.notes }}
  l-marker(
    v-for="place in journey_data.main[idx].places.activities",
    :lat-lng="place.latlon"
  )
    l-icon
      div(
        v-if="place.step == journey_step_data.day",
        v-html="generate_icon(place)"
      )
      div(
        v-else-if="place.step == -1 || place.step == undefined",
        v-html="generate_icon(place, 'gray')"
      )
      div(v-else-if="journey_edit", v-html="generate_icon(place, 'lightgray')")
      div(v-else)
    l-popup
      h1.row.text-medium.text-center {{ place.sname }}
      span.row.text-small.text-gray {{ place.display_name }}
      span(v-if="journey_edit")
        .row.input
          textarea-autosize.col-12.col-sm-12.text-small(
            placeholder="Notes",
            v-model="place.notes",
            :min-height="30",
            :max-height="350"
          )
        a.leaflet-popup-close-button.text-gray(
          style="right: 0px; visibility: visible",
          href="#rm",
          v-on:click.prevent="place.step = -1"
        ) -
        a.leaflet-popup-close-button.text-gray(
          style="right: 16px; visibility: visible",
          href="#ad",
          v-on:click.prevent="place.step = journey_step_data.day"
        ) +
      span.row.text-small.text-dark(v-else) {{ place.notes }}

  l-marker(
    v-for="place in journey_data.main[idx].places.restaurants",
    :lat-lng.sync="place.latlon"
  )
    l-icon
      div(v-html="generate_icon(place, 'cadetblue')")
    l-popup
      h1.row.text-medium.text-center {{ place.sname }}
      span.row.text-small.text-gray {{ place.display_name }}
      span(v-if="journey_edit")
        .row.input
          textarea-autosize.col-12.col-sm-12.text-small(
            placeholder="Notes",
            v-model="place.notes",
            :min-height="30",
            :max-height="350"
          )
      span.row.text-small.text-dark(v-else) {{ place.notes }}