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 | 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 | Wrld.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.
markerController.removeMarker(marker)
Remove the given marker.
Argument | Type | Description |
---|---|---|
marker | Wrld.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 | Wrld.Marker | number | The marker, or marker id, to hide. |
markerController.showMarker(marker)
Show a currently hidden marker.
Argument | Type | Description |
---|---|---|
marker | Wrld.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 | Wrld.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 | Wrld.Marker | number | The marker, or marker id, to move. |
latLng | Wrld.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 | Wrld.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 | Wrld.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 | Wrld.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 | Wrld.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 | Wrld.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 | Wrld.Marker | The marker associated with the search result. |
result | SearchResult | Data for the search result associated with the marker. |
SearchResultRemoveMarkerEvent
Property | Type | Description |
---|---|---|
marker | Wrld.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” |