How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./node_modules/leaflet/dist/leaflet.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="./assets/js/hs.leaflet.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF LEAFLET
// =======================================================
const leaflet = HSCore.components.HSLeaflet.init(document.getElementById('map'))
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
id: 'mapbox/light-v9'
}).addTo(leaflet)
})();
</script>
Basic example
<!-- Leaflet -->
<div class="container-fluid">
<div id="map" class="leaflet"
data-hs-leaflet-options='{
"map": {
"scrollWheelZoom": false,
"coords": [37.4040344, -122.0289704]
},
"marker": [
{
"coords": [37.4040344, -122.0289704],
"icon": {
"iconUrl": "../assets/svg/components/map-pin.svg",
"iconSize": [50, 45]
},
"popup": {
"text": "153 Williamson Plaza, Maggieberg"
}
}
]
}'></div>
</div>
<!-- End Leaflet -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
Supported file types. If empty all supported. | [] |
|
|
Max size for uploading file. | 1024 |
|
|
Supported two mods (image/simple). image - show image after uploading. simple - show file name after uploading. | simple |
|
|
Element selector with src for image mode. |
null |
|
|
Element selector for simple mode. |
null |
|
|
Element selector to reset form. | null |
|
|
Error message text if the file size is larger than the allowed. | 'File is too big!' |
|
|
Error message text if file type is not supported. | 'Unsupported file type' |