jungle-gif

Add Marker

maps

Marker

Creates a marker component

                        new Marker(options: Object?, legacyOptions: Options?)

Parameters

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>

Let's find a way together

Get in touch to know about our Pricing Plans

Contact Us
Jungleworks