Config Options
Last updated:
All these config options can be set on individual mapInput elements using data attributes with the config name in
kebab case. For example to customise the pinBackground, you can use the data-pin-background attribute.
To override global config options, you can do so before mapInput is initialized. For example, to change the
default iconPrefix:
import {mapInput} from '@javaabu/js-map-selector';
mapInput.config.iconPrefix = 'zmdi';
mapInput.init();
| Config Option | Type | Default | Description |
|---|---|---|---|
| iconPrefix | String | 'fa' |
Prefix to be used for icons when setting a pin icon |
| iconClass | String | 'map-selector-icon' |
Additional class added to pin icons |
| mapSelector | String | '.map-selector-map' |
Selector for the element to display the map |
| latInput | String | 'input.map-selector-lat' |
Selector for latitude input |
| lngInput | String | 'input.map-selector-lng' |
Selector for longitude input |
| searchInput | String | '.map-selector-search' |
Selector for the search input to be used within the map to set the location by search |
| lat | Number | null |
The default latitude. Must be a valid latitude value. If latInput is available, will load the latitude from its value. |
| lng | Number | null |
The default longitude. Must be a valid longitude value. If lngInput is available, will load the longitude from its value. |
| radius | Number | null |
The radius of the circle when using the radius feature. If radiusInput is available, will load the radius from its value. To use this enableRadius must be true. The radius can be set in either meters or kilometers by using the radiusUnit config. |
| polygon | String | null |
The path of the polygon as a WKT string when using the polygon feature. The wrapping POLYGON() string can be omitted if desired. Only supports polygons with a single path. All points in the path must be valid latitude and longitude values. Must have more than 2 points and the first and last points should be same. If polygonInput is available, will load the polygon from its value. To use this enablePolygon must be set to true. |
| clearBtn | String | '.map-selector-clear-btn' |
Selector for the clear button that's used to clear the inputs |
| zoom | Integer | 14 |
Map zoom level |
| disabled | Boolean | false |
Whether to disable the map selector inputs. This will make all map elements (marker, circle, polygon) uneditable and will also hide the search input. This option can be useful when only displaying map elements without any inputs. |
| animate | Boolean | true |
Whether to animate in the map pin. This will add the pinAnimationClass to the marker when the map is initially displayed and remove it after animation is ended. |
| pinAnimationClass | String | 'map-selector-marker-drop' |
The CSS class used to animate the marker. |
| enableMarker | Boolean | true |
Whether the marker should be displayed. |
| pinImage | String | null |
Url of the image to use for the marker. If using this option, pinIcon, pinScale, pinBackground, pinBorderColor and pinGlyphColor will not apply. |
| pinIcon | String | null |
Icon to be displayed as the marker pin glyph |
| pinScale | Number | 1.5 |
The size of the marker. Will not work with pinImage option. |
| pinClass | String | 'map-selector-marker' |
Additional CSS class added to the marker. Can be used to further style the marker. |
| pinBackground | String | null |
Background color for the marker pin as a CSS color string. |
| pinBorderColor | String | null |
Border color for the marker pin as a CSS color string. |
| pinGlyphColor | String | null |
Background color for the marker pin as a CSS color string. The glyph is the circle that's displayed on the pin. |
| enableRadius | Boolean | false |
Whether the radius input circle should be displayed. |
| radiusInput | String | 'input.map-selector-radius' |
Selector for the radius input. |
| radiusUnit | String | 'm' |
Which unit to use for radius. Can be either 'm' for meters or 'km' for kilometers. |
| radiusPrecision | Integer | 0 |
How many decimal places should be used for the radius when setting the radiusInput value when the radius is updated upon editing the circle. |
| circleStrokeColor | String | '#FF9800' |
Border color for the radius input circle as a CSS color string. |
| circleStrokeOpacity | Number | 0.8 |
Opacity of the radius input circle border. |
| circleStrokeWeight | Integer | 3 |
Thickness of the radius input circle border. |
| circleFillColor | String | '#FF9800' |
Background color for the radius input circle as a CSS color string. |
| circleFillOpacity | Number | 0.2 |
Opacity of the radius input circle background. |
| enablePolygon | Boolean | false |
Whether the polygon should be displayed. |
| polygonRadius | Number | 10 |
"Radius" (in meters) of the default square polygon when no polygon path is provided. This will create a square of length twice the size with the mid point at the provided lat and lng. |
| polygonInput | String | '.map-selector-polygon' |
Selector for the polygon input. |
| polygonStrokeColor | String | '#FF5722' |
Border color for the polygon as a CSS color string. |
| polygonStrokeOpacity | Number | 0.8 |
Opacity of the polygon border. |
| polygonStrokeWeight | Integer | 3 |
Thickness of the polygon border. |
| polygonFillColor | String | '#FF5722' |
Background color of the polygon as a CSS color string. |
| polygonFillOpacity | Number | 0.2 |
Opacity of the polygon background. |
| mapId | String | 'DEMO_MAP_ID' |
Id of the map if using a customized Google Map |