Introduction

This is a very small and lightweight integration of OpenLayers and collective.geo.mapwidget. Idea is to have a map content type to create full customizable maps with the collective.geo flexibility. And the final goal is to store some javascript boilerplate on a content type to initiliaze the map.

As it requires writing some javascript with OpenLayers and jquery, it is not an ‘end user’ solution but a convenient and flexible way to integrate OpenLayers in plone.

Installation

Just a simple easy_install collective.geo.geopoint is enough. Alternatively, buildout users can install collective.geo.geopoint as part of a specific project’s buildout, by having a buildout configuration such as:

[buildout]
...
eggs =
    collective.geo.mapcontent
...
[instance]
...
zcml =
    collective.geo.mapcontent

How to use

In the plone interface, just add a map. Your mapid is : mapcontent. Then, fill some javascript inside the content type ‘javascript’ text area to display the map using mapwidget:

- set the box width and height
- set the long/lat/zoom settings
- set the layers

EG:

jq('#mapcontent').css('height', '1024px');
jq('#mapcontent').css('width', '1024px');
var coords = {lon: 0.000000, lat: 0.000000, zoom: 10};
cgmap.state = {'default': coords, 'mapcontent': coords};
cgmap.extendconfig(
  {layers: [function() {
  return new OpenLayers.Layer.WMS("OpenLayers WMS",
                                  "http://vmap0.tiles.osgeo.org/wms/vmap0",
                                  {layers: 'basic'});}
           ]
  }, 'mapcontent');

Mapwidget will initialize the map with those settings for you. And, remember, you are working with mapwidget. This one wraps OpenLayers and here are some usefull tips:

• cgmap.config[‘mapcontent’].map:

  the current OpenLayers map instance

• cgmap.config[‘mapcontent’].layers:

  the list of function callbacks returning a layer

• cgmap.state[‘mapcontent’]:

  the current long/lat/zoom settings (js mapping).

If you need to control the map afterwards, just register something when document is ready. EG:

// add this in the /edit js textarea
jq(document).ready(function() {
    cgmap['config']['mapcontent'].map.DOSOMETHING();
});

Credits

Tests

Being a doctest, we can tell a story here.

First, we must perform some setup. We use the testbrowser that is shipped with Five, as this provides proper Zope 2 integration. Most of the documentation, though, is in the underlying zope.testbrower package.

>>> from Products.Five.testbrowser import Browser
>>> browser = Browser()
>>> portal_url = self.portal.absolute_url()

The following is useful when writing and debugging testbrowser tests. It lets us see all error messages in the error_log.

>>> self.portal.error_log._ignored_exceptions = ()

With that in place, we can go to the portal front page and log in. We will do this using the default user from PloneTestCase:

>>> from Products.PloneTestCase.setup import portal_owner, default_password

Because add-on themes or products may remove or hide the login portlet, this test will use the login form that comes with plone.

>>> browser.open(portal_url + '/login_form')
>>> browser.getControl(name='__ac_name').value = portal_owner
>>> browser.getControl(name='__ac_password').value = default_password
>>> browser.getControl(name='submit').click()

Here, we set the value of the fields on the login form and then simulate a submit click. We then ensure that we get the friendly logged-in message:

>>> "You are now logged in" in browser.contents
True

Finally, let’s return to the front page of our site before continuing

>>> browser.open(portal_url)

Changelog