1

I created a simple card with react and I want to display an overlay. But the overlay is not showing and I have no errors in the console.

I declare the map in the constructor

 // Declaration of the map
    this.olmap = new Map({
      target: null,
      layers: [this.osm],
      view: new View({
        center: this.state.center,
        zoom: this.state.zoom
      })

    })

    // Déclaration of the Marker
    this.marker = new Overlay({
      position: fromLonLat([1.3529599, 44.0221252]),
      positioning: "center-center",
      element: document.getElementById("marker"),
      stopEvent: false
    });
    //console.log(this.marker);

    // Adding to the Map Object
    this.olmap.addOverlay(this.marker);

and here is the rendering

render() {

    return (
      <>
        <div id="map15" style={{ width: "100%", height: "360px" }} />
        <div style={{ display: "none" }}>
          {/* Marker */}
          <div 
          id="marker" 
          title="Marker"
          style={{
            width: "20px",
            height: "20px",
            border: "1px solid #088",
            borderRadius: "10px",
            backgroundColor: "#0FF",
            opacity: "0.5"
          }}
          />
        </div>
      </>
    );
  }
}
sandrine
  • 43
  • 7
  • Are you certain that that Lat Long is something in view on your map? – Ace Jun 21 '19 at 21:49
  • We find the `div class="ol-overlay-container "` at the position indicated by `position: fromLonLat([1.3529599, 44.0221252])` but what I do not understand is that this `div` should contain a `div id="marker" title="Marker"` and there is nothing. – sandrine Jun 22 '19 at 06:20

1 Answers1

2

I finally found the solution, I moved the declaration of the Marker in componentDidMount

componentDidMount() {
    this.olmap.setTarget("map15");

    // Déclaration of the Marker
    this.marker = new Overlay({
      position: fromLonLat([-43.3307, -22.9201]),
      positioning: "center-center",
      element: document.getElementById("marker"),
      stopEvent: false
    });
    //console.log(this.marker);

    // Adding to the Map Object
    this.olmap.addOverlay(this.marker);
    console.log(this.olmap);
  }
sandrine
  • 43
  • 7