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

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.

A not so short guide to ZFS on Linux

Updated Oct 16 2013: shadow copies, memory settings and links for further learning.
Updated Nov 15 2013: shadow copies example, samba tuning.

Unless you've been living under a rock you should have by now heard many stories about how awesome ZFS is and the many ways it can help with saving your bacon.

The downside is that ZFS is not available (natively) for Linux because the CDDL license under which it is released is incompatible with the GPL. Assuming you are not interested in converting to one of the many Illumos distributions or FreeBSD this guide might serve you as a starting point if you are attracted  by ZFS features but are reluctant to try it out on production systems.

Basically in this post I note down both the tought process and the actual commands for implementing a fileserver for a small office. The fileserver will run as a virtual machine in a large ESXi host and use ZFS as the filesystem for shared data.