ol-layerswitcherimage-control is frustrating base layers should be displayed as radio to only have one selected at a time by default From doc this is normally done by putting type='base' on the layer

We also need a user object to define custom groups

Describe the solution you'd like props on the component

Sorry about the cross-posting from Stackoverflow, but nobody is answering there.

I have a Vue 3 Composition API component using Vue Open Layers, iterating through an object array property on the component and creating a feature for each object. When a feature is selected, I want to access the original object's information, in this case, the name. How can I do this? Right now all I get access to is the array of coordinates which the feature was created from.

    <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:90vh; width: 80vw;" ref="map">

      <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"/>

      <ol-tile-layer>
        <ol-source-osm />
      </ol-tile-layer>
      <ol-interaction-select @select="featureSelected" :condition="selectCondition" >
        <ol-style>
          <ol-style-stroke color="red" :width="10"></ol-style-stroke>
          <ol-style-fill color="rgba(255,255,255,0.5)"></ol-style-fill>
        </ol-style>
      </ol-interaction-select>

      <ol-geolocation :projection="projection" @positionChanged="geoLocChange">
        <template v-slot="slotProps">
          <ol-vector-layer :zIndex="0">
            <ol-source-vector>
              <ol-feature ref="positionFeature">
                <ol-geom-point :coordinates="slotProps.position"></ol-geom-point>
                <ol-style>
                  <ol-style-icon :src="hereIcon" :scale="0.1"></ol-style-icon>
                </ol-style>
              </ol-feature>
              <ol-feature v-for="(contract, index) in contracts" :key="index" >
                <ol-geom-polygon :coordinates="[contract.location]"></ol-geom-polygon>
                <ol-style>
                  <ol-style-stroke color="green" :width="5"></ol-style-stroke>
                </ol-style>
              </ol-feature>
            </ol-source-vector>

          </ol-vector-layer>
        </template>
      </ol-geolocation>
    </ol-map>

...

