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: 'http://maps.gstatic.com/favicon.ico', 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 });
  }
  this.updateLayout();
  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});
   }
  }
 }
);

Comments

Popular posts from this blog

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).

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.

RUNDECK job maintenance

Learn more about Rundeck.

Now that I have a fair number of jobs scheduled by Rundeck, how do I periodically prune the job execution history and keep only the last, say, 30 executions for each job?