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.
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
“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”
v0.1.2126
Themes L.Wrld.themes
UI Layers L.Marker L.Popup
Heatmaps L.Wrld.Heatmap
Events Event objects
Services (Optional) WrldPoiApi