export default defineComponent({
  name: 'IndexPage',
  setup() {
    const contracts = [
      {
        name: "Tel Aviv traffic jams",
        location: [[34.742580, 32.046081],[34.760053,32.135796],[34.817236,32.127726],[34.783349,32.031719]]
      }
    ]
    const selectConditions = inject('ol-selectconditions')

    const selectCondition = selectConditions.click;
    const selectedContract = ref(false);


    const clickedFeature = (event) => {
      console.log(event);
    }

Not really a bug but I need advice from the developpers because I am completely lost on the logic behind how to deal with feature states

the doc is not clear; at least for me.

I have this template

 <ol-interaction-select @select="featureSelected" :condition="selectCondition" :features="selectedFeatures">
    <ol-style>
      <ol-style-stroke :color="'red'" :width="2"></ol-style-stroke>
      <ol-style-fill :color="`rgba(255, 0, 0, 0.4)`"></ol-style-fill>
    </ol-style>
  </ol-interaction-select>
<ol-source-vector :projection="projection">
   <ol-interaction-modify v-if="modifyEnabled" :features="selectedFeatures" @modifyend="modifyend"></ol-interaction-modify>
   <ol-interaction-draw v-if="drawEnable" :type="drawType" @drawend="drawend"></ol-interaction-draw>
</ol-source-vector>

and the logic:

import {Collection} from "ol"
setup(){
       const selectedFeatures = ref(new Collection())
       let newFeatures = ref([])

       const drawend = (event) => {
          newFeatures.value.push({type:event.target.type_, coordinates:event.target.sketchCoords_})
          modifyEnabled.value = true
          drawEnable.value = false
          emit()
       }
       const modifyend = (event) => {
           // how to know which feature I am editing and how to get the new value ?
           emit()
        }
        function featureSelected(event) {
          const feature = event.target.getFeatures()
          selectedFeatures.value = event.target.getFeatures()
          if(feature.array_ && feature.array_.length) {
             let coordinates = null
             if(feature.array_[0].values_.geometries && feature.array_[0].values_.geometries.length) {
               coordinates = feature.array_[0].values_.geometries[0].flatCoordinates
             } else if(feature.array_[0].values_.geometry) {
               coordinates = feature.array_[0].values_.geometry.flatCoordinates
             }
            console.log(coordinates)
        }
    }
}

when I select I get the new coordinates with featureSelected but that seems cumbersome because I have to dig down into the object and there is no real relation between what I am editing and my data because newFeatures is not being updated.

selectedFeatures and newFeatures have different types so I need to translate one to the other and vice versa ?

Ideally everything should be sharing a single reactive value/format somewhere between the collection and the modified one but they are not linked/bridged ?? Ideally I would just like to put newFeatures in the modify component but I need to track selectedFeature instead and then copy values back to my newFeatures ?

In newFeatures I have a collection of simple data that has no reference to the dom like [{type:'Point',coordinates:[3,2,5]}] in selectedFeatures I have a complex object so How am I supposed to keep references between both objects?

so I can get new values from console.log(coordinates) but what am I supposed to do with these ? How do I update my newFeatures array? is there no simple feature getter and setters ?

Clearly there must be something I am missing because I can't even extract feature type like LineString, circle, etc... from the modify event object.

in featureSelected I need to do selectedFeatures.value = event.target.getFeatures() and in drawend I have to do selectedFeatures.value.push(event.feature). What is the reason ?

or I could do without newFeatures if there is a way to get all current features from ol-interaction-draw component for export? but in which format to store in database so I can re-edit them later ?

Could you clarify for me? Sorry but I have been on this for 2 days now.

Full code https://gist.github.com/signmeuptwice/c45085e64e09828bc6f3bc81635fdb9e

Describe the bug Copying the ol-map sample fires this error

[Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'currentRenderingInstance.isCE')
	logError (runtime-core.esm-bundler.js:6664)
	handleError (runtime-core.esm-bundler.js:305)
	callWithErrorHandling (runtime-core.esm-bundler.js:259)
	flushJobs (runtime-core.esm-bundler.js:483)
	promiseReactionJob

To Reproduce Steps to reproduce the behavior:

1. clone my sample repository https://github.com/eltorio/hello-openlayers.git
2. yarn install && yarn serve
3. goes to http://127.0.0.1:8080/
4. See error

Expected behavior Display a full width map and height 400px

package.json

{
  "name": "hello-openlayers",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "5.15.3",
    "@popperjs/core": "2.9.1",
    "@tailwindcss/forms": "0.2.1",
    "@vue/compiler-sfc": "3.0.7",
    "chart.js": "2.9.4",
    "core-js": "3.9.1",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "tailwindcss": "2.0.4",
    "vue": "3.0.7",
    "vue-router": "4.0.5",
    "vue3-openlayers": "^0.1.55"
  },
  "devDependencies": {
    "@babel/core": "7.13.10",
    "@babel/eslint-parser": "7.13.10",
    "@vue/cli-plugin-babel": "5.0.0-alpha.7",
    "@vue/cli-plugin-eslint": "5.0.0-alpha.7",
    "@vue/cli-service": "5.0.0-alpha.7",
    "autoprefixer": "10.2.5",
    "eslint": "7.22.0",
    "eslint-plugin-vue": "7.7.0",
    "postcss": "8.2.8",
    "vue-template-compiler": "2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

**Vue **

<template>
<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">

    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" 
    :projection="projection" />

    <ol-tile-layer>
        <ol-source-osm />
    </ol-tile-layer>
    
</ol-map>
</template>
<script>
import {
    ref
} from 'vue'
export default {
    setup() {
        const center = ref([40, 40])
        const projection = ref('EPSG:4326')
        const zoom = ref(8)
        const rotation = ref(0)
        return {
            center,
            projection,
            zoom,
            rotation
        }
    },
}
</script>

main.js

import { createApp } from "vue";
import { createWebHistory, createRouter } from "vue-router";

// styles

import "@fortawesome/fontawesome-free/css/all.min.css";
import "@/assets/styles/tailwind.css";

// mouting point for the whole app

import App from "@/App.vue";

//vue3 openlayers
import OpenLayersMap from 'vue3-openlayers';
import 'vue3-openlayers/dist/vue3-openlayers.css';
import Test from "@/views/OpenLayers.vue";

// routes

const routes = [
  {
    path: "/",
    component: Test,
  },
  { path: "/:pathMatch(.*)*", redirect: "/" },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

const app = createApp(App);

app.use(router);
app.use(OpenLayersMap);
app.mount("#app");

When implement ol-interaction-draw how i can add feature to user delete the selected shape , i'm try from ol-interaction-clusterselect get the featureSelected event and if have a function to delete the current element or something like that or please if have some other way.

Thank you.

I cannot see in the doc an example of a multicolor linestring

the closest I fount is the multi-line-string so I tried this

      <ol-feature v-if="waypoints && waypoints.length > 0">
        <ol-geom-multi-line-string :coordinates="waypoints"></ol-geom-multi-line-string>
        <ol-style :overrideStyleFunction="overrideStyleFunction">
          <ol-style-stroke color="green" :width="7"></ol-style-stroke>
        </ol-style>
      </ol-feature>

problem is that my overrideStyleFunction is only triggered once and the line is the same color everywhere not sure what I am doing wrong

OL has Flowline which could be great to have as a component ?

I could not find any documentation on this. If I missed it all my apologies for a useless post

I see that the demo has the exact same behavior; Did you forget props in demo ?

using the <ol-layerswitcherimage-control >

I have an extra layer with image data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAEAAAABA … eJLjLwPul3vj5d0eAAAAAElFTkSuQmCC

then by default all my layers are selected; this is a big performance issue

Can you please let me know how to control this component ?

Added basic typescript declaration for the module.

Description

• Created typescript declaration file
• Added declarations that declare return values of the inject method provided by the plugin.

Motivation and Context

When using a module with typescript there are some types missing and can be declared.

How Has This Been Tested?

Created new Nuxt 3 plugin, with next code:

import OpenLayersMap from 'vue3-openlayers'
import 'vue3-openlayers/dist/vue3-openlayers.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(OpenLayersMap)
})

Then created a component with example code:

export default {
  setup() {
    const center = ref([34, 39.13])
    const projection = ref('EPSG:4326')
    const zoom = ref(6)
    const rotation = ref(0)

    const format = inject('ol-format');

    const geoJson = new format.GeoJSON();
   ...

Without the types declarations, the type of format is unknown. With the declarations, the types properly resolved to the ol types.

Types of Changes

• [ ] Bugfix: Typescript types declarations

Hi,

I would like to render the "ol-map" (and its children components) using the h() function. Something like:

h(Map, {
    class: 'q-mt-md',
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,
    style: 'height:400px'
  }, [ 
      h(View, {
          center: [0, 45],
          rotation: 0,
          zoom: 8,
          projection: 'EPSG:4326'
      }),
      h(FullScreenControl),
      h(TileLayer, null, [ h(SourceOSM) ])
  ])

What is the appropriate import directive that I could use to get access to the component definitions Map, View, FullScreenControl, TileLayer etc. ?

Thanks

from doc example, inserting the following component

<ol-overviewmap-control><ol-tile-layer><ol-source-osm /></ol-tile-layer></ol-overviewmap-control>

gives error

[Warning] No map visible because the map container's width or height are 0.

I imported

import 'vue3-openlayers/dist/vue3-openlayers.css'

tested in my project and with fresh project from latest source

Hello,

I'm probably not doing something right, but I cannot use :hit-tolerance="xx" on the select interaction.

Could anybody point me in the right direction?

Thank you!

I need to use the ol-ext library, what would be the recommendations to add these features. I am currently trying to add a pie chart.

I would like the components to be implemented with ol-ext

This MR adds support for removeCondition:

A function that takes an MapBrowserEvent and returns a boolean to indicate whether that event should be handled. By default, this is never. Use this if you want to use different events for add and remove instead of toggle.

(from ol docs)

Motivation and Context

It's a useful feature when interacting specific feature for which the select interaction should not be allowed

How Has This Been Tested?

Was not tested.

Screenshots (if appropriate):

Types of Changes

• [ ] Bug fix (non-breaking change that fixes an issue)
• [x] New feature (non-breaking change that adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [x] My code follows the code style of this project.
• [x] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly. -> I would but I'm not sure how to

i have a problem, i want to make a marker to the location coordinates-6.2651623,107.0999022 but it seems the marker is not really there. and even out of the map what causes and solutions how script Vue 3

<script setup>
  const center = ref([40, 40])
        const projection = ref('EPSG:4326')
        const zoom = ref(8)
        const rotation = ref(0)
        const radius = ref(40)
        const strokeWidth = ref(10)
        const strokeColor = ref('red')
        const fillColor = ref('white')
        const coordinate = ref([-6.2651623,107.0999022])
</script>

my template vue

	<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">

    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" />

    <ol-tile-layer>
        <ol-source-osm />
    </ol-tile-layer>

    <ol-vector-layer>
        <ol-source-vector>
            <ol-feature>
                <ol-geom-point :coordinates="coordinate"></ol-geom-point>
                <ol-style>
                    <ol-style-circle :radius="radius">
                        <ol-style-fill :color="fillColor"></ol-style-fill>
                        <ol-style-stroke :color="strokeColor" :width="strokeWidth"></ol-style-stroke>
                    </ol-style-circle>
                </ol-style>
            </ol-feature>

        </ol-source-vector>

    </ol-vector-layer>

</ol-map>

Describe the bug The prop visible of ol-tile-layer controls the visibility of a layer only on initial loading.

To Reproduce

1. Create template with ol-tile-layer

<template>
    <ol-map
      ref="olMap"
      :load-tiles-while-animating="true"
      :load-tiles-while-interacting="true"
      style="height: 100%"
    >
      <ol-view
        ref="view"
        :center="center"
        :rotation="rotation"
        :zoom="zoom"
        :projection="projection"
        @zoomChanged="zoomChanged"
        @centerChanged="centerChanged"
      />

      <ol-tile-layer ref="osmlayer" title="OpenstreetMap" :visible="osmVisible">
        <ol-source-osm />
      </ol-tile-layer>

  </ol-map>
</template>
<script>
import "vue3-openlayers/dist/vue3-openlayers.css";

export default {
  name: "MapView",
  props: {
    center: {
      type: Array,
      required: true,
    },
    zoom: {
      type: Number,
      required: true,
    },
    extent: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      rotation: 0,
      projection: "EPSG:3857",
      osmVisible: true
     },
  },
  methods: {
}
};
</script>

Expected behavior The prop visible of ol-tile-layer controls the visibility of a layer every time the property is changing.

Desktop (please complete the following information):

• OS: Ubuntu 20.04 LTS
• Browser Chrome 107.0.5304.87 (64-Bit), Firefox 107.0 (64-bit)

hi,

first of all, very nice vue implementation.

ok, I am using ref to the view, when I open the component I can use viewRef.value.setZoom() to set the zoom from an external UI. when I close the component and open it wirh a new map, the refView is null! inside the map everything is fine.

how should i unmount the view?

<div class="map-container">
    <!-- @created="onMapCreated()"  @click="zoomIn()"-->
    <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:980px" >
        <!-- :extent="extentCalc()" -->
        <ol-view ref="viewRef" :center="center" :rotation="rotation" :zoom="zoom" :maxZoom="maxZoom" :minZoom="minZoom" :projection="projection" :extent="extent" :showFullExtent="true" :smoothResolutionConstraint="true" @zoomChanged="onZoomChanged"  @resolutionChanged="onResolutionChanged"/>
        <!-- <ol-zoom-control /> -->
        <!-- <ol-attribution-control/> -->

        <ol-overlay :position="position">
            <template v-slot="slotProps">
            <!-- <template> -->
                <div class="marker" :xxx="slotProps"></div>
                <!-- <div class="overlay-content">
                    Hello world!<br>
                    Position: {{ slotProps.position}}
                </div> -->
            </template>
        </ol-overlay>

        <ol-image-layer>
            <!-- :attributions="imgCopyright" :imageExtent="extent"  -->
            <ol-source-image-static :url="imgUrl" :imageSize="size" :imageExtent="imageExtent" :projection="projection"></ol-source-image-static>
        </ol-image-layer>

    </ol-map>

</div>