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 TDD SaltStack formulas

One of the hardest parts about Infrastructure As Code and Configuration Management is establishing a discipline on developing, testing and deploying changes.
Developers follow established practices and tools have been built and perfected over the last decade and a half. On the other hand sysadmins and ops people do not have the same tooling and culture because estensive automation has only become a trend recently.

So if Infrastructure As Code allows you to version the infrastructure your code runs on, what good is it if then there are no tools or established practices to follow?

Luckily the situation is changing and in this post I'm outlining a methodology for test driven development of SaltStack Formulas.

The idea is that with a single command you can run your formula against a matrix of platforms (operating systems) and suites (or configurations). Each cell of the matrix will be tested and the result is a build failure or success much alike to what every half-decent developer of…