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.
customViewDefaultHeight	number	undefined	The default height of custom views when customViewHeight is not defined.

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.
email	string	null	An email address.
facebook	string	null	A facebook address.
twitter	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
“1”
“2”
“3”
“4”
“5”
“6”
“7”
“8”
“9”
“10”
“11”
“12”
“13”
“14”
“15”
“16”
“17”
“18”
“19”
“20”
“accessible”
“accommodation”
“air_quality_alert”
“air_quality_good”
“air_quality”
“airport”
“alert”
“aroundme”
“art”
“atm”
“autumn”
“badge_reader”
“bank”
“bathroom”
“bed_breakfast”
“beer”
“bin_full”
“bin”
“blue_meter”
“border”
“burgers”
“bus”
“business”
“camping”
“casino”
“charge_point”
“childcare”
“chinese_thai”
“christianity”
“church”
“cinema”
“clear”
“click_and_collect”
“co_two_detector”
“cocktail”
“coffee”
“collaboration_space”
“cycling”
“dawn”
“day”
“defibrillator”
“dentist”
“department”
“desk_available”
“desk_occupied”
“desk”
“digital_sign”
“dining_room”
“dir_elevator_h”
“dir_elevator”
“dir_enter_map_h”
“dir_enter_map”
“dir_ferry_train”
“dir_ferry”
“dir_fork_left”
“dir_fork_right”
“dir_merge”
“dir_ramp_left”
“dir_ramp_right”
“dir_roundabout_left”
“dir_roundabout_right”
“dir_route_end”
“dir_route_start”
“dir_straight_ahead”
“dir_turn_left”
“dir_turn_right”
“dir_turn_sharp_left”
“dir_turn_sharp_right”
“dir_u_turn_left”
“dir_u_turn_right”
“dir_veer_left”
“dir_veer_right”
“donuts”
“driveway”
“dusk”
“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”
“fog”
“food_drink”
“football”
“forest”
“fridge”
“fuel”
“gallery”
“gas_meter”
“general”
“golf”
“google_plus”
“groceries”
“health”
“historic_monument”
“home_apartment”
“home”
“homeware”
“hospital”
“hostel”
“hotel”
“humidity_high”
“humidity_low”
“humidity_ok”
“humidity”
“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”
“nav_container”
“nav_crosslights”
“nav_enter”
“nav_escalator_down”
“nav_escalator_up”
“nav_exit”
“nav_finish”
“nav_lift”
“nav_stairs_down”
“nav_stairs_up”
“nav_start”
“night_shopping”
“night”
“observation_point”
“observatory”
“occupancy_sensor”
“offices”
“oven”
“park”
“parking”
“payphone”
“penguin”
“person”
“pharmacy”
“photo”
“picasa”
“pin”
“pizza”
“place_of_worship”
“playing_field”
“police”
“positioning_beacon”
“post_office”
“printer”
“race_track”
“rain”
“reception”
“remote_control”
“river”
“sailing”
“seafood”
“security_alarm”
“security_camera”
“shooting”
“shopping”
“skiing”
“smart_post”
“smoke_detector”
“snow”
“solar_panels”
“spa”
“sports_field”
“sports”
“spring”
“stairs”
“star”
“stationery”
“steak”
“storage”
“subway”
“summer”
“sun”
“sushi”
“taxi”
“technology”
“telephone_booth”
“temperature_high”
“temperature_low”
“temperature_sensor”
“thermostat”
“ticket”
“toilet_ladies”
“toilet_men”
“tourist_info”
“town_hall”
“traffic_counter”
“train”
“tram”
“twitter”
“uber”
“vegan”
“vegetarian”
“vet”
“video_conference”
“video”
“vimeo”
“virtual_tour”
“vr_experience”
“warning”
“washing_machine”
“water_meter”
“wi_fi_point”
“wikipedia”
“wind_turbine”
“wine”
“winter”
“working_group”
“youtube”
“zoo”