Loading…
([...e.target.querySelectorAll('.tooltip')].forEach(el => el.toggleVisibility(false)))" @wheel.prevent.stop="0" class="position-relative" data-marker-wrapper is="vue:data-utils" render-as="div" v-if="landmass && countryGeometries" v-pan-zoom="{ minScale: 1, maxScale: 20 }" v-slot="{ projectionState,
geoPath = createGeoPath(projectionState.projection),
groupedCountryGeometry = group(countryGeometries || [], c => c.name),
portsByBasin = group(ports || [], p => p.seaBasin)
}">
{{ port.port }}
{{ port.description }}
{{ activity }}
{{ name }}
{{ portsByBasin.get(name)?.length || 0 }} ports in {{ group(portsByBasin.get(name) || [], p => p.country).size }} countries
e.view.document.getElementById(`${id}_map`)?.dispatchEvent(new e.view.CustomEvent('center', { detail: { lat: port.latitudeDecimal, lon: port.longitudeDecimal } }))" class="fs-5 fw-bold cursor-pointer">{{ port.port }}
{{ port.description }}
Area
Investments
{{ year }}
Ports overview
{{ JSON.stringify(ports, null, 2) }}