Skip to main content

Map content type for collective.geo (use c.g/MapWidget and c.g.openlayers) by Makina Corpus

Project description


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.


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:

eggs =
zcml =

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


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};
  {layers: [function() {
  return new OpenLayers.Layer.WMS("OpenLayers WMS",
                                  {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() {


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.

>>> + '/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

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


The Map Content content type

In this section we are tesing the Map Content content type by performing basic operations like adding, updadating and deleting Map Content content items.

Adding a new Map Content content item

We use the ‘Add new’ menu to add a new content item.

>>> browser.getLink('Add new').click()
>>> browser.getControl('Map Content').click()
>>> browser.getControl(name='form.button.Add').click()
>>> browser.getControl(name='title').value = 'Map Content Sample'
>>> js = """
... 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", "", {layers: 'basic'});}
...            ]
...   },
...   'mapcontent');
... """
>>> browser.getControl(name='_js').value = js
>>> browser.getControl('Save').click()
>>> 'Changes saved' in browser.contents


And we are done! We added a new ‘Map Content’ content item to the portal and in view mode, it will render using the mapwidget macros

>>> '<script type="text/javascript">'+js in browser.contents


0.1 (2010-11-10)

  • Initial release [kiorky]

Project details

Release history Release notifications

This version


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for collective.geo.mapcontent, version 0.1
Filename, size File type Python version Upload date Hashes
Filename, size collective.geo.mapcontent-0.1.tar.gz (17.8 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page