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,

Parameter Type Keys/Parameters Description
center Object. lat and lng Center of the Map
defaultZoom Integer Default zoom level
osmAttr String default footer text

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)

results matching ""

    No results matching ""