Git Product home page Git Product logo

djangocms-maps's Introduction

djangocms-maps Latest version on PyPI

Build status Code health Python versions Software license Gitter chat room

A universal maps plugin for django CMS, supporting all major map providers.

Supported online map providers:

  • Mapbox OpenStreetMap powered by Leaflet.js
  • Bing Maps
  • Google Maps
  • HERE WeGo
  • ViaMichelin

All map providers require an API key, which you usually get for free by creating a developer account (using the links below).

Installation

This plugin requires django CMS 3.3 (and Django 1.8) or above.

  • In your project's virtualenv, run pip install djangocms-maps.
  • Add 'djangocms_maps' to your INSTALLED_APPS setting.
  • Run manage.py migrate djangocms_maps.

Configuration

MAPS_PROVIDERS = [ ('<str>', '<str>'), ... ]

Optional. Allows you to specify the providers you want to offer, their display labels and sort order in the user interface. Put a provider on top of the list to make it the default. Default:

MAPS_PROVIDERS = [
    ('mapbox', _('Mapbox OSM (API key required)')),
    ('bingmaps', _('Bing Maps (API key required)')),
    ('googlemaps', _('Google Maps (API key required)')),
    ('here', _('HERE WeGo (API key required)')),
    ('viamichelin', _('ViaMichelin (API key required)')),
]

MAPS_BINGMAPS_API_KEY = '<str>'

API key for Bing Maps (required for using Bing Maps).

MAPS_GOOGLEMAPS_API_KEY = '<str>'

API key for Google Maps (required for using Google Maps).

MAPS_HERE_API_KEY = {'app_id': '<str>', 'app_code': '<str>'}

APP_ID and APP_CODE for HERE WeGo (required for using HERE maps).

MAPS_MAPBOX_API_KEY = '<str>'

Access token for Mapbox (required for using OSM maps with Mapbox tile layers).

MAPS_VIAMICHELIN_API_KEY = '<str>'

API key for ViaMichelin (required for using ViaMichelin maps).

Examples

Organice Demo:

https://demo.organice.io/about/directions/

Your maps plugin playground! Allows you to directly edit and view (albeit not to publish) changes on the maps plugin after authenticating.

Translations

If you want to help translate the plugin please do it on transifex.

Developer Resources

djangocms-maps's People

Contributors

adrien-delhorme avatar arnodeceuninck avatar bittner avatar chive avatar czpython avatar danielfay avatar digi604 avatar finalangel avatar jsma avatar lory87 avatar mireq avatar mkoistinen avatar philippze avatar pure-zero avatar retailify avatar stefanfoulis avatar yakky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

djangocms-maps's Issues

Fix PyPI upload complaint "error: HTTP Error 400: This filename has previously been used, you should use a different version."

After detecting and fixing syntax errors in the long description of the package (use anonymous links, use uniform section markup; commit 578f6ca) PyPI refuses an upload of a package filename with the same, current version number:

$ python setup.py sdist upload
...
running upload
Submitting dist/djangocms-maps-0.1.0.tar.gz to https://pypi.python.org/pypi
HTTP Error 400: This filename has previously been used, you should use a different version.
error: HTTP Error 400: This filename has previously been used, you should use a different version.

django 2 compatibility

for example:

  |   File "/usr/local/lib/python3.7/site-packages/djangocms_maps/migrations/0001_initial.py", line 23, in Migration
web_1  |     auto_created=True)),
web_1  | TypeError: __init__() missing 1 required positional argument: 'on_delete'

Alternative map providers (OpenStreetMap, et al.)

Google Maps is nice, but why not give a choice? After all it has real disadvantages and concerns to be dependent on Google Maps (privacy issues, you need an API key - since 2016, etc.), and FOSS solutions are grown out of kindergarden. A lot of business grade alternatives to Google Maps build on OSM today.

OpenStreetMap -- et alterae

Alternatives should include OSM, but may not be limited to them. Other map providers (that could be offered as "map style" or simply "map provider" in some "Advanced Settings", maybe), most if not all of them use OSM data anyway, could be:

For easier maintenance (of the websites created using django CMS) we should offer all those providers in a single plugin rather than building separate plugins that would have to be added to INSTALLED_APPS.

No API Key Required

