new SteerpathMarker(elementopt, optionsopt)
Creates a marker component to the map.
Example
mapboxMap.once('load', function(e){
addMarkers();
});
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"icon": "marker",
"layerIndex": 1,
"message": "miu",
"iconSize": [40, 40],
"buildingRef": "your_building_ref"
},
"geometry": {
"type": "Point",
"coordinates": [1, 1]
}
},{
"type": "Feature",
"properties": {
"icon": "marker",
"message": "mau",
"layerIndex": 3,
"iconSize": [40, 40],
"buildingRef": "your_building_ref"
},
"geometry": {
"type": "Point",
"coordinates": [2, 2]
}
}
]
}
//Steerpath marker
function addMarkers(){
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.style.display = "block";
// create the popup
var myPopup = new mapboxgl.Popup({offset:[0, -30]})
.setText(marker.properties.message);
// add marker to map
new steerpath.Marker(el, {offset: [-marker.properties.iconSize[0] / 2, -marker.properties.iconSize[1] / 2]})
.setLngLat(marker.geometry.coordinates)
.setPopup(myPopup)
.setLayerIndex(marker.properties.layerIndex)
.setBuildingRef(marker.properties.buildingRef)
.addTo(mapboxMap);
});
}
Parameters
Name | Type | Attributes | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
element |
HTMLElement |
<optional> |
DOM element to use as a marker (creates a div element by default) | ||||||||
options |
Object |
<optional> |
Properties
|
Methods
(static) addTo(map) → {SteerpathMarker}
Attaches the marker to a map
Parameters
Name | Type | Description |
---|---|---|
map |
Map | Represents the map on your page. |
(static) getBuildingRef() → {string}
Get the unique identifier of the building to which marker is added.
Returns
Identifier string of the building to which marker is added.
- Type
- string
(static) getElement() → {HTMLElement}
Get the markers DOM element. You can use this to access the elements style properties.
Returns
Markers DOM element
- Type
- HTMLElement
(static) getLayerIndex() → {number}
Get the marker's layer index
Returns
Marker's layer index number
- Type
- number
(static) getLngLat() → {LngLat}
Get the marker's geographical location
Returns
marker's latitude and longitude coordinates in LngLat object
- Type
- LngLat
(static) getPopup() → {Popup}
Returns the Popup instance that is bound to the Marker
Returns
popup
- Type
- Popup
(static) setBuildingRef() → {SteerpathMarker}
Give the marker the identifier string of the building where you want to have it.
Parameters
Type | Description |
---|---|
string | The unique identifier of the building |
(static) setLayerIndex() → {SteerpathMarker}
Set the marker' layer index to be the one which floor you want to have it.
Parameters
Type | Description |
---|---|
number | layer index of the building to which marker is added |
(static) setLngLat() → {SteerpathMarker}
Set the marker's geographical position and move it.
Parameters
Type | Description |
---|---|
LngLat | Longitude and latitude coordinates of the marker. |
(static) setPopup(popupopt) → {SteerpathMarker}
Binds a Popup to the Marker
Parameters
Name | Type | Attributes | Description |
---|---|---|---|
popup |
Popup |
<optional> |
an instance of the Mapbox's Popup class. If undefined or null, any popup set on this Steerpathmarker instance is unset |
(static) togglePopup() → {SteerpathMarker}
Opens or closes the bound popup, depending on the current state