Class: Popup

new Popup()

Source:

• src/component/Popup.js, line 16

Example

preview
    var olMap = new ol.Map({
        layers: [
            new ol.layer.Tile({
               source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([-8.751278, 40.611368]),
            zoom: 12
        })
    })
    var mapComponent = Ext.create('GeoExt.component.Map', {
        map: olMap,
        pointerRest: true,
        pointerRestInterval: 750,
        pointerRestPixelTolerance: 5,
        renderTo: Ext.getBody(),
        height: 200
    });
    var popup = Ext.create('GeoExt.component.Popup', {
        map: olMap,
        width: 140
    });
    mapComponent.on('pointerrest', function(evt) {
        var coord = evt.coordinate;
        var transformed = ol.proj.toLonLat(coord);
        var hdms = ol.coordinate.toStringHDMS(transformed);
        hdms = hdms.replace(/([NS])/, '$1<br>');
        popup.setHtml('<p><strong>Pointer rested on</strong>' +
                '<br /><code>' + hdms + '</code></p>');
        popup.position(coord);
        popup.show();
    });
    mapComponent.on('pointerrestout', popup.hide, popup);

The above example loads the provided CSS-file `resources/css/gx-popup.css`
and also uses the following inline CSS:

    .gx-popup p {
        padding: 5px 5px 0 5px;
        border-radius: 7px;
        background-color: rgba(255,255,255,0.85);
        border: 3px solid white;
        margin: 0;
        text-align: center;
    }