diff options
Diffstat (limited to 'templates/includes/map_entry_list_template.html')
| -rw-r--r-- | templates/includes/map_entry_list_template.html | 176 |
1 files changed, 97 insertions, 79 deletions
diff --git a/templates/includes/map_entry_list_template.html b/templates/includes/map_entry_list_template.html index 0705602..206430a 100644 --- a/templates/includes/map_entry_list_template.html +++ b/templates/includes/map_entry_list_template.html @@ -1,89 +1,107 @@ {% load typogrify %} {% load truncateletters %} {% load slugify_under %} -<script type="text/javascript"> - var map = null; - function JLngLat(a,b) { - return new GLatLng(b,a) - } - function initialize() { - if (GBrowserIsCompatible()) { - var tinyIcon = new GIcon(); - tinyIcon.image = "http://media.luxagraf.net/img/marker-entry.png"; - tinyIcon.shadow = "http://media.luxagraf.net/img/shadow.png"; - tinyIcon.iconSize = new GSize(12, 20); - tinyIcon.shadowSize = new GSize(22, 20); - tinyIcon.iconAnchor = new GPoint(6, 20); - tinyIcon.infoWindowAnchor = new GPoint(5, 5); +function initialize() { - //var iconOptions = {}; - //iconOptions.primaryColor = "#a53503"; - //iconOptions.strokeColor = "#201a11"; - //var icon = MapIconMaker.createLabeledMarkerIcon(iconOptions); - - var location = window.location.hash; - 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]) { - point = new GLatLng(pts[i][1],pts[i][2]); - zoom = pts[i][3]; - break; - } else { - point = new GLatLng(19.311143,2.460938); - zoom = 2; - } - } - } else { - point = new GLatLng(19.311143,2.460938); - zoom = 2; - } - - // create a new map. - map = new GMap2(document.getElementById("map-canvas")); - map.enableContinuousZoom() - map.setCenter(point, zoom, G_PHYSICAL_MAP); - - // basic control and overview (closed by default) - map.addControl(new GSmallZoomControl()); - //var ov = new GOverviewMapControl(); - //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:tinyIcon}; - 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 = '<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>' - 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); - }); + //custom marker + var image = new google.maps.MarkerImage('http://media.luxagraf.net/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://media.luxagraf.net/img/shadow.png', + new google.maps.Size(37, 34), + new google.maps.Point(0,0), + new google.maps.Point(8, 34) + ); + + + //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; + } + } + } 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 + + {% 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}}); + }); {% 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); } - } - - // center on a country +} +// center on a country function focusCountry(latitude, longitude, zoom) { map.setZoom(zoom); - map.panTo(new GLatLng(latitude, longitude)) - } - 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 + 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 }); - focusCountry(lat,lon,zoom); - map.addOverlay(encodedPolyline); - } - </script>
\ No newline at end of file + map.setZoom(zoom); + map.panTo(new google.maps.LatLng(latitude, longitude)); + routePath.setMap(map); + return false; +} |