How to Draw Polyline on mapmyindia using React?

Question

I am just exploring Mapmyindia. I have gone through the basic location display on the map. I am not getting how to display polyline on map.

code for location app.js

import "./App.css";
import SideBar from "./componants/SideBar";
import Map from "mapmyindia-react";
// import MapmyIndia, { MapMarker } from "react-mapmyindia";

function App() {
  return (
    <div className="App">
      Hello
      <Map
        markers={[
          {
            position: [21.1588329, 72.7688111],
            draggable: true,
            zoom: 15,
            title: "Marker title",
            onClick: (e) => {
              console.log("clicked ");
            },
            onDragend: (e) => {
              console.log("dragged");
            },
            onMouseover: (e) => {
              console.log("Mouse over");
            },
          },
        ]}
      />
      {/* <Map /> */}
      <SideBar></SideBar>
    </div>
  );
}

export default App;

Which result this

Now, Please help with drawing polyline.

Answer 1

I guess you're using the npm package for maps. If you go through the library's code in gitHub, you can see the owner has only added marker functionality. You can simply copy the code from there and add it manually to your project and then add the polyline functionality and then pass the data as props from your app.js file like you're doing for markers.

    renderPolylines = () => {
    const { polylines = [] } = this.props;
    if (!this.map) {
      return;
    }
    polylines.map(m => {
      if (m?.position && Array.isArray(m.position)) {
        const { position, color, weight, opacity } = m;
        let points = [];
        position.map(p => {
          const { lat, lng } = p;
          const center = new L.LatLng(lat, lng);
          points.push(
            new L.LatLng(center.lat, center.lng))/*array of wgs points*/
        })
        const polyline = new L.Polyline(points, { color, weight, opacity });
        this.map.addLayer(polyline);
        this.polylines.push(polyline);
      }
    });
  };

Props for rendering polyline from app.js

    polylines = {[
    {
      position: [
        {
          lat: 18.5014,
          lng: 73.805,
        },
        {
          lat: 18.5414,
          lng: 73.855,
        },
        {
          lat: 18.5514,
          lng: 73.855,
        },
        {
          lat: 18.5614,
          lng: 73.855,
        },
      ],
      color: "red",
      weight: 4,
      opacity: 0.5,
    },
  ]}