1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
{% extends 'base.html' %}
{% load chunks %}
{% load truncateletters %}
{% load slugify_under %}
{% block pagetitle %}Luxagraf | Stories from {{region.name}}{% endblock %}
{% block metadescription %}Writing Archive, Luxagraf{% endblock %}
{#==============================================
Google Maps code
==============================================#}
{% block extrahead %}
<script src="http://maps.google.com/maps?file=api&v=2&key={{map_key}}" type="text/javascript" type="text/javascript"></script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/src/mapiconmaker.js" type="text/javascript" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function JLngLat(a,b) {
return new GLatLng(b,a)
}
function initialize() {
if (GBrowserIsCompatible()) {
var iconOptions = {};
iconOptions.primaryColor = "#a53503";
iconOptions.strokeColor = "#201a11";
var icon = MapIconMaker.createLabeledMarkerIcon(iconOptions);
point = new GLatLng({{region.lat}},{{region.lon}})
// create a new map.
map = new GMap2(document.getElementById("map-canvas"));
map.setCenter(point, {{region.zoom_level}}, G_PHYSICAL_MAP);
// basic control and overview (closed by default)
map.addControl(new GSmallZoomControl());
var ov = new GOverviewMapControl(new GSize(100,100));
map.addControl(ov);
ov.hide(true);
// Add a marker for each project
{% for entry in object_list %}
point_{{entry.title|truncatewords:2|slugify_under}} = JLngLat{{entry.point.coords}};
markerOptions = { clickable:true, draggable:false, icon:icon};
marker_{{entry.title|truncatewords:2|slugify_under}} = new GMarker(point_{{entry.title|truncatewords:2|slugify_under}}, markerOptions);
map.addOverlay(marker_{{entry.title|truncatewords:2|slugify_under}});
marker_{{entry.title|truncatewords:2|slugify_under}}.info_window_content = '<h4>{{entry.title}}<\/h4><span>{{entry.location|safe}}, {{entry.location.state.country.name|safe}}<\/span><p><img src="{{entry.thumbnail.url}}" height="100" alt="{{ entry.title }}" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it »<\/a><\/p>'
marker_{{entry|truncatewords:2|slugify_under}}.bindInfoWindowHtml(marker_{{entry|truncatewords:2|slugify_under}}.info_window_content, {maxWidth:400});
GEvent.addListener(marker_{{entry.title|truncatewords:2|slugify_under}}, "click", function() {
map.panTo(point_{{entry.title|truncatewords:2|slugify_under}}, 2);
});
{% endfor %}
}
}
// center on a city
function focusCity(marker, latitude, longitude) {
point = new GLatLng(latitude, longitude)
map.panTo(point)
map.setZoom(6);
marker.openInfoWindowHtml(marker.info_window_content)
}
// center on a country
function focusCountry(latitude, longitude, zoom) {
p = new GLatLng(latitude, longitude)
map.panTo(p)
map.setZoom(zoom);
}
function addRoute(line,levels,color,lat,lon,zoom){
var encodedPolyline = new GPolyline.fromEncoded({
color: color,
weight: 5,
points: line,
levels: levels,
zoomFactor: 32,
numLevels: 4
});
focusCountry(lat,lon,zoom);
map.addOverlay(encodedPolyline);
}
</script>
{% endblock %}
{%block bodyid%}id="location"{%endblock%}
{% block bodyevents %}onload="initialize()" onunload="GUnload()"{% endblock %}
{% block primary %}
<div id="map-canvas">
</div>
{% endblock %}
{% block titleoverride %} {% endblock %}
{% block sidebar %}
<div id="sidebar">
<div class="blok">
<h4 class="first">Topography</h4>
{% chunk "regions_sidebar" %}
</div>
</div><!-- sidebar -->
{% endblock %}
|
