Skip to main content

SC.Menu dynamic positioning with OpenLayers

In one app I needed to allow the user to CTRL-click on an OpenLayers map to popup a tool menu. Since all the rest of the app is Sproutcore based I also wanted the menu to have the same look&feel.

Sproutcore already has a menu view which is called SC.MenuPane. Unfortunately SC.MenuPane can be positioned only relatively to another SC.View, but what if I want to position the menu exactly where I clicked on the map?

The solution turns out to be pretty simple and requires us to override only one MenuPane method.
The method is positionPane and can be overridden at definition time by adding it to the mixin as done below (gotta love javascript, huh?):

Maps.openLayersController.menuPane: SC.MenuPane.create({
 layout: {width: 120},
 itemHeight: 25,
 items: [
  { title: '_geocode'.loc(), icon: '', action: "geocode" },
  { title: '_streetview'.loc(), icon: 'icon-streetview-16', action: "streetview" }
 /** @private
  The ideal position for a picker pane is just below the anchor that
  triggered it + offset of specific preferType. Find that ideal position,
  then call fitPositionToScreen to get final position. If anchor is missing,
  fallback to center.
 positionPane: function(useAnchorCached) {
  useAnchorCached = useAnchorCached && this.get('anchorCached');

  var anchor = useAnchorCached ? this.get('anchorCached') : this.get('anchorElement'),
   layout       = this.get('layout');

  if ( anchor && anchor.x && anchor.y ) {
   this.adjust({ width: layout.width, height: layout.height, left: anchor.x, top: anchor.y });
   // if no anchor view has been set for some reason, just center.
  } else {
   this.adjust({ width: layout.width, height: layout.height, centerX: 0, centerY: 0 });
  return this;

the code for the OpenLayers control that pops-up the menu is the following:

// click control for geocoding and street view
var clickControl = new OpenLayers.Control.ModClick(
  onClick: function(evt){
   // check that CTRL is pressed while clicking
   if(evt.ctrlKey) {
    Maps.openLayersController.menuPane.popup({x:evt.x, y:evt.y});


Popular posts from this blog

From 0 to ZFS replication in 5m with syncoid

The ZFS filesystem has many features that once you try them you can never go back. One of the lesser known is probably the support for replicating a zfs filesystem by sending the changes over the network with zfs send/receive.
Technically the filesystem changes don't even need to be sent over a network: you could as well dump them on a removable disk, then receive  from the same removable disk.

Mirth: recover space when mirthdb grows out of control

I was recently asked to recover a mirth instance whose embedded database had grown to fill all available space so this is just a note-to-self kind of post.
Btw: the recovery, depending on db size and disk speed, is going to take long.

The problem A 1.8 Mirth Connect instance was started, then forgotten (well neglected, actually). The user also forgot to setup pruning so the messages filled the embedded Derby database until it grew to fill all the available space on the disk. The SO is linux.

The solution First of all: free some disk space so that the database can be started in embedded mode from the cli. You can also copy the whole mirth install to another server if you cannot free space. Depending on db size you will need a corresponding amount of space: in my case a 5GB db required around 2GB to start, process logs and then store the temp files during shrinking.

Then open a shell as the user that mirth runs as (you're not running it as root, are you?) and cd into the mirth home. …

Indexing Apache access logs with ELK (Elasticsearch+Logstash+Kibana)

Who said that grepping Apache logs has to be boring?

The truth is that, as Enteprise applications move to the browser too, Apache access logs are a gold mine, it does not matter what your role is: developer, support or sysadmin. If you are not mining them you are most likely missing out a ton of information and, probably, making the wrong decisions.
ELK (Elasticsearch, Logstash, Kibana) is a terrific, Open Source stack for visually analyzing Apache (or nginx) logs (but also any other timestamped data).