Skip to main content

Posts

Showing posts from December, 2011

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" } ], /*…