Wagtail-Geo-Widget

Wagtail-Geo-Widget provides a complete map solution for Wagtail sites. Key capabilities include:

• Map Providers: Supports Google Maps or any tile provider compatible with Leaflet (e.g., OpenStreetMap, Mapbox).
• Spatial Data Support:
  • Real spatial support using GeoDjango and PointField.
  • Alternative coordinate storage as strings for setups without GeoDjango.
• Integration: Supports Wagtail StreamField and Inline panels.
• Geocoding: Search functionality via Google Geocoding, Nominatim, or Mapbox.
• Additional Features: Optional address search fields and multi-language support.

Before installing, ensure your environment meets the following requirements:

• Python 3.10+
• Wagtail 6.3+
• Django 4.2+
• A Google account

To persist the map's zoom level, add a SmallIntegerField to your model and link it to the GoogleMapsPanel using the zoom_field parameter.

Example

from django.db import models
from django.utils.translation import gettext as _
from wagtail.admin.panels import FieldPanel, MultiFieldPanel
from wagtailgeowidget.panels import GoogleMapsPanel

class MyPageWithZoomField(Page):
    zoom = models.SmallIntegerField(blank=True, null=True)
    location = models.CharField(max_length=250, blank=True, null=True)

    content_panels = Page.content_panels + [
        MultiFieldPanel([
            FieldPanel("zoom"),
            GoogleMapsPanel("location", zoom_field="zoom"),
        ], _('Geo details')),
    ]

To use the geo widget, ensure GeoDjango is configured and your model includes a PointField. You can then add GoogleMapsPanel (or LeafletPanel if using Leaflet) to your content_panels to provide a map interface for that field.

from django.contrib.gis.db import models
from wagtailgeowidget.panels import GoogleMapsPanel


class MyPage(Page):
    location = models.PointField(srid=4326, null=True, blank=True)

    content_panels = Page.content_panels + [
        GoogleMapsPanel('location'),
    ]

To add a map to your Wagtail admin, you need a CharField to store the location data and a corresponding content panel.

Note: If you prefer using Leaflet instead of Google Maps, use LeafletPanel instead of GoogleMapsPanel in your content_panels configuration.

Basic Implementation

1. Define a CharField on your model to store the location string.
2. Add GoogleMapsPanel to your content_panels list, passing the name of the field as the first argument.

from django.db import models
from wagtail.models import Page
from wagtailgeowidget.panels import GoogleMapsPanel

class MyPage(Page):
    location = models.CharField(max_length=250, blank=True, null=True)

    content_panels = Page.content_panels + [
        GoogleMapsPanel('location'),
    ]

To add a Leaflet map to a standard Wagtail Page, use LeafletPanel within your content_panels. The panel should target a field (e.g., a CharField) that will store the location data.

from django.db import models
from wagtail.models import Page
from wagtailgeowidget.panels import LeafletPanel


class MyPage(Page):
    location = models.CharField(max_length=250, blank=True, null=True)

    content_panels = Page.content_panels + [
        LeafletPanel('location'),
    ]

To hide the zoom field in the Wagtail admin, apply the CSS class geo-field-zoom--hide to the field's panel or block.

• For a FieldPanel, use the classname argument.
• For a StreamField block, use the form_classname argument within the block tuple.

# In a FieldPanel
FieldPanel("zoom", classname="geo-field-zoom--hide")

# In a StreamField
('zoom', GeoZoomBlock(required=False, form_classname="geo-field-zoom--hide")),

You can hide the latitude and longitude fields in the Wagtail admin by passing hide_latlng=True to the panel or block configuration.

For a standard GeoPanel (e.g., GoogleMapsPanel), pass the argument directly to the constructor. For use within a StreamField, pass it to the GoogleMapsBlock.

# In a model field definition
GoogleMapsPanel('location', address_field='address', hide_latlng=True)

# In a StreamField definition
GoogleMapsBlock(address_field='address', hide_latlng=True)

To use Google Maps, you must retrieve an API key from the Google Cloud Console and add it to your Django settings using the GOOGLE_MAPS_V3_APIKEY key.

Required Google Services

Ensure the following APIs are enabled in your Google Cloud project:

• Geocoding API
• Maps JavaScript API
• Maps Static API
• Places API (New)
• Places API (Only required if using the older GOOGLE_MAPS_PLACES geocoder)

GOOGLE_MAPS_V3_APIKEY = "yourapikey"