lng = models.FloatField()
''views.py''
from django.core import serializers
data = serializers.serialize('json', MyModel.objects.all(), ensure_ascii=False)
return HttpResponse(data, mimetype="application/json")
----
=== markers_list ===
''A list of markers in json format''
'''Default'''
{{{
null
}}}
'''Example'''
{{{
$('map-element').showLocations({ markers_list: [ {lat: 0.345, lng: 0.3456},
{lat: 44.345, lng: 34.3456} ] });
}}}
=== position_name ===
''If your json file does not contain 'lat' and 'lng' but uses other names for these fields, you can specify yhe names here''
'''Default'''
{{{
{ lat: 'lat', lng: 'lng' }
}}}
'''Example'''
{{{
$('map-element').showLocations({ position_name: { lat: 'latitude', lng: 'longitude' } });
}}}
The JSON data provided by markers_url or markers_list should then looks like
{{{
[ { latitude: 0.345, longitude: 0.3456},
{ latitude: 44.345, longitude: 34.3456} ]
}}}
=== marker_content_url ===
''The content that need to be displayed when clicked on a marker, loaded with an url''
'''Default'''
{{{
null
}}}
'''Example'''
{{{
$('map-element').showLocations({ marker_content_url: '/marker/user/${user}/${username}/' });
}}}
The part ${user} and ${username} are replaced by the values of the marker
{{{
{ lat: 45.3245, lng: 23.4563, user: 1, username: 'myname' }
}}}
is translated to te url '/marker/user/1/myname/'
'''Specification'''
* each ${...} is replaced in the url by the value of the marker
* while the request is loading, the loading infowindow is displayed (icon: '''ajax_load_icon''')
* if the url does not exists, the text from '''ajax_load_error''' is displayed
* When the request is successfull loaded, the contents are shown in the infowindow
=== marker_content_tmpl ===
''If all the values you want to display are in the marker itself, this function can be used to translate the marker data into a nice template''
'''Default'''
{{{
null
}}}
'''Example'''
{{{
$('map-element').showLocations({ marker_content_tmpl: '/path/to/template.tmpl' });
}}}
The template file should look something like this:
{{{
}}}
The JSON data provided by markers_url or markers_list should then looks like
{{{
[ { latitude: 0.345, longitude: 0.3456, user: 1, username: 'myname', other: 'blablabla' },
{ latitude: 44.345, longitude: 34.3456, user: 2, username: 'anothername', other: 'not important' } ]
}}}
----
=== user_location_zoom ===
''Uses the HTML5 geolocation to determine the location of the user. If the value is '''null''' this behaviour is disabled''
See the [[https://developer.mozilla.org/En/Using_geolocation|Mozilla developer page]] for more information
'''Default'''
{{{
7
}}}
'''Examples'''
{{{
$('map-element').showLocations({ user_location_zoom: 9 });
$('map-element').showLocations({ user_location_zoom: null } });
}}}
'''Specifications'''
* If the value is not 'null' use the HTML5 to determine the location of the user, then set the map's center to that location
* Adapt the zoomlevel to the specified zoomlevel
=== single_marker_zoom ===
''The zoomlevel for the map when there is only one marker on it. Use '''null''' to disable this future''
'''Default'''
{{{
7
}}}
'''Example'''
{{{
$('map-element').showLocations({ single_marker_zoom: 9 });
$('map-element').showLocations({ single_marker_zoom: null });
}}}
'''Specification'''
* If true and there is only one marker, zoom in and center that marker.
* If false, leave the zoom to the default settings
=== ajax_load_error ===
''The error that is shown when the remote page could not be loaded''
'''Default'''
{{{
'The page could not be loaded
',
}}}
'''Example'''
{{{
$('map-element').showLocations({ ajax_load_error: 'Contact the site admin, the page could not be loaded
' });
}}}
=== ajax_load_icon ===
''The url of the icon that is shown when an ajax call is executed''
'''Default'''
{{{
'/ubuntu-website/media/images/ajax-loader.gif'
}}}
'''Example'''
{{{
$('map-element').showLocations({ ajax_load_icon: '/path/to/icon.gif' });
}}}
=== cluster_tmpl ===
''The link to the template that is shown when someone clicks on a cluster''
'''Default'''
{{{
null
}}}
'''Example'''
{{{
$('map-element').showLocations({ cluster_tmpl: '/path/to/template.tmpl' });
}}}
The template should look like this. '''marker_list''' is the list of markers. From here the attributes of the marker can be used.
{{{
}}}
=== filter ===
''A filter object for displaying the right markers, which filter on the attributes of the marker''
'''Default'''
{{{
null
}}}
'''Example'''
{{{
$('map-element').showLocations({ filter: [ { element: $('#filter-programmers'), attrs: { program: true },
{ element: $('#filter-support'), attrs: { support: true },
{ element: $('#filter-none), attrs: {} ] });
}}}
This example has 2 filters (programmers and support), the last one shows all the markers (no filtering)
The element should be a jQuery DOM element (button to click on, for triggering the filter)
{{{
Programmers
Support
Show all
}}}
The markers should have the attibutes '''program''' and '''support'''
'''Specification'''
* When clicked on a 'filter-button' the markers that dont apply to the filter wil be hidden
* When no attrs are supplied, all the markers will be visible
== Full Example 1 (showLocations) ==
=== models.py ===
{{{
class Marker(models.Model):
user = models.ForeignKey(User)
lat = models.FloatField()
lng = models.FloatField()
}}}
=== views.py ===
{{{
from django.core import serializers
from django.contrib.auth.models import User
from django.shortcuts import get_object_or_404
from models import Marker
def show_all_markers(request):
data = serializers.serialize('json', Marker.objects.all(), ensure_ascii=False)
return HttpResponse(data, mimetype="application/json")
def marker_html(request, userId):
user = get_object_or_404(User, pk=userId)
return render_to_response('templatename.html', {'user':user})
}}}
=== urls.py ===
{{{
url('^map/markers/all', 'app.views.show_all_markers', name='map-markers-all'),
url('^map/marker/user/(?P\d+)/', 'app.views.marker_html', name='marker_html'),
}}}
=== HTML ===
{{{
}}}
=== CSS ===
{{{
#mymap { height: 400px; width: 500px; }
}}}
=== Javascript ===
{{{
$(function(){
$('#mymap').showLocations({ markers_url: '{% url map-markers-all %}',
marker_content_url: '/map/marker/user/${user}/',
marker_icon: '{{ MEDIA_URL }}icons/marker.png' });
});
}}}
== TODO ==
* Allow Cluster options
* Multiple different clusters
* Reloading markers
* Filter markers on attribute