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?
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 © <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>