¿Cómo podemos incrustar el mapa del folleto en el componente Preact? Estoy creando un widget de mapa usando un paquete web. A continuación les muestro el código que implementé.
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");¿Podemos usar React Leaflet en Preact? ¿Es posible usar? ¿O hay alguna biblioteca o paquete para crear Map en Preact?
Esto es facil. Encontré una pregunta de desbordamiento de pila relacionada con el uso de folletos en LitElement .
Mi respuesta es similar a esta, pero necesito hacer algunos cambios, porque estoy creando un componente web (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");Debe actualizar su webpack.config con el cargador de archivos . https://v4.webpack.js.org/loaders/file-loader/
Aquí está mi código de archivo de script
<script defer="" src="http://HOST_URL/MapCom.js" type="text/javascript"></script> <map-view name="map"></map-view>