-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Maps can now use the API to render a batch of pins at a time
- Made user of the API's limit and offset features - Made akvo-maps.js pass jslint . #113
- Loading branch information
Showing
8 changed files
with
637 additions
and
164 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
...74bf569a436bcf1a1051a61fd9cc10271f2eda.js → ...86d0fcc9bc7b0fc4be582957f5d828df0d00ab.js
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,163 +1,150 @@ | ||
| /*jslint browser: true*/ | ||
| /*global $, jQuery, Handlebars, google*/ | ||
|
|
||
| (function () { | ||
| "use strict"; | ||
|
|
||
| // When included akvo-maps.js will query the page for elements with | ||
| // class ".akvo_map". These elements should be generated by the maps | ||
| // Django template tag. Each map element will have a div element and | ||
| // a JavaScript litteral with data which are used to create a map with | ||
| // corresponding locations from the RSR API | ||
|
|
||
| var addMap, addPin, populateMap, mapOptions, prepareNextRequest; | ||
|
|
||
|
|
||
| // For each .akvo_map element on the page, read options | ||
| // and kick of the creation of a new map | ||
| $(document).ready(function () { | ||
| $('.akvo_map').each(function () { | ||
| var mapId = $(this).attr('id'); | ||
| addMap({ | ||
| mapId: mapId, | ||
| mapElement: document.getElementById(mapId), | ||
| mapOpts: window[mapId] | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| $(document).ready(function() { | ||
| $('.akvo_map').each(function() { | ||
| var resourceURL; | ||
| var mapId = $(this).attr('id'); | ||
| var mapElement = document.getElementById(mapId); | ||
| var mapOpts = window[mapId]; | ||
| var objectId = mapOpts.objectId; | ||
| var blueMarker = mapOpts.marker_icon; | ||
|
|
||
| var options; | ||
| if (mapOpts.type == "static" ) { | ||
| options = { | ||
| 'draggable': false, | ||
| 'mapTypeControl': false, | ||
| 'navigationControl': true, | ||
| 'scaleControl': false, | ||
| 'scrollwheel': false, | ||
| 'streetViewControl': false | ||
| }; | ||
| } else { | ||
| options = { | ||
| 'draggable': true, | ||
| 'mapTypeControl': true, | ||
| 'navigationControl': true, | ||
| 'scaleControl': true, | ||
| 'scrollwheel': false, | ||
| 'streetViewControl': false | ||
| }; | ||
|
|
||
| } | ||
|
|
||
| $(mapElement).gmap(options).bind('init', function() { | ||
|
|
||
| if (objectId == 'projects') { | ||
| resourceURL = 'http://akvo.dev/api/v1/project/?format=jsonp&depth=1&callback=?'; | ||
| } | ||
| else if (objectId == 'organisations') { | ||
| resourceURL = 'http://akvo.dev/api/v1/organisation/?format=jsonp&depth=1&callback=?'; | ||
| } else { | ||
| resourceURL = 'http://akvo.dev/api/v1/project/' + objectId + '/?format=jsonp&depth=1&callback=?'; | ||
| } | ||
|
|
||
| var tmplSrc = '<div class="mapInfoWindow" style="height:150px; min-height:150px; max-height:150px; overflow:hidden;">' + | ||
| '<a class="small" href="{{projectUrl}}">{{projectTitle}}</a>' + | ||
| '{{#if projectImage}}' + | ||
| '<div style="text-align: center; margin-top: 5px;">' + | ||
| '<a href="{{projectUrl}}" title="{{projectTitle}}">' + | ||
| '<img src="{{projectImage}}" alt="">' + | ||
| '</a>' + | ||
| '</div>' + | ||
| '{{/if}}' + | ||
| '</div>'; | ||
| var mapInfoWindowTemplate = Handlebars.compile(tmplSrc); | ||
|
|
||
| $.getJSON(resourceURL, function(data) { | ||
| $.each(data.locations, function(i, location) { | ||
| location.projectTitle = data.title; | ||
| location.projectUrl = data.absolute_url; | ||
| if (location.projectUrl == 'null') { | ||
| location.projectUrl = '#'; | ||
| } | ||
|
|
||
| try { | ||
| location.projectImage = data.current_image.thumbnails.map_thumb; | ||
| } | ||
| catch (e) { | ||
| location.projectImage = ''; | ||
| } | ||
|
|
||
| if (mapOpts.type == "static" ) { | ||
| $(mapElement).gmap('addMarker', { | ||
| 'position': new google.maps.LatLng(location.latitude, location.longitude), | ||
| 'clickable': false, | ||
| 'icon': '{{marker_icon}}', | ||
| 'bounds': true | ||
| // Creates the map with options and makes the initial AJAX request | ||
| addMap = function (map) { | ||
| $(map.mapElement).gmap(mapOptions(map.mapOpts.type)).bind('init', function () { | ||
|
|
||
| // TODO | ||
| // Handle other resources | ||
| // if (objectId == 'projects') { | ||
| // resourceURL = 'http://akvo.dev/api/v1/project/?format=jsonp&depth=1&callback=?'; | ||
| // } | ||
| // else if (objectId == 'organisations') { | ||
| // resourceURL = 'http://akvo.dev/api/v1/organisation/?format=jsonp&depth=1&callback=?'; | ||
| // } else { | ||
| // resourceURL = 'http://akvo.dev/api/v1/project/' + objectId + '/?format=jsonp&depth=1&callback=?'; | ||
| // } | ||
|
|
||
| var resourceURL = map.mapOpts.host + 'api/v1/project/?format=jsonp&depth=1&limit=20&callback=?'; | ||
| $.getJSON(resourceURL, function (data) { | ||
| populateMap(map, data); | ||
| }); | ||
| } else { | ||
| $(mapElement).gmap('addMarker', { | ||
| 'position': new google.maps.LatLng(location.latitude, location.longitude), | ||
| // 'clickable': false, | ||
| 'bounds': true | ||
| }).click(function() { | ||
| $(mapElement).gmap('openInfoWindow', { | ||
| 'content': mapInfoWindowTemplate(location) | ||
| }, this); | ||
| }); | ||
| }; | ||
|
|
||
| // Populates the map with data | ||
| populateMap = function (map, data) { | ||
| var projects = data.objects, pinTmpl = Handlebars.compile( | ||
| '<div class="mapInfoWindow"' + | ||
| 'style="height:150px; min-height:150px; max-height:150px; overflow:hidden;">' + | ||
| '<a class="small" href="{{url}}">{{title}}</a>' + | ||
| '{{#if thumb}}' + | ||
| '<div style="text-align: center; margin-top: 5px;">' + | ||
| '<a href="{{url}}" title="{{title}}">' + | ||
| '<img src="{{thumb}}" alt="">' + | ||
| '</a>' + | ||
| '</div>' + | ||
| '{{/if}}' + | ||
| '</div>' | ||
| ); | ||
|
|
||
| $.each(projects, function (i, project) { | ||
| $.each(project.locations, function (k, location) { | ||
| // Add project data to the location | ||
| location.url = project.absolute_url; | ||
| location.title = project.title; | ||
| try { | ||
| location.thumb = project.current_image.thumbnails.map_thumb; | ||
| } catch (e) { location.thumb = ''; } | ||
|
|
||
| addPin(map, location, pinTmpl); | ||
| }); | ||
| }); | ||
|
|
||
| } | ||
|
|
||
|
|
||
| // If there is to grap from the resource make go | ||
| if (data.meta.next !== null) { | ||
| prepareNextRequest(map, data.meta.next); | ||
| } | ||
| }; | ||
|
|
||
| // Add a single pin | ||
| addPin = function (map, location, template) { | ||
| if (map.mapOpts.type === 'static') { | ||
| $(map.mapElement).gmap('addMarker', { | ||
| 'position': new google.maps.LatLng(location.latitude, location.longitude), | ||
| 'clickable': false, | ||
| // 'icon': blueMarker, | ||
| 'bounds': true | ||
| }); | ||
| } else { | ||
| $(map.mapElement).gmap('addMarker', { | ||
| 'position': new google.maps.LatLng(location.latitude, location.longitude), | ||
| 'bounds': true | ||
| }).click(function () { | ||
| $(map.mapElement).gmap('openInfoWindow', { | ||
| 'content': template(location) | ||
| }, this); | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| // Since we need to update the callback parameters we don't use the meta.next | ||
| // but create a new resource url | ||
| prepareNextRequest = function (map, resource) { | ||
| var url = $.url(resource), | ||
| urlTmpl = Handlebars.compile('{{host}}{{path}}?format=jsonp&depth=1&limit=' + | ||
| '{{limit}}&offset={{offset}}&callback=?'), | ||
| newUrl = urlTmpl({ | ||
| 'host': url.attr('host'), | ||
| 'path': url.attr('path'), | ||
| 'limit': Number(url.param('limit')), | ||
| 'offset': Number(url.param('offset')) | ||
| }); | ||
| $.getJSON(newUrl, function (data) { | ||
| populateMap(map, data); | ||
| }); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
|
|
||
| // ------------------------------------------------------------------------------------------------ | ||
|
|
||
|
|
||
|
|
||
| // $(document).ready(function() { | ||
| // $('.akvo_map').each(function() { | ||
| // var mapId = $(this).attr('id'); | ||
| // var mapElement = document.getElementById(mapId); | ||
| // var mapOpts = window[mapId]; | ||
| // var objectId = mapOpts.objectId; | ||
|
|
||
| // var options = { | ||
| // zoom: mapOpts.zoom, | ||
| // center: new google.maps.LatLng(mapOpts.Lat, mapOpts.Lng), | ||
| // mapTypeId: google.maps.MapTypeId.ROADMAP, | ||
| // scrollwheel: false, | ||
| // streetViewControl: false | ||
| // }; | ||
|
|
||
| // var map = new google.maps.Map(mapElement, options); | ||
|
|
||
| // var akvoMap = { | ||
| // // resourceURL: 'http://akvo.dev/api/v1/project_location/?format=jsonp&project=' + objectId + '&callback=?', | ||
| // resourceURL: 'http://akvo.dev/api/v1/project/' + objectId + '/?format=jsonp&depth=1&callback=?', | ||
|
|
||
| // load: function(callback) { | ||
| // $.getJSON(this.resourceURL, function(data) { | ||
| // var items = []; | ||
| // var projectTitle = data.title; | ||
| // var projectPath = data.path; | ||
| // var projectImage = data.current_image; | ||
| // $.each(data.locations, function(i, location) { | ||
| // items.push({ | ||
| // 'projectId': location.project, | ||
| // 'latitude': location.latitude, | ||
| // 'longitude': location.longitude, | ||
| // 'primary': location.primary, | ||
| // 'city': location.city, | ||
| // 'projectTitle': projectTitle, | ||
| // 'projectPath': projectPath | ||
| // }); | ||
| // }); | ||
| // callback(items); | ||
| // }); | ||
| // } | ||
| // }; | ||
|
|
||
| // akvoMap.load(function(locations){ | ||
|
|
||
| // $.each(locations, function(index, location){ | ||
| // console.log(location.city); | ||
| // var marker = new google.maps.Marker({ | ||
| // icon: '/rsr/media/core/img/blueMarker.png', | ||
| // map: map, | ||
| // position: new google.maps.LatLng(location.latitude, location.longitude), | ||
| // clickable: false | ||
| // }); | ||
| // }); | ||
| // }); | ||
|
|
||
| // }); | ||
| // }); | ||
| }; | ||
|
|
||
|
|
||
| // Static or dynamic map options | ||
| mapOptions = function (mapType) { | ||
| var options; | ||
| if (mapType === 'static') { | ||
| options = { | ||
| 'draggable': false, | ||
| 'mapTypeControl': false, | ||
| 'navigationControl': true, | ||
| 'scaleControl': false, | ||
| 'scrollwheel': false, | ||
| 'streetViewControl': false | ||
| }; | ||
| } else { | ||
| options = { | ||
| 'draggable': true, | ||
| 'mapTypeControl': true, | ||
| 'navigationControl': true, | ||
| 'scaleControl': true, | ||
| 'scrollwheel': false, | ||
| 'streetViewControl': false | ||
| }; | ||
| } | ||
| return options; | ||
| }; | ||
| }()); |
Oops, something went wrong.