Leaflet - custom pop-up box (popup)

There are two methods, one directly change the CSS, one is through inheritance expand popup.

Method One: CSS change

Here is a style emptied the original settings (probably incomplete clear, but offers ideas)

.l-popup {
  &--no-style {
    /* 用不了 &#{&} 这种写法*/
    .leaflet-popup-close-button.leaflet-popup-close-button {
      display: none;
    }
    .leaflet-popup-tip-container.leaflet-popup-tip-container {
      display: none;
    }
    .leaflet-popup-content-wrapper.leaflet-popup-content-wrapper {
      background: transparent;
      border-radius: 0;
      padding: 0;
      .leaflet-popup-content.leaflet-popup-content {
        margin: 0;
      }
    }
  }
}

Method two: expanding popup

This approach allows you to control the leaflet generate popup to create a DOM period, but will not be used to expand the popup by default when bindPopup, should also develop a bindPopup.

For example: Leaflet Custom popup

• _initLayout
  Leaflet/Popup.js at 863cf744616cba2d3cf4e8b28c825bcea1edd2e4 · Leaflet/Leaflet

• bindPopup
  Leaflet/Popup.js at 863cf744616cba2d3cf4e8b28c825bcea1edd2e4 · Leaflet/Leaflet

// create custom popup
L.CustomPopup = L.Popup.extend({
    _initLayout: function () {
        var prefix = 'leaflet-popup',
            container = this._container = L.DomUtil.create('div',
                prefix + ' ' + (this.options.className || '') +
                ' leaflet-zoom-animated');

        var wrapper = container;
        this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);

        L.DomEvent
            .disableClickPropagation(wrapper)
            .disableScrollPropagation(this._contentNode)
            .on(wrapper, 'contextmenu', L.DomEvent.stopPropagation);
    },
});

// add bindCustomPopup
L.Layer.include({

    // @method bindPopup(content: String|HTMLElement|Function|Popup, options?: Popup options): this
    // Binds a popup to the layer with the passed `content` and sets up the
    // neccessary event listeners. If a `Function` is passed it will receive
    // the layer as the first argument and should return a `String` or `HTMLElement`.
    bindCustomPopup: function (content, options) {

        if (content instanceof L.Popup) {
            L.setOptions(content, options);
            this._popup = content;
            content._source = this;
        } else {
            if (!this._popup || options) {
                this._popup = new L.CustomPopup(options, this);
            }
            this._popup.setContent(content);
        }

        if (!this._popupHandlersAdded) {
            this.on({
                click: this._openPopup,
                remove: this.closePopup,
                move: this._movePopup
            });
            this._popupHandlersAdded = true;
        }

        return this;
    }
});

// using
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

var marker = L.marker([51.5, -0.09]).addTo(mymap);
marker.bindCustomPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

var popup = (new L.CustomPopup({ className: 'custom-popup' }))
    .setLatLng([51.51, -0.09])
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(mymap);