map

Differences between revisions 1 and 15 (spanning 14 versions)
Revision 1 as of 2011-01-17 13:59:40
Size: 5156
Editor: ronnie.vd.c
Comment:
Revision 15 as of 2011-01-18 13:35:58
Size: 7669
Editor: ronnie.vd.c
Comment:
Deletions are marked like this. Additions are marked like this.
Line 3: Line 3:
Blueprint: [[https://blueprints.launchpad.net/ubuntu-django-foundations/+spec/maps-jquery-plugin]]

||<<TableOfContents()>>||
Line 4: Line 8:
 * $('map-element').selectLocation({params})
 * $('map-element').showLocations({params})
{{{
$('map-element').selectLocation({ params })
$('map-element').showLocations({ params })
}}}
Line 11: Line 17:
There are 3 methods to add/move a marker on the map

There are 3 methods to add/move a marker on the map:
Line 17: Line 23:
=== Possible parameters ===

----
=== html_lng ===
''The HTML <input> element that represents the longitude of the marker e.g.''

'''Examples'''
 * $('#id_lng')
 * $('#id_longitude')

'''Default'''

null (maybe change this to '#id_lng')

'''Specification'''
 * If the inputs already contains data, put the marker on the map at init
 * In the data in the inputs is changed, move the marker and center the map at the marker
 * If the marker is moved, change the values in these input elements accourdingly
 * If the inputs are made empty, remove the marker

----
=== html_lat ===
''Same as html_lng but this one is for the latitude''
----
=== html_lat and html_lng ===
''The HTML <input> element that represents the latitude and longitude of the marker e.g.''

'''Default'''

{{{
null
}}}
''maybe change this to `#id_lng` ''

'''Example'''

HTML
{{{
<input type="text" id="id_lat" name="lat" value="0.353452" />
<input type="text" id="id_lng" name="lng" value="0.435323" />
}}}
Javascript
{{{
$('map-element').selectLocation({ html_lat: $('#id_lat'),
                                  html_lng: $('#id_lng') });
}}}

'''Specification'''
 * When the input already contains data on init, place the marker on the map
 * When the data in the inputs is changed, move the marker to that position and center the map at the marker
 * When the marker is moved, change the values in the input elements to the coordinates of the marker
 * When the inputs are emptied, remove the marker from the map
Line 45: Line 57:
'''Example'''

/media/icons/marker.png

'''Specification'''
 * If no marker is specified, use the Google default

----
==== html_addr ====
''The HTML <input> elements where the adress is specified (can be multiple)
See google.maps.Geocoder() for more information''

Example:
 * $('#id_country, #id_city, #id_address')
'''Default'''
{{{
/media.icons/marker.png
}}}

'''Example'''
{{{
$('map-element').selectLocation({ marker_icon: '/media/icons/my_marker.png' });
}}}

'''Specification'''
 * If no marker is specified, use the default marker (supplied by this module)
 * If the default marker is not found, use the google default

----
=== html_addr ===
''The HTML <input> elements where the adress is specified''

See [[http://code.google.com/intl/nl/apis/maps/documentation/javascript/services.html#Geocoding| the google api]] for more information

'''Default'''
{{{
null
}}}

'''Example'''

HTML
{{{
<input type="text" id="id_country" name="country" />
<input type="text" id="id_city" name="city" />
<input type="text" id="id_address" name="address" />
}}}
Javascript
{{{
$('map-element').selectLocation({ html_addr: $('#id_country, #id_city, #id_address') });
}}}
Line 70: Line 105:
The url of the icon that is displayed as marker.

'''Example'''
''The url of the icon that is displayed as marker.''

'''Default'''
{{{
Line 75: Line 110:

'''Specification'''
 * If no marker is specified, use the Google default
}}}

'''Example'''
{{{
$('map-element').showLocations({ marker_icon: '/media/icons/my_marker.png' });
}}}

'''Specification'''
 * If no marker is specified, use the default marker (supplied by this module)
 * If the default marker is not found, use the google default
.
Line 83: Line 125:
'''Example'''

/map/locations/all/

'''Specification'''
The URL should return at minimal:
'''Default'''
{{{
null
}}}

'''Example'''
{{{
$('map-element').showLocations({ data_url: '/map/locations/all/' });
}}}


'''Specification'''
The URL should return:
{{{
Line 92: Line 141:
}}}
Line 110: Line 160:
Uses the HTML5 geolocation to determine the location of the user. ''Uses the HTML5 geolocation to determine the location of the user.''

See the [[https://developer.mozilla.org/En/Using_geolocation|Mozilla developer page]] for more information

'''Default'''
{{{
{ use: True, zoom: 7 }
}}}
Line 113: Line 170:
{use=True, zoom=7}

'''Default'''
{use=True, zoom=7}
{{{
$('map-element').showLocations({ geo_location: { use: False } });
$('map-element').showLocations({ geo_location: { use: True, zoom: 9 } });
}}}
Line 119: Line 176:
 * If use=True, use the HTML5 to determine the location of the user, then set the map's center to that location  * If use = True, use the HTML5 to determine the location of the user, then set the map's center to that location
Line 126: Line 183:
'''Example'''

/markers/users/$id/
{{{#!wiki note
This parameter needs a wider scope. More attributes of the marker should be used to form the url
}}}

'''Default'''
{{{
null
}}}

'''Example'''
{{{
$('map-element').showLocations({ marker_content_url: '/markers/users/$id/' });
}}}
Line 140: Line 207:
'''Example'''

[{lng: 1.5555, lat: 1.2345},
 {lng: 3.4563, lat: 23.2345},
 ...]
'''Default'''
{{{
null
}}}

'''Example'''
{{{
$('map-element').showLocations({ locations: [{lng: 1.5555, lat: 1.2345},
                                             {lng: 3.4563, lat: 23.2345},
                                             {address: 'Australia, Canberra Cook'},
                                             {address: 'Germany, Berlin'},
                                             {lng: 12.4533, lat: -43.34224}]});
}}}
Line 150: Line 225:
== Full Example 1 == == Full Example 1 (showLocations) ==
=== models.py ===
{{{
class Marker(models.Model):
    lat = models.FloatField()
    lng = models.FloatField()
}}}

=== views.py ===
{{{
from django.core import serializers

from models import Marker

def show_all_markers(request):
    data = serializers.serialize('json', Marker.object.all(), ensure_ascii=False)
    return HttpResponse(data, mimetype="application/json")
}}}

=== urls.py ===
{{{
    url('^map/markers/all', 'app.views.show_all_markers', name='map-markers-all'),
}}}
Line 153: Line 251:
<html>
<body>
Line 155: Line 255:
}}} </body>
</html>
}}}
Line 160: Line 263:
Line 163: Line 267:
    $('#mymap').showLocations({ locations: [{55.5522, 45.3222},
                                            {23.2345, -65.8742},
                                            {-25.5322, 0.5235}],
    $('#mymap').showLocations({ data_url: '{% url map-markers-all %}',
Line 167: Line 269:
                                marker_icon: '/media/icons/marker.png'});                                 marker_icon: '{{ MEDIA_URL }}icons/marker.png' });

