Logo Logo v2.0
Image Description Image Description

No Results

  • Get Support
  • Preview Demo
Logo Logo v2.0
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Dark Mode New
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Button Group
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Navbar Vertical Aside
  • Scrollspy
  • Tables
  • Tables
  • Datatables
  • Sticky Header
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • Datepicker (Flatpickr)
  • Date Range Picker
  • Calendar (Fullcalendar)
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Copy to Clipboard
  • Input Mask
  • Step Forms (Wizards)
  • Add Field
  • Toggle Password
  • Count Characters
  • Form Search
  • Toggle Switch
  • Google reCAPTCHA
  • Charts
  • Chart.js
  • Counter
  • Circles.js (Pie Chart)
  • Others
  • Fullscreen Lightbox
  • Leaflet
  • JSVectorMap
  • SortableJS
  • Sticky Block
  • Go To
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-index
  • Opacity

Maps (Leaflet)

Mobile-friendly interactive map library.

Leaflet documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

        
          <link rel="stylesheet" href="./assets/vendor/leaflet/dist/leaflet.css">
        
      

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="./assets/vendor/leaflet/dist/leaflet.js"></script>
        
      

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

        
        
      

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

  • Preview
  • HTML
              
                <!-- 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

allowTypes

Supported file types. If empty all supported. []

maxFileSize

Max size for uploading file. 1024

mode

Supported two mods (image/simple). image - show image after uploading. simple - show file name after uploading. simple

targetAttr

Element selector with src for image mode. null

textTarget

Element selector for simple mode. null

resetTarget

Element selector to reset form. null

errorMessage

Error message text if the file size is larger than the allowed. 'File is too big!'

typeErrorMessage

Error message text if file type is not supported. 'Unsupported file type'