l-map(
  
  :zoom.sync="journey.leg_get().map.zoom",
  :center.sync="journey.leg_get().map.center",
  style="padding-top: 100%"
  ref="map"
)
  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="map_override.active",
    :lat-lng="map_override.center"
  )
    l-icon(v-html="generate_marker('plus', 'darkgreen')")

  l-marker(
    v-if="journey.data.main[idx].hotel",
    :lat-lng="journey.data.main[idx].hotel.latlon"
  )
    l-icon(v-html="generate_marker(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="edit_active")
        .row.input(style="margin-bottom:0;")
          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, index) in journey.data.main[idx].places.activities",
    :key="'activities'+index",
    :lat-lng="place.latlon"
  )
    l-icon(
        v-if="place.step == journey.sel_day",
        v-html="generate_marker(place)"
      )
    l-icon(
        v-else-if="place.step == -1 || place.step == undefined",
        v-html="generate_marker(place, 'gray')"
      )
    l-icon(v-else-if="edit_active", v-html="generate_marker(place, 'lightgray')")
    l-icon(v-else)
    l-popup
      h1.row.text-medium.text-center {{ place.sname }}
      span.row.text-small.text-gray {{ place.display_name }}
      span(v-if="edit_active")
        .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.sel_day"
        ) +
      span.row.text-small.text-dark(v-else) {{ place.notes }}
  l-marker(
    v-for="(place, index) in journey.data.main[idx].places.restaurants",
      :key="'restaurants'+index"
    :lat-lng="place.latlon"
  )
    l-icon(v-html="generate_marker(place, 'cadetblue')")
    l-popup
      h1.row.text-medium.text-center {{ place.sname }}
      span.row.text-small.text-gray {{ place.display_name }}
      span(v-if="edit_active")
        .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 }}

  div(v-for= "travel in journey.data.main[idx].travel")
    l-polyline(:lat-lngs="travel.path" :color="travel.color || 'gray'")
    l-marker(
      v-for="(place, index) in travel.path"
      :key="'plane'+index"
      :lat-lng="place"
    )
      l-icon(v-html="generate_icon('plane', travel.color || 'gray', generate_rotation(index,travel.path))")