m01.gmap 0.8.1

Google map geo location and z3c.form widget for Zope3

This package provides a m01.mongo and z3c.form based google map widget for Zope3.

README

This package provides a z3c.form widget concept for google maps. For more info about google maps see: http://code.google.com/apis/maps/.

>>> import os
>>> import zope.component
>>> from zope.pagetemplate.interfaces import IPageTemplate
>>> from zope.interface.verify import verifyClass
>>> from z3c.form.interfaces import IWidget
>>> from z3c.form.interfaces import INPUT_MODE
>>> from z3c.form.testing import TestRequest
>>> from z3c.form.widget import WidgetTemplateFactory
>>> import m01.gmap
>>> import m01.gmap.util
>>> import m01.gmap.browser
>>> from m01.gmap import interfaces
>>> from m01.gmap.widget import GMapWidget
>>> from m01.gmap.widget import GeoPointGMapWidget

GMapWidget

The google map (GMapWidget) widget allows you to show a map for select latitude and longitude for a geo location in input mode. In display mode it offers a GMap which shows the given location.

As for all widgets, the GMap widget must provide the IWidget interface:

>>> verifyClass(IWidget, GMapWidget)
True

The widget can be instantiated only using the request:

>>> request = TestRequest()
>>> widget = GMapWidget(request)

Before rendering the widget, one has to set the name and id of the widget:

>>> widget.id = 'widget.id'
>>> widget.name = 'widget.name'

We also need to register the template for the widget:

>>> def getPath(filename):
...     return os.path.join(os.path.dirname(m01.gmap.__file__),
...     filename)

>>> zope.component.provideAdapter(
...     WidgetTemplateFactory(getPath('widget_input.pt'), 'text/html'),
...     (None, None, None, None, interfaces.IGMapWidget),
...     IPageTemplate, name=INPUT_MODE)

If we render the widget we get a simple input element:

>>> print(widget.render())
<input type="hidden" id="widget.id-latitude" name="widget.name-latitude" class="hidden-widget" value="" />
<input type="hidden" id="widget.id-longitude" name="widget.name-longitude" class="hidden-widget" value="" />
<div id="widget.id" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
  $("#widget\\.id").m01GMapWidget({
    iconWidth: 19,
    infoWindowAnchorYOffset: 0,
    iconHeight: 32,
    responsive: true,
    iconURL: "http://127.0.0.1/@@/m01GMapWidgetIcon.png",
    iconAnchorXOffset: 9,
    zoomFallback: 4,
    zoom: 11,
    longitude: null,
    longitudeFallback: 10,
    latitudeFallback: 10,
    latitudeExpression: "#widget\\.id-latitude",
    mode: "input",
    infoWindowContent: "Drag and drop the marker and save the form. <br />Double click the marker for remove them.",
    address: "",
    latitude: null,
    iconAnchorYOffset: 30,
    longitudeExpression: "#widget\\.id-longitude",
    iconShadowURL: "http://127.0.0.1/@@/m01GMapWidgetIconShadow.png",
    infoWindowAnchorXOffset: 10
  });
</script>
<BLANKLINE>

We also need to include the IGMapAPIProvider which knows how to generate the gamp api javascipt. The APi key it’self can get defined with a product config or with a envirnoment setup. See buildout.cfg and util.py for more info:

>>> m01.gmap.util.GMAP_API_KEY
u'ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw'

We offer http or https javascript links:

>>> print(m01.gmap.util.GMAP_JAVASCRIPT)
<script type="text/javascript" src="//maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw"> </script>

>>> print(m01.gmap.util.GMAP_HTTPS_JAVASCRIPT)
<script type="text/javascript" src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw"> </script>

And you content provider can get used for render the full javascript:

>>> provider = m01.gmap.browser.GMapAPIProvider(None, None, None)
>>> print(provider.render())
<script type="text/javascript" src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw"> </script>

GeoPointGMapWidget

The GeoPointGMapWidget widget provides the same as the GMapWidget but uses another converter and support the m01.mongo GeoPoint implementation.

As for all widgets, the GMap widget must provide the IWidget interface:

>>> verifyClass(IWidget, GeoPointGMapWidget)
True

The widget can be instantiated only using the request:

>>> request = TestRequest()
>>> widget = GeoPointGMapWidget(request)

Before rendering the widget, one has to set the name and id of the widget:

>>> widget.id = 'widget.id'
>>> widget.name = 'widget.name'

We also need to register the template for the widget:

>>> def getPath(filename):
...     return os.path.join(os.path.dirname(m01.gmap.__file__),
...     filename)

>>> zope.component.provideAdapter(
...     WidgetTemplateFactory(getPath('widget_input.pt'), 'text/html'),
...     (None, None, None, None, interfaces.IGeoPointGMapWidget),
...     IPageTemplate, name=INPUT_MODE)

If we render the widget we get a simple input element:

>>> print(widget.render())
<input type="hidden" id="widget.id-latitude" name="widget.name-latitude" class="hidden-widget" value="" />
<input type="hidden" id="widget.id-longitude" name="widget.name-longitude" class="hidden-widget" value="" />
<div id="widget.id" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
  $("#widget\\.id").m01GMapWidget({
    iconWidth: 19,
    infoWindowAnchorYOffset: 0,
    iconHeight: 32,
    responsive: true,
    iconURL: "http://127.0.0.1/@@/m01GMapWidgetIcon.png",
    iconAnchorXOffset: 9,
    zoomFallback: 4,
    zoom: 11,
    longitude: null,
    longitudeFallback: 10,
    latitudeFallback: 10,
    latitudeExpression: "#widget\\.id-latitude",
    mode: "input",
    infoWindowContent: "Drag and drop the marker and save the form. <br />Double click the marker for remove them.",
    address: "",
    latitude: null,
    iconAnchorYOffset: 30,
    longitudeExpression: "#widget\\.id-longitude",
    iconShadowURL: "http://127.0.0.1/@@/m01GMapWidgetIconShadow.png",
    infoWindowAnchorXOffset: 10
  });
</script>
<BLANKLINE>

We also need to include the IGMapAPIProvider which knows how to generate the gamp api javascipt. The APi key it’self can get defined with a product config or with a envirnoment setup. See buildout.cfg and util.py for more info:

>>> m01.gmap.util.GMAP_API_KEY
u'ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw'

We offer http or https javascript links:

>>> print(m01.gmap.util.GMAP_JAVASCRIPT)
<script type="text/javascript" src="//maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw"> </script>

>>> print(m01.gmap.util.GMAP_HTTPS_JAVASCRIPT)
<script type="text/javascript" src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw"> </script>

And you content provider can get used for render the full javascript:

>>> provider = m01.gmap.browser.GMapAPIProvider(None, None, None)
>>> print(provider.render())
<script type="text/javascript" src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAFAsu6H_TCNEapjedv-QILxTwM0brOpm-All5BF6PoaKBxRWWERQwU76rKRQO6OVZmsjxrqya2hcEBw"> </script>

Changes

0.8.1 (2018-07-23)

• removed console.log call from javascript

0.8.0 (2018-04-24)

• feature: support responsive options and resizing for rendering gmap. The new options useResizer, useResizerTrigger and responsive are available in javascript.

0.7.0 (2013-11-23)

• feature: support new GeoPoint implementation given from m01.mongo version 0.11.0 with a new GeoPointGMapWidget and z3c.form converter implementation

• removed google maps api v2 javascript

0.6.1 (2013-06-28)

• bugfix: fix lat, lng setup in gmaps v3 api javascript

0.6.0 (2013-01-04)

• update to google maps api v3

0.5.0 (2012-11-18)

• initial release