search

openlayers / openlayers

OpenLayers
https://openlayers.org
BSD 2-Clause "Simplified" License
11.26k stars 3.02k forks source link

Cannot render marker and text on map #15553

Closed petrospap closed 6 months ago

petrospap commented 6 months ago

Hello, I have made a simply script that renders some markers + information on map And successfully made it work in windows10 with OL v7.4.0, parcel v2.9.2, and node v20.10.0 The results are map-card and working PERFECT!!!

Describe the bug Now I have updated all to 

npm: v10.2.4
node: v20.11.0
ol: v8.2.0
parcel: v2.11.0

the same source, displays map! But not render any marker or text No matter what I have done, cannot render a single marker.

Here is simple Code that worked with OL v7.4.0 but NOT work with 8.2.0 To Reproduce

'use strict';
import {Map, View} from 'ol';
import VectorSource from 'ol/source/Vector.js';
import Feature from 'ol/Feature.js';
import {Fill, Stroke, Icon, Style, Text} from 'ol/style.js';
import Point from 'ol/geom/Point.js';
import {Vector as VectorLayer} from 'ol/layer.js';
import Overlay from 'ol/Overlay.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import {toLonLat, fromLonLat, transform} from 'ol/proj.js';

export class MapCard{

jsonCard={
id:1,
lat:'37.984',
lon:'23.728',
dsc:'Ononia|Omonia is the center of Athens, you will find us at [brand name]|Square omonia and Athinas street 1',
site:'https:\/\/example.com/map-card',
pho:'NULL',
mob:'NULL',
email:'lorem@example.com',
colors:3,
dl:0
};
_colors=[[255,255,255,1],[17,17,17,1]];
_background=[[255,255,255,0.9],[13,13,13,0.9],[230,41,27,0.9],[71,129,33,0.9]];

    constructor(){
        this.vectorSource = new VectorSource({
            features:this.setPointFeature([this.jsonCard])
        });

        const _vectorLayer = new VectorLayer({
            source:this.vectorSource,
            zIndex: 1000
        });

        this._view = new View({
            //projection: 'EPSG:3857', //EPSG:4326',
            center: fromLonLat([23.728, 37.984]),
            zoom:18
        });

        this._map=new Map({
            layers: [new TileLayer({ source: new OSM() }), _vectorLayer],
            target:'map',
            view:this._view
        });
    }

    setPointFeature(json){
        console.log('Called setPointFeature');
        //console.dir(json);
        const newFeatures=json.map(i => {
            let _t=null;
            if(i.dsc.length>3){
            _t=i.dsc.replaceAll('|','\n')
            _t+=!i.pho?'':'\n'+_lang.el.pho+':'+i.pho;
            _t+=!i.mob ?'':'\n'+_lang.el.mob+':'+i.mob;
            _t+=!i.email?'':'\n'+_lang.el.email+':'+i.email;
            _t+=!i.site?'':'\n'+i.site;
            };

            console.log('Data From setNewFeature (iconFeature)');
            return this.setNewFeature(i.id,i.lon,i.lat,_t,i.colors);
        });
        console.log('Final Data newFeatures');
        console.dir(newFeatures);
        return newFeatures;
    }

    setNewFeature(_id,lon,lat,txt,_c){

        console.log('lat= '+lat+' lon= '+lon);
        let styles = null;
        if(!txt){
            styles = new Style({
                image:new Icon({
                    anchor:[0.5,46],
                    anchorXUnits:'fraction',
                    anchorYUnits:'pixels',
                    scale:.6,
                    src:'./images/marker'+_c+'.png'
                })
            });

        }else{

            styles = new Style({
                image:new Icon({
                    anchor:[0.5,46],
                    anchorXUnits:'fraction',
                    anchorYUnits:'pixels',
                    scale:.6,
                    src:'./images/marker'+_c+'.png'
                }),

                text:new Text({
                    font:'16px/20px Verdana, Helvetica, Arial, sans-serif',
                    textAlign:'center',
                    textBaseline:'bottom',
                    offsetX:0,
                    offsetY:-40,
                    placement:'wrap',
                    text:txt,
                    fill:new Fill({color:_c==0?this._colors[1]:this._colors[0]}),
                    backgroundFill:new Fill({color:this._background[_c]}),
                    stroke:new Stroke({
                        color:_c==0?'white':'black',
                        width:1
                    }),
                    padding:[6,10,8,10]
                })
            });
        };

        let iconFeature = new Feature({
            geometry:new Point(transform([lon,lat],'EPSG:4326','EPSG:3857')),
            type:'click',
            id:_id
        });
        iconFeature.setStyle(styles);
        console.dir(iconFeature);
        return iconFeature;
    };

}

