Skip to content

F
flask-admin
Commit d0c4fe6b authored by Jacob Magnusson's avatar Jacob Magnusson
Browse files
Options

Use Google Places for map box search 

Also:

* Upgrades `leaflet` to 1.0.0 final.
* Removes `leaflet.search` which was not working reliably (not even in their own demos...)
* Map uses full width of form container by default
* Ability to use a new app configuration key `GOOGLE_MAPS_API_KEY`. [This allows for increased daily quotas and ability to track usage](https://developers.google.com/maps/documentation/javascript/get-api-key). Note that this key must have Google Places API enable. See link.
parent 8004c49c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 74 deletions
flask_admin/contrib/geoa/widgets.py
View file @ d0c4fe6b
......@@ -22,7 +22,7 @@ class LeafletWidget(TextArea):
editable.
"""
def __init__(
self, width=300, height=300, center=None,
self, width='auto', height=350, center=None,
zoom=None, min_zoom=None, max_zoom=None, max_bounds=None):
self.width = width
self.height = height
......
flask_admin/static/admin/js/form.js
View file @ d0c4fe6b
......@@ -195,34 +195,35 @@
}
var drawControl = new L.Control.Draw(drawOptions);
map.addControl(drawControl);
if (window.google) {
var geocoder = new google.maps.Geocoder();
function googleGeocoding(text, callResponse) {
geocoder.geocode({address: text}, callResponse);
}
function filterJSONCall(rawjson) {
var json = {}, key, loc, disp = [];
for (var i in rawjson) {
key = rawjson[i].formatted_address;
loc = L.latLng(rawjson[i].geometry.location.lat(),
rawjson[i].geometry.location.lng());
json[key] = loc;
if (window.MAPBOX_SEARCH) {
var circle = L.circleMarker([0, 0]);
var $autocompleteEl = $('<input style="position: absolute; z-index: 9999; display: block; margin: -42px 0 0 10px; width: 50%">');
var $form = $($el.get(0).form);
$autocompleteEl.insertAfter($map);
$form.on('submit', function (evt) {
if ($autocompleteEl.is(':focus')) {
evt.preventDefault();
return false;
}
return json;
}
map.addControl(new L.Control.Search({
callData: googleGeocoding,
filterJSON: filterJSONCall,
markerLocation: true,
autoType: false,
autoCollapse: true,
minLength: 2,
zoom: 10
}));
});
var autocomplete = new google.maps.places.Autocomplete($autocompleteEl.get(0));
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
var loc = place.geometry.location;
var viewport = place.geometry.viewport;
circle.setLatLng(L.latLng(loc.lat(), loc.lng()));
circle.addTo(map);
if (viewport) {
map.fitBounds([
viewport.getNorthEast().toJSON(),
viewport.getSouthWest().toJSON(),
]);
}
else {
map.fitBounds(circle.getBounds());
}
});
}
......
flask_admin/static/vendor/leaflet/images/spritesheet.svg 0 → 100644
View file @ d0c4fe6b
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540 60" height="60" width="540">
<g id="enabled" fill="#464646">
<g id="polyline">
<path d="M18 36v6h6v-6h-6zm4 4h-2v-2h2v2z"/>
<path d="M36 18v6h6v-6h-6zm4 4h-2v-2h2v2z"/>
<path d="M23.142 39.145l-2.285-2.29 16-15.998 2.285 2.285z"/>
</g>
<path id="polygon" d="M100 24.565l-2.096 14.83L83.07 42 76 28.773 86.463 18z"/>
<path id="rectangle" d="M140 20h20v20h-20z"/>
<path id="circle" d="M221 30c0 6.078-4.926 11-11 11s-11-4.922-11-11c0-6.074 4.926-11 11-11s11 4.926 11 11z"/>
<path id="marker" d="M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z M270,31.5c-2.484,0-4.5-2.014-4.5-4.5c0-2.484,2.016-4.5,4.5-4.5c2.485,0,4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z"/>
<g id="edit">
<path d="M337,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345 l3.19-3.17H324c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L337,30.156"/>
<path d="M338.72 24.637l-8.892 8.892H327V30.7l8.89-8.89z"/>
<path d="M338.697 17.826h4v4h-4z" transform="rotate(-134.99 340.703 19.817)"/>
</g>
<g id="remove">
<path d="M381 42h18V24h-18v18zm14-16h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26z"/>
<path d="M395 20v-4h-10v4h-6v2h22v-2h-6zm-2 0h-6v-2h6v2z"/>
</g>
</g>
<g id="disabled" fill="#bbb" transform="translate(120)">
<use xlink:href="#edit" id="edit-disabled"/>
<use xlink:href="#remove" id="remove-disabled"/>
</g>
</svg>
flask_admin/static/vendor/leaflet/leaflet.search.css deleted 100644 → 0
View file @ 8004c49c
/*
* Leaflet Control Search v1.5.7 - 2015-05-07
*
* Copyright 2014 Stefano Cudini
* stefano.cudini@gmail.com
* http://labs.easyblog.it/
*
* Licensed under the MIT license.
*
* Demo:
* http://labs.easyblog.it/maps/leaflet-search/
*
* Source:
* git@github.com:stefanocudini/leaflet-search.git
*
*/
.leaflet-container .leaflet-control-search{position:relative;float:left;background:#fff;color:#1978cf;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:rgba(255,255,255,.8);z-index:1000;box-shadow:0 1px 7px rgba(0,0,0,.65);margin-left:10px;margin-top:10px}.leaflet-control-search.search-exp{box-shadow:0 1px 7px #999;background:#fff}.leaflet-control-search .search-input{display:block;float:left;background:#fff;border:1px solid #666;border-radius:2px;height:18px;padding:0 18px 0 2px;margin:3px 0 3px 3px}.leaflet-control-search.search-load .search-input{background:url(./images/loader.gif) no-repeat center right #fff}.leaflet-control-search.search-load .search-cancel{visibility:hidden}.leaflet-control-search .search-cancel{display:block;width:22px;height:18px;position:absolute;right:22px;margin:3px 0;background:url(./images/search-icon.png) no-repeat 0 -46px;text-decoration:none;filter:alpha(opacity=80);opacity:.8}.leaflet-control-search .search-cancel:hover{filter:alpha(opacity=100);opacity:1}.leaflet-control-search .search-cancel span{display:none;font-size:18px;line-height:20px;color:#ccc;font-weight:700}.leaflet-control-search .search-cancel:hover span{color:#aaa}.leaflet-control-search .search-button{display:block;float:left;width:26px;height:26px;background:url(./images/search-icon.png) no-repeat 2px 2px;border-radius:4px}.leaflet-control-search .search-button:hover{background:url(./images/search-icon.png) no-repeat 2px -22px}.leaflet-control-search .search-tooltip{position:absolute;top:100%;left:0;float:left;min-width:120px;max-height:122px;box-shadow:1px 1px 6px rgba(0,0,0,.4);background-color:rgba(0,0,0,.25);z-index:1010;overflow-y:auto;overflow-x:hidden}.leaflet-control-search .search-tip{margin:2px;padding:2px 4px;display:block;color:#000;background:#eee;border-radius:.25em;text-decoration:none;white-space:nowrap;vertical-align:center}.leaflet-control-search .search-button:hover,.leaflet-control-search .search-tip-select,.leaflet-control-search .search-tip:hover{background-color:#fff}.leaflet-control-search .search-alert{cursor:pointer;clear:both;font-size:.75em;margin-bottom:5px;padding:0 .25em;color:#e00;font-weight:700;border-radius:.25em}
flask_admin/static/vendor/leaflet/leaflet.search.js deleted 100644 → 0
View file @ 8004c49c
This diff is collapsed.
flask_admin/templates/bootstrap2/admin/lib.html
View file @ d0c4fe6b
......@@ -219,11 +219,8 @@
<link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='3.5.2') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs2.css', v='1.3.22') }}" rel="stylesheet">
{% if config.MAPBOX_MAP_ID %}
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='0.7.3') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.2.3') }}" rel="stylesheet">
{% if config.MAPBOX_SEARCH %}
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.search.css', v='1.5.7') }}" rel="stylesheet">
{% endif %}
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.0') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.3.2') }}" rel="stylesheet">
{% endif %}
{% if editable_columns %}
<link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap2-editable.css', v='1.5.1.1') }}" rel="stylesheet">
......@@ -241,8 +238,10 @@
<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='0.7.3') }}"></script>
<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.2.3') }}"></script>
{% if config.MAPBOX_SEARCH %}
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.search.js', v='1.5.7') }}"></script>
<script>
window.MAPBOX_SEARCH = "{{ config.MAPBOX_SEARCH }}";
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key={{ config.get('GOOGLE_MAPS_API_KEY') }}"></script>
{% endif %}
{% endif %}
<script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
......
flask_admin/templates/bootstrap3/admin/lib.html
View file @ d0c4fe6b
......@@ -210,8 +210,8 @@
<link href="{{ admin_static.url(filename='vendor/select2/select2-bootstrap3.css', v='1.4.6') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs3.css', v='1.3.22') }}" rel="stylesheet">
{% if config.MAPBOX_MAP_ID %}
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='0.7.3') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.2.3') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.0') }}" rel="stylesheet">
<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.3.2') }}" rel="stylesheet">
{% endif %}
{% if editable_columns %}
<link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap3-editable.css', v='1.5.1.1') }}" rel="stylesheet">
......@@ -226,8 +226,14 @@
window.MAPBOX_ACCESS_TOKEN = "{{ config.MAPBOX_ACCESS_TOKEN }}";
{% endif %}
</script>
<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='0.7.3') }}"></script>
<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.2.3') }}"></script>
<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='1.0.0') }}"></script>
<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.3.2') }}"></script>
{% if config.MAPBOX_SEARCH %}
<script>
window.MAPBOX_SEARCH = "{{ config.MAPBOX_SEARCH }}";
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key={{ config.get('GOOGLE_MAPS_API_KEY') }}"></script>
{% endif %}
{% endif %}
<script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
{% if editable_columns %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment