Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support centered map without marker #118

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Support centered map without marker #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/source/settings.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ These are the default settings:
LOCATION_FIELD = {
'map.provider': 'google',
'map.zoom': 13,
'map.center': '0,0',

'search.provider': 'google',
'search.suffix': '',
Expand Down
1 change: 1 addition & 0 deletions location_field/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
LOCATION_FIELD = {
'map.provider': 'google',
'map.zoom': 13,
'map.center': '0,0',

'search.provider': 'google',
'search.suffix': '',
Expand Down
64 changes: 43 additions & 21 deletions location_field/static/location_field/js/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,23 @@ var SequentialLoader = function() {
};


/**
* Convert a comma-separated string representing a geographical point to a
* LatLng object.
* @param {String} value - Latitude and longitude separated by a comma
* @return {LatLng} Geographical point as LatLng object
*/
var strToLatLng = function(value) {
if (typeof value !== 'string')
return value;

value = value.split(',').map(function(val) {
return parseFloat(val.trim());
});
return new L.LatLng(value[0], value[1]);
};


!function($){
var LocationFieldCache = {
load: [],
Expand All @@ -78,8 +95,9 @@ var SequentialLoader = function() {
},
searchProvider: 'google',
id: 'map',
latLng: '0,0',
latLng: null,
mapOptions: {
center: [0, 0],
zoom: 9
},
basedFields: $(),
Expand Down Expand Up @@ -108,10 +126,8 @@ var SequentialLoader = function() {
var self = this;

this.loadAll(function(){
var mapOptions = self._getMapOptions(),
map = self._getMap(mapOptions);

var marker = self._getMarker(map, mapOptions.center);
var map = self._getMap(self.options.mapOptions),
marker = self._getMarker(map, self.options.latLng);

// fix issue w/ marker not appearing
if (self.options.provider == 'google' && self.options.fixMarker)
Expand Down Expand Up @@ -345,6 +361,8 @@ var SequentialLoader = function() {
},

_getMap: function(mapOptions) {
mapOptions.center = strToLatLng(mapOptions.center);

var map = new L.Map(this.options.id, mapOptions), layer;

if (this.options.provider == 'google') {
Expand All @@ -370,24 +388,27 @@ var SequentialLoader = function() {
return map;
},

_getMapOptions: function() {
return $.extend(this.options.mapOptions, {
center: this._getLatLng()
});
},

_getLatLng: function() {
var l = this.options.latLng.split(',').map(parseFloat);
return new L.LatLng(l[0], l[1]);
},

_getMarker: function(map, center) {
var self = this,
_getMarker: function(map, latlng) {
var marker,
self = this,
markerOptions = {
draggable: true
};

var marker = L.marker(center, markerOptions).addTo(map);
if (!latlng) {
markerOptions.opacity = 0;
marker = L.marker([0, 0], markerOptions);

marker.once('move', function() {
marker.setOpacity(1);
});
} else {
latlng = strToLatLng(latlng);
marker = L.marker(latlng, markerOptions);

// pan the map to this marker
map.panTo(latlng);
}

// fill input on dragend
marker.on('dragend move', function(){
Expand All @@ -399,7 +420,7 @@ var SequentialLoader = function() {
marker.setLatLng(e.latlng);
});

return marker;
return marker.addTo(map);
},

_watchBasedFields: function(map, marker) {
Expand Down Expand Up @@ -472,7 +493,7 @@ var SequentialLoader = function() {
pluginOptions = {
id: 'map_' + name,
inputField: el,
latLng: el.val() || '0,0',
latLng: el.val() || null,
suffix: options['search.suffix'],
path: options['resources.root_path'],
provider: options['map.provider'],
Expand All @@ -491,6 +512,7 @@ var SequentialLoader = function() {
},
},
mapOptions: {
center: options['map.center'],
zoom: options['map.zoom']
}
};
Expand Down