Ext.require([
'GeoExt.component.Map'
]);
var olMap;
var mapComp;
var popup;
Ext.application({
name: 'Popup',
launch: function() {
var description;
olMap = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.StadiaMaps({
layer: 'stamen_watercolor'
})
}),
new ol.layer.Tile({
source: new ol.source.StadiaMaps({
layer: 'stamen_terrain_labels'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-122.416667, 37.783333]),
zoom: 12
})
});
popup = Ext.create('GeoExt.component.Popup', {
map: olMap,
width: 140
});
mapComp = Ext.create('GeoExt.component.Map', {
title: 'GeoExt.component.Map Example',
map: olMap,
region: 'center',
pointerRest: true,
pointerRestInterval: 750,
pointerRestPixelTolerance: 5
});
// Add a pointerrest handler to the map component to render the popup.
mapComp.on('pointerrest', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326')
);
// Insert a linebreak after either N or S in hdms
hdms = hdms.replace(/([NS])/, '$1
');
// set content and position popup
popup.setHtml('
Pointer rested on' +
'' + hdms + '