Alternatives to Google Maps may also make the requirement to specify their API key obsolete (see django-cms#40). Without an API key specified in the settings Google Maps, as an option, could simply be disabled while all the other options ("map provider") would just work.

See also Divio's djangocms-googlemap issue #27 (this is where this fork started).

Hide/show zoom control and scale bar (using vanilla JavaScript)

ViaMichelin doesn't support hiding only the zoom control and the scale bar via their JavaScript API.

ViaMichelin support suggests to simply set the display style attribute of the related elements to none andblock, respectively.

Possible Solution

control.find(".ui-map-navigation").style.display = data.zoom_control ? "block" : "none";
control.find(".ui-map-scale").style.display = data.scale_bar ? "block" : "none";

In addition the ui-navigation-mode-selector (hand/lens icon above the zoom control) should generally be hidden, because it's not available with other map providers:

control.find(".ui-navigation-mode-selector").style.display = "none";

Zoom level doesn't match accross providers

When switching map provider and leaving the zoom level (number) untouched different providers display the same zoom level differently, closer or further away.

While, strictly speaking, this is not a bug it may be an improvement from a user experience perspective to have the map be displayed at the same zoom level (flight height) for an unchanged number across map providers.

Don't default to Switzerland for center: { lat, lng }

The JavaScript implementations currently initialize the center value to an arbitrary point in Switzerland:

This results in the map "jumping" from an initially drawn location in Switzerland to the location specified by the plugin user (the website). The behavior seems unnecessary and can be avoided.

Expected Result, Expected Implementation

  • The map should draw the requested location immediately. No "jumping" should be noticeable.
  • The options.center value can be initialized correctly before the map is initialized and drawn.

HERE Maps don't display on HTTPS sites

When a website is served via HTTPS then a HERE Map is not shown. This is because JavaScript resources are loaded via HTTP, hence new browsers refuse to load "insecure content" for a "secure site".

Details

mapsjs-core.js:51 Mixed Content: The page at 'https://demo.organice.io/about/directions/?edit' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://1.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/16/34…L_JSMv3.0.12.4&app_id=1ORPrZhy42YS0Ktrf6ZQ&app_code=OHnW8ll7OllNXLfpGd5Lng'. This request has been blocked; the content must be served over HTTPS.response.Nc.qn.arraybuffer @ mapsjs-core.js:51
mapsjs-core.js:51 XMLHttpRequest cannot load http://1.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/16/34…L_JSMv3.0.12.4&app_id=1ORPrZhy42YS0Ktrf6ZQ&app_code=OHnW8ll7OllNXLfpGd5Lng. Failed to start loading.response.Nc.qn.arraybuffer @ mapsjs-core.js:51

Update 1 (03-Mar-2018)

When viewing https://demo.organice.io/about/directions/?edit the browser console still spits out:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://demo.organice.io' is therefore not allowed access. The response had HTTP status code 403.

The total console output is rather lengthy, and repeats the following pieces several times:

mapsjs-core.js:170 
GET https://3.base.maps.api.here.com/maptile/2.1/maptile/7c6ed1603b/normal.day/16/34122/23064/256/png8?xnlp=CL_JSMv3.0.17.0&app_id=1ORPrZhy42YS0Ktrf6ZQ&app_code=OHnW8ll7OllNXLfpGd5Lng 403 ()
?edit:1
Failed to load https://3.base.maps.api.here.com/maptile/2.1/maptile/7c6ed1603b/normal.day/16/34122/23064/256/png8?xnlp=CL_JSMv3.0.17.0&app_id=1ORPrZhy42YS0Ktrf6ZQ&app_code=OHnW8ll7OllNXLfpGd5Lng: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://demo.organice.io' is therefore not allowed access. The response had HTTP status code 403.

The closing error message is:

here.js:110 Error: [timeout] https://geocoder.api.here.com/6.2/geocode.json?xnlp=CL_JSMv3.0.17.0&app_id=1ORPrZhy42YS0Ktrf6ZQ&app_code=OHnW8ll7OllNXLfpGd5Lng&searchText=Isles%20of%20Scilly%2C%20TR24%200QH%20Isles%20of%20Scilly request failed
    at Object.Zc (eval at <anonymous> (mapsjs-core.js:56), <anonymous>:11:176)
    at b (eval at <anonymous> (mapsjs-core.js:56), <anonymous>:9:440)
    at eval (eval at <anonymous> (mapsjs-core.js:56), <anonymous>:10:43)

Maybe Worth Mentioning

The top of the errors in the browser console says:

Uncaught SyntaxError: Unexpected token <
geocode.json?xnlp=CL_JSMv3.0.17.0&app_id=1ORPrZhy42YS0Ktrf6ZQ&app_code=OHnW8ll7OllNXLfpGd5Lng&searchText=Isles of Scilly%2C TR24 0QH Isles of Scilly&jsoncallback=H.service.jsonp.handleResponse(5):1

... and a comment on StackOverflow mentions:

Note, since I just wasted half a day chasing this bug - If the server side script fails with an internal server error, the browser may interpret it as if the request wasn't allowed due to Access-Control-Allow-Origin and report this as the error.

Update 2 (04-Mar-2018)

After trying to set CORS headers using django-cors-headers the response doesn't change.

A Note on Access-Control-Allow-Origin

Note that in the CORS architecture, the ACAO header is being set by the external web service (service.example.com), not the original web application server (www.example.com). CORS allows the external web service to authorise the web application to use its services and does not control external services accessed by the web application.

Source: Wikipedia

In other words, HERE Maps needs to set the ACAO (Access-Control-Allow-Origin) header.

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.