From 33cf5ef19cd578fcbc5962764d72bbd7310bfb89 Mon Sep 17 00:00:00 2001 From: luxagraf Date: Tue, 23 Apr 2013 22:18:04 -0400 Subject: swtiched from google maps api to OSM with leaflet --- design/templates/archives/map.html | 23 +++-- design/templates/archives/map_data.html | 145 ++++++++++---------------------- 2 files changed, 63 insertions(+), 105 deletions(-) (limited to 'design') diff --git a/design/templates/archives/map.html b/design/templates/archives/map.html index 3c644eb..c36817a 100644 --- a/design/templates/archives/map.html +++ b/design/templates/archives/map.html @@ -9,14 +9,21 @@ Google Maps code ==============================================#} {% block extrahead %} + + + + + + - - {% endblock %} -{%block bodyid%}id="map" {%endblock%} -{% block bodyevents %}onload="initialize()"{% endblock %} +{%block bodyid%}id="map"{%endblock%} {% block primary %}

Browse luxagraf by map

-
+
+
+
+

Trips

    @@ -47,4 +57,7 @@ Google Maps code
+ + + {% endblock %} 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;iOpenStreetMap contributors, CC-BY-SA, 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}} = '

{{entry.title}}<\/h4>{{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>

{{ entry.title }}{{entry.dek|escapejs}} 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('

{{entry.title}}<\/h4>{{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>

{{ entry.title }}{{entry.dek|escapejs}} 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); - }; - - -} -- cgit v1.2.3