Add an Overlay class (#2725)

* add an overlay class Refs #656. * Rename "Overlay" to "ElementMarker" (#2804) * Rename "Overlay" to "DOMMarker" * Rename DOMMarker to ElementMarker * Remove unnecessary @Lends annotation
mapbox · Jun 30, 2016 · 6a146a9 · 6a146a9
1 parent d6d8ac4
commit 6a146a9
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 0 deletions.
diff --git a/debug/markers.html b/debug/markers.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+
+        .mapboxgl-marker {
+            width: 10px;
+            height: 10px;
+            background: red;
+            margin-top: -5px;
+            margin-left: -5px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='mapbox-gl.js'></script>
+<script src='access-token.js'></script>
+
+<script>
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/streets-v9',
+    hash: true
+});
+
+function addRandomMarker() {
+    var bounds = map.getBounds();
+    var s = bounds.getSouth();
+    var n = bounds.getNorth();
+    var w = bounds.getWest();
+    var e = bounds.getEast();
+
+    var lng = w + (e - w) * Math.random();
+    var lat = s + (n - s) * Math.random();
+
+    var marker = new mapboxgl.ElementMarker()
+        .setLngLat([lng, lat])
+        .addTo(map);
+
+    marker.getElement().onclick = function(e) {
+        alert('Hello world');
+        e.stopPropagation();
+    };
+}
+
+for (var i = 0; i < 100; i++) addRandomMarker();
+
+map.addControl(new mapboxgl.Navigation());
+</script>
+
+</body>
+</html>
diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
@@ -229,6 +229,13 @@
     border-bottom-right-radius: 0;
 }
 
+.mapboxgl-marker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
+}
+
 .mapboxgl-crosshair,
 .mapboxgl-crosshair .mapboxgl-interactive,
 .mapboxgl-crosshair .mapboxgl-interactive:active {

diff --git a/js/mapbox-gl.js b/js/mapbox-gl.js
@@ -11,6 +11,7 @@ mapboxgl.Navigation = require('./ui/control/navigation');
 mapboxgl.Geolocate = require('./ui/control/geolocate');
 mapboxgl.Attribution = require('./ui/control/attribution');
 mapboxgl.Popup = require('./ui/popup');
+mapboxgl.ElementMarker = require('./ui/element_marker');
 
 mapboxgl.GeoJSONSource = require('./source/geojson_source');
 mapboxgl.VideoSource = require('./source/video_source');

diff --git a/js/ui/element_marker.js b/js/ui/element_marker.js
@@ -0,0 +1,87 @@
+/* eslint-disable */
+'use strict';
+
+module.exports = ElementMarker;
+
+var DOM = require('../util/dom');
+var LngLat = require('../geo/lng_lat');
+
+/**
+ * Creates a marker component
+ * @class ElementMarker
+ * @param {HTMLElement=} element DOM element to use as a marker (creates a div element by default)
+ * @example
+ * var marker = new mapboxgl.ElementMarker()
+ *   .setLngLat([30.5, 50.5])
+ *   .addTo(map);
+ */
+function ElementMarker(element) {
+    if (!element) {
+        element = DOM.create('div');
+    }
+    element.classList.add('mapboxgl-marker');
+    this._el = element;
+    this._update = this._update.bind(this);
+}
+
+ElementMarker.prototype = {
+    /**
+     * Attaches the marker to a map
+     * @param {Map} map
+     * @returns {ElementMarker} `this`
+     */
+    addTo: function(map) {
+        this.remove();
+        this._map = map;
+        map.getCanvasContainer().appendChild(this._el);
+        map.on('move', this._update);
+        this._update();
+        return this;
+    },
+
+    /**
+     * Removes the marker from a map
+     * @example
+     * var marker = new mapboxgl.ElementMarker().addTo(map);
+     * marker.remove();
+     * @returns {ElementMarker} `this`
+     */
+    remove: function() {
+        if (this._map) {
+            this._map.off('move', this._update);
+            this._map = null;
+        }
+        var parent = this._el.parentNode;
+        if (parent) parent.removeChild(this._el);
+        return this;
+    },
+
+    /**
+     * Get the marker's geographical location
+     * @returns {LngLat}
+     */
+    getLngLat: function() {
+        return this._lngLat;
+    },
+
+    /**
+     * Set the marker's geographical position and move it.
+     * @param {LngLat} lnglat
+     * @returns {Popup} `this`
+     */
+    setLngLat: function(lnglat) {
+        this._lngLat = LngLat.convert(lnglat);
+        this._update();
+        return this;
+    },
+
+    getElement: function() {
+        return this._el;
+    },
+
+    _update: function() {
+        if (!this._map) return;
+        var pos = this._map.project(this._lngLat);
+        DOM.setTransform(this._el, 'translate(' + pos.x + 'px,' + pos.y + 'px)');
+    }
+};