SteerpathMarker

SteerpathMarker

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
Name Type Attributes Description
offset PointLike <optional>
The offset in pixels as a PointLike object to apply relative to the element's top left corner. Negatives indicate left and up.

Methods

(static) addTo(map) → {SteerpathMarker}

Attaches the marker to a map
Parameters
Name Type Description
map Map Represents the map on your page.
Returns
Created SteerpathMarker object
Type
SteerpathMarker

(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) remove() → {SteerpathMarker}

Removes the marker from a map
Returns
Instance of Steerpathmarker
Type
SteerpathMarker

(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
Returns
Instance of Steerpathmarker
Type
SteerpathMarker

(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
Returns
Instance of Steerpathmarker
Type
SteerpathMarker

(static) setLngLat() → {SteerpathMarker}

Set the marker's geographical position and move it.
Parameters
Type Description
LngLat Longitude and latitude coordinates of the marker.
Returns
Instance of Steerpathmarker
Type
SteerpathMarker

(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
Returns
Instance of Steerpathmarker
Type
SteerpathMarker

(static) togglePopup() → {SteerpathMarker}

Opens or closes the bound popup, depending on the current state
Returns
Instance of Steerpathmarker
Type
SteerpathMarker