Google Maps implementation for Ubuntu-django-foundations

Blueprint: https://blueprints.launchpad.net/ubuntu-django-foundations/+spec/maps-jquery-plugin

The plugin consists of 2 commands e.g.

$('map-element').selectLocation({ params })
$('map-element').showLocations({ params })

Both commands with their parameters and uses will be exmplained below

selectLocation

Allows the user to add a marker to the map.

There are 3 methods to add/move a marker on the map:

  1. By clinking an empty space on the map
  2. By changing the <input> elements that represents the latitude and longitude

  3. By changing the <input> elements that is a representation of the address


html_lat and html_lng

The HTML <input> element that represents the latitude and longitude of the marker e.g.

Default

null

maybe change this to #id_lng

Example

HTML

<input type="text" id="id_lat" name="lat" value="0.353452" />
<input type="text" id="id_lng" name="lng" value="0.435323" />

Javascript

$('map-element').selectLocation({ html_lat: $('#id_lat'),
                                  html_lng: $('#id_lng') });

Specification

  • When the input already contains data on init, place the marker on the map
  • When the data in the inputs is changed, move the marker to that position and center the map at the marker
  • When the marker is moved, change the values in the input elements to the coordinates of the marker
  • When the inputs are emptied, remove the marker from the map


marker_icon

The url of the icon that is displayed as marker.

Default