Results running the script from console in Firefox

Called setPointFeature
Data From setNewFeature (iconFeature)
lat= 37.984 lon= 23.728
{
  "disposed": false,
  "pendingRemovals_": {},
  "dispatching_": {},
  "listeners_": {
    "change:geometry": [
      null
    ],
    "change": [
      null
    ],
    "propertychange": [
      null
    ]
  },
  "revision_": 2,
  "ol_uid": "3",
  "values_": {
    "geometry": {
      "disposed": false,
      "pendingRemovals_": null,
      "dispatching_": null,
      "listeners_": {
        "change": [
          null
        ]
      },
      "revision_": 1,
      "ol_uid": "2",
      "values_": null,
      "extent_": [
        2641388.8775427956,
        4577165.795988457,
        2641388.8775427956,
        4577165.795988457
      ],
      "extentRevision_": 1,
      "simplifiedGeometryMaxMinSquaredTolerance": 0.08915129536543022,
      "simplifiedGeometryRevision": 1,
      "layout": "XY",
      "stride": 2,
      "flatCoordinates": [
        2641388.8775427956,
        4577165.795988457
      ]
    },
    "type": "click",
    "id": 1
  },
  "geometryName_": "geometry",
  "style_": {
    "geometry_": null,
    "fill_": null,
    "image_": {
      "opacity_": 1,
      "rotateWithView_": false,
      "rotation_": 0,
      "scale_": 0.6,
      "scaleArray_": [
        0.6,
        0.6
      ],
      "displacement_": [
        0,
        0
      ],
      "anchor_": [
        0.5,
        46
      ],
      "normalizedAnchor_": null,
      "anchorOrigin_": "top-left",
      "anchorXUnits_": "fraction",
      "anchorYUnits_": "pixels",
      "crossOrigin_": null,
      "color_": null,
      "iconImage_": {
        "disposed": false,
        "pendingRemovals_": {},
        "dispatching_": {},
        "listeners_": {},
        "hitDetectionImage_": null,
        "image_": {},
        "crossOrigin_": null,
        "canvas_": {},
        "color_": null,
        "imageState_": 3,
        "size_": null,
        "src_": "./images/marker3.png"
      },
      "offset_": [
        0,
        0
      ],
      "offsetOrigin_": "top-left",
      "origin_": null,
      "size_": null
    },
    "renderer_": null,
    "hitDetectionRenderer_": null,
    "stroke_": null,
    "text_": {
      "font_": "16px/20px Verdana, Helvetica, Arial, sans-serif",
      "scaleArray_": [
        1,
        1
      ],
      "text_": "Ononia\nOmonia is the center of Athens, you will find us at [brand name]\nSquare omonia and Athinas street 1\nPhone:NULL\nMobile:NULL\nE-mail:lorem@example.com\nhttps://example.com/map-card",
      "textAlign_": "center",
      "textBaseline_": "bottom",
      "fill_": {
        "color_": [
          255,
          255,
          255,
          1
        ]
      },
      "maxAngle_": 0.7853981633974483,
      "placement_": "wrap",
      "overflow_": false,
      "stroke_": {
        "color_": "black",
        "lineDash_": null,
        "width_": 1
      },
      "offsetX_": 0,
      "offsetY_": -40,
      "backgroundFill_": {
        "color_": [
          71,
          129,
          33,
          0.9
        ]
      },
      "backgroundStroke_": null,
      "padding_": [
        6,
        10,
        8,
        10
      ]
    }
  },
  "geometryChangeKey_": {
    "target": {
      "disposed": false,
      "pendingRemovals_": null,
      "dispatching_": null,
      "listeners_": {
        "change": [
          null
        ]
      },
      "revision_": 1,
      "ol_uid": "2",
      "values_": null,
      "extent_": [
        2641388.8775427956,
        4577165.795988457,
        2641388.8775427956,
        4577165.795988457
      ],
      "extentRevision_": 1,
      "simplifiedGeometryMaxMinSquaredTolerance": 0.08915129536543022,
      "simplifiedGeometryRevision": 1,
      "layout": "XY",
      "stride": 2,
      "flatCoordinates": [
        2641388.8775427956,
        4577165.795988457
      ]
    },
    "type": "change"
  }
}

