Giter Club home page Giter Club logo

wagtailymaps's Introduction

wagtailgmaps PyPI

Simple Google Maps address formatter and LatLng provider for Wagtail fields.

Check out Awesome Wagtail for more awesome packages and resources from the Wagtail community.

Wagtailgmaps screenshot

Quickstart

Setting Up Your Google API Key

  1. Follow the instructions to get a key
  2. Enable the following services under API Restrictions:

Google_API_Screenshot

Installing and Configuration the Python Package

  1. Install with pip install wagtailgmaps

  2. Add wagtailgmaps to your settings.py INSTALLED_APPS section.

  3. Add some configuration in your settings.py file:

    # Mandatory
    WAGTAIL_ADDRESS_MAP_CENTER = 'Wellington, New Zealand'  # It must be a properly formatted address
    WAGTAIL_ADDRESS_MAP_KEY = 'xxx'
    
    # Optional
    WAGTAIL_ADDRESS_MAP_ZOOM = 8  # See https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions for more information.
    WAGTAIL_ADDRESS_MAP_LANGUAGE = 'ru'  # See https://developers.google.com/maps/faq#languagesupport for supported languages.
  4. Use it:

    # myapp/models.py
    from django.db import models
    from wagtail.wagtailcore.models import Page
    from wagtailgmaps.edit_handlers import MapFieldPanel
    
    class MapPage(Page):
        # Wagtailgmaps expects a `CharField` (or any other field that renders as a text input)
        formatted_address = models.CharField(max_length=255)
        latlng_address = models.CharField(max_length=255)
    
        # Use the `MapFieldPanel` just like you would use a `FieldPanel`
        content_panels = Page.content_panels + [
            MapFieldPanel('formatted_address'),
            MapFieldPanel('latlng_address', latlng=True),
        ]
    # myapp/templates/myapp/map_page.html
    <a href="http://maps.google.com/?q={{ self.formatted_address }}">Open map (Formatted Address)</a>
    <a href="http://maps.google.com/?q={{ self.latlng_address }}">Open map (Lat/Long Address)</a>

Additional information

MapFieldPanel options

  • heading - A custom heading in the admin, defaults to "Location"
  • classname - Add extra css classes to the field
  • latlng - Field returns a LatLng instead of an address
  • centre - A custom override for this field
  • zoom - A custom override for this field

How the address option works under the hook

If using the address option, the field gets updated according to the Google Geocoding Service each time:

  • The map marker gets dragged and dropped into a location (dragend JS event).
  • Click happens somewhere in the map (click JS event).
  • Return key is pressed after editing the field (enterKey JS event for return key only).

Troubleshooting

When editing the model from the admin interface the affected field shows up with a map, like the screenshot above. If it doesn't, check your browser console to make sure that there is no error related to your API key.

Development

Releases

  • Make a new branch for the release of the new version.
  • Update the CHANGELOG.
  • Update the version number in wagtailgmaps/__init__.py, following semver.
  • Make a PR and squash merge it.
  • Back on master with the PR merged, use make publish (confirm, and enter your password).
  • Finally, go to GitHub and create a release and a tag for the new version.
  • Done!

wagtailymaps's People

Contributors

jordij avatar loicteixeira avatar flipperpa avatar danreeves avatar thibaudcolas avatar mojeto avatar urlsangel avatar balinabbb avatar steffan-harris avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.