diff options
Diffstat (limited to 'design/templates/archives/map_data.html')
| -rw-r--r-- | design/templates/archives/map_data.html | 145 |
1 files changed, 45 insertions, 100 deletions
diff --git a/design/templates/archives/map_data.html b/design/templates/archives/map_data.html index a58de05..aa1bbe7 100644 --- a/design/templates/archives/map_data.html +++ b/design/templates/archives/map_data.html @@ -1,111 +1,56 @@ {% load typogrify %} {% load truncateletters %} -{% load slugify_under %} - // center on a country - function focusCountry(latitude, longitude, zoom) { - map.setZoom(zoom); - map.panTo(new google.maps.LatLng(latitude, longitude)); - }; - - {% for route in route_list %} - var {{route.template_var_name}} = [ - {% for point in route.geometry.coords%} - new google.maps.LatLng({{point.1}}, {{point.0}}){% if forloop.last%}{%else%},{%endif%} - {% endfor %} - ]; - {% endfor %} - function showRoute(route, zoom, latitude, longitude) { - var routePath = new google.maps.Polyline({ - path: eval(route), - strokeColor: "#FF0000", - strokeOpacity: 1.0, - strokeWeight: 2 - }); - map.setZoom(zoom); - map.panTo(new google.maps.LatLng(latitude, longitude)); - routePath.setMap(map); - return false; - }; -var map; -function initialize() { +var map = L.map('map-inner-canvas') - //custom marker - var image = new google.maps.MarkerImage('http://luxagraf.net/media/img/marker-entry.png', - new google.maps.Size(15, 26), - new google.maps.Point(0, 0), - new google.maps.Point(7, 26) - ); - //custom marker shadow - var shadow = new google.maps.MarkerImage('http://luxagraf.net/media/img/shadow.png', - new google.maps.Size(37, 34), - new google.maps.Point(0,0), - new google.maps.Point(8, 34) - ); - - +// center on a country +function focusCountry(latitude, longitude, zoom) { + map.panTo(new L.LatLng(latitude, longitude)); + map.setZoom(zoom); +}; + +{% for route in route_list %} +var {{route.template_var_name}} = L.polygon([ +{% for point in route.geometry.coords%} + [{{point.1}}, {{point.0}}]{% if forloop.last%}{%else%},{%endif%} +{% endfor %} + ]); + {% endfor %} + +function showRoute(route, zoom, latitude, longitude) { + map.panTo(new L.LatLng(latitude, longitude)); + map.setZoom(zoom); + eval(route).addTo(map); + return false; +}; //check for a permalink - var location = window.location.hash; //find a centerpoint var pts = new Array(); - {%for c in country_list%}pts[{{forloop.counter0}}] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %} - {%for c in region_list%}pts[pts.length] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %} - if (location.length>1) { - for (i=0;i<pts.length;i++) { - if (location == pts[i][0]) { - centerCoord = new google.maps.LatLng(pts[i][1],pts[i][2]); - zoom = pts[i][3]; - break; - } else { - centerCoord = new google.maps.LatLng(19.311143,2.460938); - zoom = 2; - } + {%for c in country_list%}pts[{{forloop.counter0}}] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}]; + {% endfor %} + {%for c in region_list%}pts[pts.length] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}]; + {% endfor %} +if (window.location.hash) { + for (var i=0; i < pts.length; i++) { + if (window.location.hash == pts[i][0]) { + var centerCoord = new L.LatLng(pts[i][1],pts[i][2]); + var zoom = pts[i][3]; + break; + } else { + var centerCoord = new L.LatLng(19.311143,2.460938); + var zoom = 2; } - } else { - centerCoord = new google.maps.LatLng(19.311143,2.460938); - zoom = 2; } - //set up map options - var mapOptions = { - zoom: zoom, - center: centerCoord, - mapTypeId: google.maps.MapTypeId.TERRAIN, - disableDefaultUI: true, - navigationControl: true, - navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL} - }; - //create map - map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); - - - //loop through and set up markers/info windows +} else { + centerCoord = new L.LatLng(19.311143,2.460938); + zoom = 2; +} +//Set center +map.setView(centerCoord, zoom); +L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18,attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles © Esri and the GIS User Community'}).addTo(map); - {% for entry in object_list %} - var marker_{{entry.title|truncatewords:2|slugify_under}} = new google.maps.Marker({ - position: new google.maps.LatLng({{entry.latitude}}, {{entry.longitude}}), - map: map, - shadow: shadow, - icon: image - }); - - var c_{{entry.title|truncatewords:2|slugify_under}} = '<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}" style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it »<\/a><\/p><\/div>'; - - google.maps.event.addListener(marker_{{entry.title|truncatewords:2|slugify_under}}, 'click', function() { - openWin(c_{{entry.title|truncatewords:2|slugify_under}},marker_{{entry.title|truncatewords:2|slugify_under}}); - }); +//loop through and set up markers/info windows +{% for entry in object_list %} +L.marker([{{entry.latitude}}, {{entry.longitude}}]).bindPopup('<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}" style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it »<\/a><\/p><\/div>').addTo(map); +{% endfor %} - {% endfor %} - // create an empty info window instance, set max width - var infowindow = new google.maps.InfoWindow({ - content: ' ', - maxWidth: 400 - }); - //function to handle click event and display single info window - function openWin(content, marker) { - infowindow.close(); - infowindow.setContent(content); - infowindow.open(map,marker); - }; - - -} |