/media.icons/marker.png

Example

$('map-element').selectLocation({ marker_icon: '/media/icons/my_marker.png' });

Specification

  • If no marker is specified, use the default marker (supplied by this module)
  • If the default marker is not found, use the google default


html_addr

The HTML <input> elements where the adress is specified

See the google api for more information

Default

null

Example

HTML

<input type="text" id="id_country" name="country" />
<input type="text" id="id_city" name="city" />
<input type="text" id="id_address" name="address" />

Javascript

$('map-element').selectLocation({ html_addr: $('#id_country, #id_city, #id_address') });

Specification

  • If one of the input elements is changed, lookup the address in the google database, and move the marker to that location, and center the map at the marker
  • If multiple locations are returned, use the first one
  • If the marker is moved, do nothing

showLocations

Shows multiple markers on the map. The markers cannot be changed position. When clicked on the marker, it can (if specified) show some HTML content with information about that marker. If there are many markers and zoomed out, the markers are clustered to save some CPU power. When zoomed in, the cluster is separated into single markers. Clicking on a cluster shows the markers in it (max 10).


marker_icon

The url of the icon that is displayed as marker.

Default

/media/icons/marker.png

Example

$('map-element').showLocations({ marker_icon: '/media/icons/my_marker.png' });

Specification

  • If no marker is specified, use the default marker (supplied by this module)
  • If the default marker is not found, use the google default

.


data_url

The url where the locations can be loaded from in JSON form

Default

null

Example

$('map-element').showLocations({ data_url: '/map/locations/all/' });

Specification The URL should return:

[{fields: {lng:<float>, lat:<float>}},
 {fields: {lng:<float>, lat:<float>}},
 ...]

Additional information can be added to fields.

The JSON can be easily created by the django function:

Example models.py class MyModel(models.Model): <tab>lat = models.FloatField() <tab>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")


geo_location

Uses the HTML5 geolocation to determine the location of the user.

See the Mozilla developer page for more information

Default

{ use: True, zoom: 7 }

Examples

$('map-element').showLocations({ geo_location: { use: False } });
$('map-element').showLocations({ geo_location: { use: True, zoom: 9 } });

Specifications

  • If use = True, 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


marker_content_url

The url of content that is showed when clicked on the marker. $id will be replaced by the id of the marker.

This parameter needs a wider scope. More attributes of the marker should be used to form the url

Default

null

Example

$('map-element').showLocations({ marker_content_url: '/markers/users/$id/' });

Specification

  • If the url is not specified, dont allow clicking on markers
  • if the url is specified, replace the %id in url by the marker id, and load the HTML
  • While the html is loaded, show a infowindows with a loading text (Retrieving data from server)
  • Possible make this more regex in the future to replace each /$xxx/ by some variable of the marker


locations

A list of predefined locations (if the data_url is not used)

Default

null

Example

$('map-element').showLocations({ locations: [{lng: 1.5555, lat: 1.2345},
                                             {lng: 3.4563, lat: 23.2345},
                                             {address: 'Australia, Canberra Cook'},
                                             {address: 'Germany, Berlin'},
                                             {lng: 12.4533, lat: -43.34224}]});

Specification

  • If the locations is defined, direcly show the locations on the map

Full Example 1 (showLocations)

models.py

class Marker(models.Model):
    lat = models.FloatField()
    lng = models.FloatField()

views.py

from django.core import serializers

from models import Marker

def show_all_markers(request):
    data = serializers.serialize('json', Marker.object.all(), ensure_ascii=False)
    return HttpResponse(data, mimetype="application/json")

urls.py

    url('^map/markers/all', 'app.views.show_all_markers', name='map-markers-all'),

HTML

<html>
<body>
    <section id="mymap">
    </section>
</body>
</html>

CSS

#mymap { height: 400px; width: 500px; }

Javascript

$(function(){
    $('#mymap').showLocations({ data_url: '{% url map-markers-all %}',
                                geo_location: {use: True, geo_location_zoom: 8},
                                marker_icon: '{{ MEDIA_URL }}icons/marker.png' });
});

TODO

  • Allow Cluster options
  • Multiple different clusters
  • Reloading markers
  • Filter markers on attribute

ubuntu-django-foundations/map (last edited 2011-04-11 11:40:40 by daker)