Mouse Wheel Zoom bei OSM deaktivieren

[Concilla]

Hallo an alle, ich habe bei Codepen eine Map gefunden, die ich gern auf einer Seite integrieren möchte. Und zwar, diese:

Leaflet Worldvious bei Codepen

Die Anpassunge bezüglich der Standorte, die ich eintragen möchte, hat auch gut funktioniert. Leider weiß ich nicht, wie man das Zoomen per Mouse Wheel deaktiviert, unterbindet. Denn wenn die Map sich am Anfang einer Seite befindet, über die volle Breite, und man möchte nach unten scrollen, dass zoomt nur die Karte.

Ich würde mich sehr freuen, wenn mir hier jemand helfen könnte? Vielen Dank schon mal im Voraus.

Concilla

 

[Sempervivum]

Die Antwort findest Du hier:
How to disable the react leaflet zoom
mit einem Beispiel ganz unten:

  render() {
    const position = [this.state.lat, this.state.lng];
    const users = this.state.users
    return (
      <LeafletMap
          center={position}
          zoom={this.state.zoom}
          scrollWheelZoom={false}>
        <TileLayer

 

[Concilla]

Ich habe es! Vielen Dank. Jetzt funktioniert es.

 React.createElement(LeafletMap, { center: position, zoom: this.state.zoom, scrollWheelZoom:false }, /*#__PURE__*/

Gern würde ich noch eigene Marker anstelle der Blauen einfügen. Aber auch das bekomme ich nicht hin :-(

 

[Sempervivum]

Keine Ahnung von React aber auch hier findet man bei Stackoverflow die Lösung:
Ein Icon-Objekt erzeugen:

                 myIcon = L.icon({
                    iconUrl: 'https://webentwicklung.ulrichbangert.de/images/bild1.jpg',
                    iconSize: [64,64],
                    iconAnchor: [32, 64],
                    popupAnchor: null,
                    shadowUrl: null,
                    shadowSize: null,
                    shadowAnchor: null
                });

Und beim Marker verwenden:

        <Marker icon={myIcon} position={[users[0].lat, users[0].lng]}>

Hier mit einem sinnfreien Testbild:
https://codepen.io/Sempervivum/pen/RwKmLWP

 

[Concilla]

Herzlichen Dank, Sempervivum. Jetzt funktionieren auch die eigenen Marker Auch das Popup konnte ich aktivieren. Danke für die Hilfe!