Skip to content


A profile control.


    style="height: 400px"
    <ol-view ref="view" :center="center" :zoom="zoom" />

      <ol-source-osm />

    <!-- vector data path -->
          <ol-style-stroke color="red" :width="3"></ol-style-stroke>

    <!-- Hover handling -->
        <ol-style-stroke color="red" :width="3"></ol-style-stroke>

    <!-- point -->
          <ol-geom-point v-if="point" :coordinates="point"></ol-geom-point>
            <ol-style-circle :radius="3">
              <ol-style-fill color="green"></ol-style-fill>
              <ol-style-stroke color="green" :width="10"></ol-style-stroke>


<script setup lang="ts">
import type { Feature } from "ol";
import type Profile from "ol-ext/control/Profile";
import type { Coordinate } from "ol/coordinate";
import type { Point } from "ol/geom";
import type { SelectEvent } from "ol/interaction/Select";
import type { VectorSourceEvent } from "ol/source/Vector";
import { ref, inject } from "vue";

const center = ref([650000, 5407500]);
const zoom = ref(13);
const profileFeature = ref(null);
const profileControl = ref<{ control: Profile } | null>(null);
const point = ref<Coordinate | null>(null);

const selectConditions = inject("ol-selectconditions");
const format = inject("ol-format");

const gpx = new format.GPX();
const selectCondition = selectConditions.pointerMove;

function handleFeaturesloadend(event: VectorSourceEvent) {
  profileFeature.value =[0];
  if (profileFeature.value) {

function featureSelected(event: SelectEvent) {
  const selected = event.selected[0] as Feature<Point>;
  if (selected) {
    const p = selected
    if (p) {
      drawPoint("over", p);

function over(event: { type: "over" | "out"; coord: Coordinate }) {
  drawPoint("over", event.coord);

function out(event: { type: "over" | "out"; coord: Coordinate }) {
  drawPoint(event.type, event.coord);

function drawPoint(type: "over" | "out", coord: Coordinate) {
  const profile = profileControl.value?.control;
  if (!profile) return;
  if (coord) {
    point.value = coord;
    const position = profile.showAt(coord);
    profile.popup(`${position[2]} m`);
  } else {
    point.value = null;


Props from OpenLayers

Properties are passed-trough from ol-ext directly. Their types and default values can be checked-out in the official OpenLayers docs: ol-ext/control/Profile. Only some properties deviate caused by reserved keywords from Vue / HTML. This deviating props are described in the section below.

Deviating Properties



You have access to all Events from the underlying ol-ext Profile Control API (without the event: prefix). Check out the official OpenLayers docs to see the available events tht will be fired.

For example:

<ol-profile-control @over="handleOver" @out="handleOut" />


You have access to all Methods from the underlying ol-ext Profile Control API. Check out the official OpenLayers docs to see the available methods.

To access the source, you can use a ref() as shown below:

  <!-- ... -->
  <ol-profile-control ref="profileControlRef" />
  <!-- ... -->

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type Profile from "ol-ext/controls/Profile";

const profileControlRef = ref<{ control: Profile }>(null);

onMounted(() => {
  const profile: Profile = profileControlRef.value?.control;
  // call your method on `profile`