leaflet usage in Preact JS

Question

How can we embeded leaflet Map into Preact component. I am creating a Map widget using webpack. In the below I show you the code I implemented.

import registerCustomElement from 'preact-custom-element';
import { h , Component } from 'preact';
import {map as createMap, tileLayer} from '../../node_modules/leaflet/dist/leaflet-src.esm.js';

class mapView extends Component {

    componentDidMount() {
        let map2 = L.map('mapid').setView([51.505, -0.09], 13);
        map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
        const mapEl = this.shadowRoot.querySelector('#mapid');
        let map = createMap(mapEl).setView([51.505, -0.09], 13);
    }

    render (){
        return (
            <div>
                <div id="mapid" style="height: 100%"></div>
            </div>
        )
    }
  }
  
registerCustomElement(mapView, "map-view");

Can we use React Leaflet in Preact? Is it possible to use? or is there any library or package to create Map in Preact?

Answer 1

This is easy. I found a Stack Overflow question related to Leaflet usage in LitElement.

My answer is similar as this, but need to do some changes, because I am creating a web component (widget).

import registerCustomElement from 'preact-custom-element';
import { Component } from 'preact';
import {map as createMap, tileLayer , icon, marker} from '../../node_modules/leaflet/dist/leaflet-src.esm.js';
import markerIcon from '../../node_modules/leaflet/dist/images/marker-icon.png';
import '../../node_modules/leaflet/dist/leaflet.css';
import "../Assets/CSS/file.css";
import 'bootstrap/dist/css/bootstrap.css';
 
class mapView extends Component {

    componentDidMount()  {

         var locations = [
             ["LOCATION_1", 11.8166, 122.0942],
             ["LOCATION_2", 11.9804, 121.9189],
             ["LOCATION_3", 10.7202, 122.5621],
             ["LOCATION_4", 11.3889, 122.6277],
             ["LOCATION_5", 10.5929, 122.6325]
           ];

        map = createMap('mapid').setView([51.505, -0.09], 13);

        let urlll = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?';
        map.addLayer(tileLayer(
            urlll, 
            {attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            tileSize: 512,
            zoomOffset: -1,
        })
        );

        let marketIcon = icon({
            iconUrl: markerIcon,
            iconRetinaUrl: markerIcon,
            iconAnchor: [5, 25],
            popupAnchor: [10, -44],
            iconSize: [25, 35],
        });

         for (var i = 0; i < locations.length; i++) {
             marker([locations[i][1], locations[i][2]], {
                 icon: marketIcon,
                 draggable: true,    
             }).addTo(map);
         }
    }

    render (){
        return (
            <div>
                <div id="mapid"></div>
            </div>
        )
    }
}
  
registerCustomElement(mapView, "map-view");

You need to update your webpack.config with the file loader. https://v4.webpack.js.org/loaders/file-loader/

Here is my script file code

<script defer="" src="http://HOST_URL/MapCom.js" type="text/javascript"></script>
<map-view name="map"></map-view>