December 17, 2024

Woosmap for React Native - Marker

Markers are used to display clickable/draggable icons on the map. You can attach a wide variety of event listeners to control user interaction..

Display markers to identify locations on Woosmap Map. Markers are used to display clickable/draggable icons on the map. You can attach a wide variety of event listeners to control user interaction.

1. Instantiating a Marker with WoosmapView.

src/plugin_snippet.tsx

snippet

           let marker: Marker | null;

  const mapOptions: Object = {
    center: { lat: 51.515, lng: -0.13 },
    zoom: 10,
  };
  const add = function () {
    if (marker === undefined) {
      if (mapRef.current) {
        marker = new Marker(
          {
            position: { lat: 51.522, lng: -0.13 },
            icon: {
              url: 'https://images.woosmap.com/dot-marker.png',
              scaledSize: { height: 64, width: 46 },
            },
          },
          mapRef.current,
          {
            click: () => {
              console.log('marker click');
            },
          }
        );
        marker.add();
      }
    }
  };
   <WoosmapView
        ref={mapRef}
        mapOptions={mapOptions}
        wooskey={'Your Woosmap key'}
        loaded={() => {
          add();
        }}
      />


    

Please check the javascript guide for more implementation. javascript guide

Was this article helpful?

Have more questions? Submit a request