Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Elements
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Elements

Map

The <salla-map> web component displays geographical maps from various sources. It supports multiple layers, tiled and full-image sources, adding markers, and interaction through events.

Example#

Map

Usage#

HTML
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
API Keyapi-keyValid Google Maps API Key.stringundefined
LatitudelatSets the map's latitude.numberundefined
LongitudelngSets the map's longitude.numberundefined
Modal Titlemodal-titleModal Titlestringundefined
NamenameFile input name for the native formDatastring'location'
Read OnlyreadonlyWhether or not the actions are disabled or enabled.booleanfalse
RequiredrequiredSet if the location input is required or notbooleanfalse
SearchableseachableWhether or not to show the search bar.booleanfalse
ThemethemeSets map style.string'light'
ZoomzoomSets the inital map zoom.number10

Events#

EventDescriptionType
currentLocationChangedThis event will be fired when the current location is selected.CustomEvent<any>
invalidInputThis event will be fired when the input is invalid.CustomEvent<any>
mapClickedThis event will be fired when the map is clicked.CustomEvent<any>
selectedThis event will be fired when the location is selected.CustomEvent<any>

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as open which opens the map component.
MethodDescriptionReturn Type
open()Open the map componentPromise<HTMLElement>
Modified at 2024-08-18 08:38:56
Previous
Loading
Next
Modal