WrldMarkerController
The WrldMarkerController
is an optional component for creating and manipulating styled markers.
Dependencies
- JQuery
- wrld.css
- marker_controller.js
For a full example of how to use the WrldMarkerController
, see this example.
Constructor
var markerController = new WrldMarkerController(map, options);
Argument | Type | Description |
---|---|---|
map | L.Wrld.map |
The map object to associate the Marker Controller with. |
options | object | An object containing optional parameters, described below. |
Options
Options | Type | Default | Description |
---|---|---|---|
searchbar | WrldSearchbar | An instance of a WrldSearchbar from which to automatically generate markers. Each search result will generate a marker with an appropriate icon and title, which will be cleared when the search is cleared. |
|
poiViewsEnabled | boolean | false | Whether or not POI Views will be created for the markers. |
Methods
markerController.addMarker(id, latLng, options)
Creates a marker on the map with the given properties.
Argument | Type | Description |
---|---|---|
id | number | A unique id to associate with the new marker. |
latLng | L.LatLng | The location to place the marker at. |
options | object | An object containing optional parameters, described below. |
Options
Options | Type | Default | Description |
---|---|---|---|
elevation | number | 0 | Altitude of the marker above ground or sea level in meters. |
elevationMode | string | ‘heightAboveGround’ | Whether altitude is measured above ground level (“heightAboveGround”) or sea level (“heightAboveSeaLevel”). |
isIndoor | boolean | * | Whether the marker is indoors. Defaults to whatever the current state is. |
indoorId | string | * | The id of the indoor map this marker is within, if any. Defaults to the current indoor map, if any. |
floorIndex | number | * | The index of the floor this marker is on, if any. Defaults to the current floor, if any. |
iconKey | string | A string that describes the icon that will be used for the marker. See a list of valid iconKeys below. Leave unspecified if you want to set your own icons. | |
poiView | object | SearchResult | null | An object containing information that will be displayed inside the POI View. This option will only be used if POI Views have been enabled in constructor. |
PoiView
A list of properties that can be set to populate the POI View.
Properties | Type | Default | Description |
---|---|---|---|
title | string | ”” | An appropriate title for the POI (i.e. place name). |
subtitle | string | null | An approprate subtitle for the POI. |
imageUrl | string | null | A URL to an image to display. |
customView | string | null | A URL to HTML to display. This is used instead of the imageUrl . |
customViewHeight | number | null | The height of the custom view. |
tags | [string] | [] | An array of readable tags. |
address | string | null | An address. |
phone | string | null | A phone number. |
web | string | null | A website. |
string | null | An email address. | |
string | null | A facebook address. | |
string | null | A twitter address. | |
description | string | null | A description. |
markerController.removeMarker(marker)
Remove the given marker.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to remove. |
markerController.removeAllMarkers()
Remove all markers.
markerController.hideMarker(marker)
Hide the given marker, without removing it permanently.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to hide. |
markerController.showMarker(marker)
Show a currently hidden marker.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to show. |
markerController.selectMarker(marker)
Select the given marker, changing its display. This will also deselect the currently selected marker.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to select. |
markerController.deselectMarker()
Deselect the currently selected marker.
markerController.moveMarker(marker, latLng)
Move a marker to a new location.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to move. |
latLng | L.LatLng | The LatLng to move the marker to. |
markerController.updateMarker(marker, options)
Update the options
of the marker with the given id.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to update. |
options | object | The new set of options. The same values as addMarker can be passed with the exception of poiView . |
markerController.getAllMarkerIds()
Returns an array of all marker ids.
markerController.getMarker(id)
Returns the marker associated with the given id.
Argument | Type | Description |
---|---|---|
id | number | The id of the marker to be returned. |
markerController.openPoiCard(marker)
Opens the POI Card of a marker. The POI Card is a small popup, showing minimal information about a POI.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to open the POI Card of. |
markerController.closePoiCard(marker)
Closes the POI Card of a marker.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to close the POI Card of. |
markerController.openPoiView(marker)
Opens the POI View of a marker. The POI View is a larger popup, showing complete information about a POI.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to open the POI View of. |
markerController.closePoiView(marker)
Closes the POI View of a marker.
Argument | Type | Description |
---|---|---|
marker | L.Marker | number | The marker, or marker id, to close the POI View of. |
Events
The following events can be listened to when the searchbar
option has been set in the constructor :
Event | Data | Description |
---|---|---|
searchresultaddmarker | SearchResultAddMarkerEvent | Fired when a marker associated with a search result has been added. |
searchresultremovemarker | SearchResultRemoveMarkerEvent | Fired when the marker associated with a search result has been removed. |
SearchResultAddMarkerEvent
Property | Type | Description |
---|---|---|
marker | L.Marker | The marker associated with the search result. |
result | SearchResult | Data for the search result associated with the marker. |
SearchResultRemoveMarkerEvent
Property | Type | Description |
---|---|---|
marker | L.Marker | The marker associated with the search result. |
sourceId | number | string | The source id of the search result associated with the removed marker. |
IconKey values
These values can be passed as the iconKey
option to addMarker
to create a marker with any of the following icons:
iconKey | Icon |
---|---|
“aroundme” | ![]() |
“accessible” | ![]() |
“accommodation” | ![]() |
“airport” | ![]() |
“alert” | ![]() |
“art” | ![]() |
“atm” | ![]() |
“badge_reader” | ![]() |
“bank” | ![]() |
“bathroom” | ![]() |
“bed_breakfast” | ![]() |
“beer” | ![]() |
“bin_full” | ![]() |
“bin” | ![]() |
“border” | ![]() |
“burgers” | ![]() |
“bus” | ![]() |
“business” | ![]() |
“camping” | ![]() |
“casino” | ![]() |
“charge_point” | ![]() |
“childcare” | ![]() |
“chinese_thai” | ![]() |
“christianity” | ![]() |
“church” | ![]() |
“cinema” | ![]() |
“click_and_collect” | ![]() |
“co_two_detector” | ![]() |
“cocktail” | ![]() |
“coffee” | ![]() |
“collaboration_space” | ![]() |
“cycling” | ![]() |
“defibrillator” | ![]() |
“dentist” | ![]() |
“department” | ![]() |
“desk” | ![]() |
“digital_sign” | ![]() |
“dining_room” | ![]() |
“donuts” | ![]() |
“driveway” | ![]() |
“education” | ![]() |
“electricity_meter” | ![]() |
“elevator” | ![]() |
“emergency_exit” | ![]() |
“entertainment” | ![]() |
“escalator” | ![]() |
“events” | ![]() |
“facebook” | ![]() |
“farm” | ![]() |
“fashion_kids” | ![]() |
“fashion_men” | ![]() |
“fashion_women” | ![]() |
“fashion” | ![]() |
“ferry” | ![]() |
“fire_extinguisher” | ![]() |
“fire” | ![]() |
“fireplace” | ![]() |
“first_aid” | ![]() |
“fishing” | ![]() |
“florist” | ![]() |
“food_drink” | ![]() |
“football” | ![]() |
“forest” | ![]() |
“fridge” | ![]() |
“fuel” | ![]() |
“gallery” | ![]() |
“gas_meter” | ![]() |
“general” | ![]() |
“golf” | ![]() |
“google_plus” | ![]() |
“groceries” | ![]() |
“health” | ![]() |
“historic_monument” | ![]() |
“home_apartment” | ![]() |
“home” | ![]() |
“homeware” | ![]() |
“hospital” | ![]() |
“hostel” | ![]() |
“hotel” | ![]() |
“hvac_unit” | ![]() |
“indian” | ![]() |
“islam” | ![]() |
“judaism” | ![]() |
“kitchen” | ![]() |
“lake” | ![]() |
“library” | ![]() |
“lifeguard” | ![]() |
“limo” | ![]() |
“link” | ![]() |
“lockers” | ![]() |
“lodge” | ![]() |
“logistics” | ![]() |
“meeting_room_available_soon” | ![]() |
“meeting_room_available” | ![]() |
“meeting_room_unavailable” | ![]() |
“meeting_room” | ![]() |
“message” | ![]() |
“meter” | ![]() |
“mobile_phone” | ![]() |
“mountain” | ![]() |
“music” | ![]() |
“my_location” | ![]() |
“night_shopping” | ![]() |
“observation_point” | ![]() |
“observatory” | ![]() |
“occupancy_sensor” | ![]() |
“offices” | ![]() |
“oven” | ![]() |
“park” | ![]() |
“parking” | ![]() |
“payphone” | ![]() |
“person” | ![]() |
“pharmacy” | ![]() |
“photo” | ![]() |
“picasa” | ![]() |
“pin” | ![]() |
“pizza” | ![]() |
“place_of_worship” | ![]() |
“playing_field” | ![]() |
“police” | ![]() |
“positioning_beacon” | ![]() |
“post_office” | ![]() |
“printer” | ![]() |
“race_track” | ![]() |
“reception” | ![]() |
“remote_control” | ![]() |
“river” | ![]() |
“sailing” | ![]() |
“seafood” | ![]() |
“security_alarm” | ![]() |
“shooting” | ![]() |
“shopping” | ![]() |
“skiing” | ![]() |
“smart_post” | ![]() |
“smoke_detector” | ![]() |
“solar_panels” | ![]() |
“spa” | ![]() |
“sports_field” | ![]() |
“sports” | ![]() |
“stairs” | ![]() |
“star” | ![]() |
“stationery” | ![]() |
“steak” | ![]() |
“storage” | ![]() |
“subway” | ![]() |
“sushi” | ![]() |
“taxi” | ![]() |
“technology” | ![]() |
“telephone_booth” | ![]() |
“temperature_sensor” | ![]() |
“thermostat” | ![]() |
“ticket” | ![]() |
“toilet_ladies” | ![]() |
“toilet_men” | ![]() |
“tourist_info” | ![]() |
“town_hall” | ![]() |
“traffic_counter” | ![]() |
“train” | ![]() |
“tram” | ![]() |
“bus” | ![]() |
“twitter” | ![]() |
“uber” | ![]() |
“education” | ![]() |
“vegan” | ![]() |
“vegetarian” | ![]() |
“vet” | ![]() |
“video_conference” | ![]() |
“video” | ![]() |
“vimeo” | ![]() |
“virtual_tour” | ![]() |
“vr_experience” | ![]() |
“warning” | ![]() |
“washing_machine” | ![]() |
“wi_fi_point” | ![]() |
“wikipedia” | ![]() |
“wind_turbine” | ![]() |
“wine” | ![]() |
“working_group” | ![]() |
“youtube” | ![]() |
“zoo” | ![]() |