Creates a marker component
new Marker(options: Object?, legacyOptions: Options?)
options
| Name | Type (Default) | Description |
|---|---|---|
| options.element | HTML Element | DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker. |
| options.anchor | string(center) | A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . |
| options.offset | Array of two points in pixel | The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. |
| options.color | string(#3FB1CE) | The color to use for the default marker if options.element is not provided. The default is light blue. |
| options.draggable | boolean(false) | A boolean indicating whether or not a marker is able to be dragged to a new position on the map. |
| options.rotation | number(0) | The rotation angle of the marker in degrees, relative to its respective Marker rotationAlignment setting. A positive value will rotate the marker clockwise. |
| options.pitchAlignment | string(auto) | map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment . |
| options.rotationAlignment | string(auto) | map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport . |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Create a draggable Marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://maps.flightmap.io/flightmapjs"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<style>
.coordinates {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
bottom: 40px;
left: 10px;
padding: 5px 10px;
margin: 0;
font-size: 11px;
line-height: 18px;
border-radius: 3px;
display: none;
}
</style>
<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>
<script>
var coordinates = document.getElementById('coordinates');
var map = new flightmap.Map({
container: 'map',
style: 'style-dark.json', //hosted style id
center: [-77.38, 39],
zoom: 2,
accessToken: '<your access token here>'
});
var marker = new flightmap.Marker({
draggable: true
})
.setLngLat([0, 0])
.addTo(map);
function onDragEnd() {
var lngLat = marker.getLngLat();
coordinates.style.display = 'block';
coordinates.innerHTML =
'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
}
marker.on('dragend', onDragEnd);
</script>
</body>
</html>