Final Data newFeatures
{
  "disposed": false,
  "pendingRemovals_": {},
  "dispatching_": {},
  "listeners_": {
    "change:geometry": [
      null
    ],
    "change": [
      null
    ],
    "propertychange": [
      null
    ]
  },
  "revision_": 2,
  "ol_uid": "3",
  "values_": {
    "geometry": {
      "disposed": false,
      "pendingRemovals_": null,
      "dispatching_": null,
      "listeners_": {
        "change": [
          null
        ]
      },
      "revision_": 1,
      "ol_uid": "2",
      "values_": null,
      "extent_": [
        2641388.8775427956,
        4577165.795988457,
        2641388.8775427956,
        4577165.795988457
      ],
      "extentRevision_": 1,
      "simplifiedGeometryMaxMinSquaredTolerance": 0.08915129536543022,
      "simplifiedGeometryRevision": 1,
      "layout": "XY",
      "stride": 2,
      "flatCoordinates": [
        2641388.8775427956,
        4577165.795988457
      ]
    },
    "type": "click",
    "id": 1
  },
  "geometryName_": "geometry",
  "style_": {
    "geometry_": null,
    "fill_": null,
    "image_": {
      "opacity_": 1,
      "rotateWithView_": false,
      "rotation_": 0,
      "scale_": 0.6,
      "scaleArray_": [
        0.6,
        0.6
      ],
      "displacement_": [
        0,
        0
      ],
      "anchor_": [
        0.5,
        46
      ],
      "normalizedAnchor_": null,
      "anchorOrigin_": "top-left",
      "anchorXUnits_": "fraction",
      "anchorYUnits_": "pixels",
      "crossOrigin_": null,
      "color_": null,
      "iconImage_": {
        "disposed": false,
        "pendingRemovals_": {},
        "dispatching_": {},
        "listeners_": {},
        "hitDetectionImage_": null,
        "image_": {},
        "crossOrigin_": null,
        "canvas_": {},
        "color_": null,
        "imageState_": 3,
        "size_": null,
        "src_": "./images/marker3.png"
      },
      "offset_": [
        0,
        0
      ],
      "offsetOrigin_": "top-left",
      "origin_": null,
      "size_": null
    },
    "renderer_": null,
    "hitDetectionRenderer_": null,
    "stroke_": null,
    "text_": {
      "font_": "16px/20px Verdana, Helvetica, Arial, sans-serif",
      "scaleArray_": [
        1,
        1
      ],
      "text_": "Ononia\nOmonia is the center of Athens, you will find us at [brand name]\nSquare omonia and Athinas street 1\nPhone:NULL\nMobile:NULL\nE-mail:lorem@example.com\nhttps://example.com/map-card",
      "textAlign_": "center",
      "textBaseline_": "bottom",
      "fill_": {
        "color_": [
          255,
          255,
          255,
          1
        ]
      },
      "maxAngle_": 0.7853981633974483,
      "placement_": "wrap",
      "overflow_": false,
      "stroke_": {
        "color_": "black",
        "lineDash_": null,
        "width_": 1
      },
      "offsetX_": 0,
      "offsetY_": -40,
      "backgroundFill_": {
        "color_": [
          71,
          129,
          33,
          0.9
        ]
      },
      "backgroundStroke_": null,
      "padding_": [
        6,
        10,
        8,
        10
      ]
    }
  },
  "geometryChangeKey_": {
    "target": {
      "disposed": false,
      "pendingRemovals_": null,
      "dispatching_": null,
      "listeners_": {
        "change": [
          null
        ]
      },
      "revision_": 1,
      "ol_uid": "2",
      "values_": null,
      "extent_": [
        2641388.8775427956,
        4577165.795988457,
        2641388.8775427956,
        4577165.795988457
      ],
      "extentRevision_": 1,
      "simplifiedGeometryMaxMinSquaredTolerance": 0.08915129536543022,
      "simplifiedGeometryRevision": 1,
      "layout": "XY",
      "stride": 2,
      "flatCoordinates": [
        2641388.8775427956,
        4577165.795988457
      ]
    },
    "type": "change"
  }
}

Expected behavior Any idea why not working??

petrospap commented 6 months ago

I try to run with parcel https://openlayers.org/en/latest/examples/icon-color.html nap rendered but not render Icon Colors

petrospap commented 6 months ago

Seems like the issue is the Parcel... with Vite is working, , can anyone has issues using parcel?

petrospap commented 6 months ago

If you want to try my small app or to download https://simply4all.net/map-card-screenshot is very strange that cannot build with parcel