Leaflet map

Folder path: /src/containers/map/Leaflet

If you want to render a map like the following image

                                                  ![](/assets/leaflet-map-01.png)

Then The code should be like this.

    const { L } = window;
    const map = L.map(element).setView(
      mapboxConfig.center,
      !isNaN(mapboxConfig.defaultZoom) ? mapboxConfig.defaultZoom : 13
    );
    const osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    L.tileLayer(mapboxConfig.tileLayer, {
      maxZoom: !isNaN(mapboxConfig.maxZoom) ? mapboxConfig.maxZoom : 18,
      attribution: osmAttr
    }).addTo(map);

    basicMarkers.map(singleMarker => {
      return L.marker(singleMarker.position)
        .addTo(map)
        .bindPopup(singleMarker.popupText);
    });

Where,

For Custom html marker design, You can edit the following part of code of

    const { L } = window;
    const map = L.map(element).setView(
      mapboxConfig.center,
      !isNaN(mapboxConfig.defaultZoom) ? mapboxConfig.defaultZoom : 13
    );
    const osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

    L.tileLayer(mapboxConfig.tileLayer, {
      maxZoom: !isNaN(mapboxConfig.maxZoom) ? mapboxConfig.maxZoom : 18,
      attribution: osmAttr
    }).addTo(map);

    customHtmlMarker.map(singleMarker => {
      const htmlIcon = L.divIcon({
        className: singleMarker.className,
        popupAnchor: [15, -15], // point from which the popup should open relative to the iconAnchor
        html: singleMarker.html,
      });
      return L.marker(singleMarker.position, { icon: htmlIcon })
        .addTo(map)
        .bindPopup(singleMarker.popupText);
    });

For Custom ICON marker design, You can edit the following part of code of

     const { L } = window;
    const map = L.map(element).setView(
      mapboxConfig.center,
      !isNaN(mapboxConfig.defaultZoom) ? mapboxConfig.defaultZoom : 13
    );
    const osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

    L.tileLayer(mapboxConfig.tileLayer, {
      maxZoom: !isNaN(mapboxConfig.maxZoom) ? mapboxConfig.maxZoom : 18,
      attribution: osmAttr
    }).addTo(map);

    customIconMarkers.map(singleMarker => {
      var customIcon = L.icon({
        iconUrl: singleMarker.iconUrl,
        shadowUrl: singleMarker.shadowUrl,
        iconSize: [40, 40], // size of the icon
        shadowSize: [40, 40], // size of the shadow
        // iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [12, 20], // the same for the shadow
        popupAnchor: [0, -20], // point from which the popup should open relative to the iconAnchor
      });
      return L.marker(singleMarker.position, { icon: customIcon })
        .addTo(map)
        .bindPopup(singleMarker.popupText);
    });

For marker cluster, You can edit the following part of code of

    const { L } = window;
    const map = L.map(element).setView(
      mapboxConfig.center,
      !isNaN(mapboxConfig.defaultZoom) ? mapboxConfig.defaultZoom : 13
    );
    const osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    L.tileLayer(mapboxConfig.tileLayer, {
      maxZoom: !isNaN(mapboxConfig.maxZoom) ? mapboxConfig.maxZoom : 18,
      attribution: osmAttr
    }).addTo(map);

    let markers = L.markerClusterGroup();

    markerCluster.map(singleMarker => {
      var customIcon = L.icon({
        iconUrl: singleMarker.iconUrl,
        iconSize: [40, 40], // size of the icon
        popupAnchor: [0, -20], // point from which the popup should open relative to the iconAnchor
      });
      return markers.addLayer(
        L.marker(singleMarker.position, { icon: customIcon })
          .bindPopup(singleMarker.popupText)
          .openPopup()
      );
    });
    map.addLayer(markers);

If you want to show shortest path between two makers. you can use the following code

    const { L } = window;
    const map = L.map(element).setView(
      mapboxConfig.center,
      !isNaN(mapboxConfig.defaultZoom) ? mapboxConfig.defaultZoom : 13
    );
    const osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    L.tileLayer(mapboxConfig.tileLayer, {
      maxZoom: !isNaN(mapboxConfig.maxZoom) ? mapboxConfig.maxZoom : 18,
      attribution: osmAttr
    }).addTo(map);
    try {
      L.Routing
        .control({
          waypoints: [
            L.latLng(40.72143, -74.05729),
            L.latLng(40.6943, -74.074201),
          ],
          routeWhileDragging: true,
        })
        .addTo(map);
    } catch (e) {}

The following are the screen shot of demos containing a custom ICON marker and the other is custom HTML marker.

                               ![](/assets/leaflet-map-02.png)

                                  ![](/assets/leaflet-map-03.png)