I noticed when I upgraded from 8.2 to 9.0 that my editing styles broke for my LineStri

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Thanks a lot <a class="user-mention notranslate" data-hovercard-type="user" data-hover

Thank you <a class="user-mention notranslate" data-hovercard-type="user" data-hovercar

I guess I also had to comment out zIndex for this to work. <code class="notranslat

Can this be seen in any of the examples from <a href="https://openlayers.org/en/latest

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Default Styles for Modifying Feature Broke in Upgrade from 8.2 to 9.0 about openlayers HOT 9 CLOSED

eflowbeach commented on September 26, 2024

Default Styles for Modifying Feature Broke in Upgrade from 8.2 to 9.0

from openlayers.

Comments (9)

kjellmf commented on September 26, 2024 1

I ran into exactly the same issue when I tried to upgrade OpenLayers to 9.0 on a hobby project. I have not investigated the root cause of this, but my guess is that it is z-index related.

I don't have a minimal example, but you can see it in action if you try to draw and edit geometries on https://65e0c1e274c18d0008ec2f89--orbat-mapper.netlify.app/scenario/demo-narvik40

It is not an issue when I have a simpler setup with no additional layers:
https://65e0c1e274c18d0008ec2f89--orbat-mapper.netlify.app/testgeo

from openlayers.

ahocevar commented on September 26, 2024 1

@eflowbeach @kjellmf It would be good to have a minimal standalone example (e.g. in a repository with code created with npm create ol-app my-app, codesandbox or jsfiddle) to investigate this further.

from openlayers.

eflowbeach commented on September 26, 2024 1

@ahocevar @kjellmf Ok, I think I figured it out! It's actually because I set declutter to true in a separate layer which causes the dot to disappear. Here's the bare bones code, sorry my organization doesn't allow npm...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Draw and Modify Features</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">

    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <form>
        <label for="type">Geometry type &nbsp;</label>
        <select id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
        </select>
    </form>

    <script>
        const raster = new ol.layer.Tile({
            source: new ol.source.OSM(),
        });

        const source = new ol.source.Vector();
        const vector = new ol.layer.Vector({
            source: source
        });

        const timeOfArrivalSource = new ol.source.Vector();
        const timeOfArrivalLayer = new ol.layer.Vector({
            source: timeOfArrivalSource,
            visible: false,
            declutter: true                       // <-------------------------- Adding this breaks it
        });

        // Limit multi-world panning to one world east and west of the real world.
        // Geometry coordinates have to be within that range.       
        const map = new ol.Map({
            layers: [raster, vector, timeOfArrivalLayer],
            target: 'map',
            view: new ol.View({
                center: [-11000000, 4600000],
                zoom: 4,
                // extent,
            }),
        });

        const modify = new ol.interaction.Modify({ source: source });
        map.addInteraction(modify);

        let draw, snap; // global so we can remove them later
     
        function addInteractions() {
            draw = new ol.interaction.Draw({
                source: source,
                type: 'LineString'
            });
            map.addInteraction(draw);
            snap = new ol.interaction.Snap({ source: source });
            map.addInteraction(snap);
        }      
        addInteractions();
    </script>
</body>
</html>

from openlayers.

ahocevar commented on September 26, 2024 1

Thanks a lot @kjellmf. This is a good find and should be enough information to fix it.

from openlayers.

ahocevar commented on September 26, 2024 1

The problem is that array optimization is not as advanced as I thought in JavaScript - setting a very high zIndex on a style makes the ZIndexContext either extremely slow or break entierly. Working on a fix.

from openlayers.

kjellmf commented on September 26, 2024 1

Thank you @eflowbeach for investigating. I also have declutter=true on a layer. If I change it to false the editing styles reappear.

from openlayers.

eflowbeach commented on September 26, 2024

I guess I also had to comment out zIndex for this to work.
styles['Point'] = [ new ol.style.Style({ image: new ol.style.Circle({ radius: width * 2, fill: new ol.style.Fill({ color: blue, }), stroke: new ol.style.Stroke({ color: white, width: width / 2, }), }), // zIndex: Infinity, }), ];

from openlayers.

ahocevar commented on September 26, 2024

Can this be seen in any of the examples from https://openlayers.org/en/latest/examples/ ? Or do you have any live example to reproduce this?

from openlayers.

kjellmf commented on September 26, 2024

@ahocevar I'll try to create a minimal example this weekend when I'll do another attempt to upgrade.

from openlayers.

Default Styles for Modifying Feature Broke in Upgrade from 8.2 to 9.0 about openlayers HOT 9 CLOSED

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent