form.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. $( document ).ready(function() {
  2. // Defaults
  3. defaults = {
  4. lat: ($('#latitude').val()) ? $('#latitude').val() : 47.218371,
  5. lng: ($('#longitude').val()) ? $('#longitude').val() : -1.553621,
  6. zoom: 13,
  7. }
  8. // Create map
  9. var map = L.map('map', {scrollWheelZoom: false}).setView([defaults.lat,defaults.lng], defaults.zoom);
  10. L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  11. attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
  12. maxZoom: 18
  13. }).addTo(map);
  14. // Create marker
  15. var marker = L.marker([defaults.lat,defaults.lng], {
  16. draggable: true
  17. }).addTo(map);
  18. // every time the marker is dragged, update the coordinates container
  19. marker.on('dragend', mapUpdateCoords);
  20. // Set the initial marker coordinate on load.
  21. mapUpdateCoords();
  22. function mapUpdateCoords() {
  23. var m = marker.getLatLng();
  24. $('#latitude').val(m.lat);
  25. $('#longitude').val(m.lng);
  26. }
  27. // Display tiny circles on existing public points
  28. var GeoJsonPath = $('#map').data('json');
  29. $.getJSON(GeoJsonPath, function(data){
  30. var featureLayer = L.geoJson(data, {
  31. pointToLayer: function (feature, latlng) {
  32. return L.circleMarker(latlng, {color: '#00B300'});
  33. }
  34. }).addTo(map);
  35. });
  36. // Search sub form
  37. $('#search-btn').click(function(e){
  38. e.preventDefault();
  39. var btn = $(this).button('loading');
  40. // Geocoding
  41. var searchString = $('#search').val();
  42. $.getJSON('http://nominatim.openstreetmap.org/search?limit=5&format=json&q='+searchString, function(data){
  43. var items = [];
  44. $.each(data, function(key, val) {
  45. items.push(
  46. "<li class='list-group-item'><a href='#' data-lat='"+val.lat+"' data-lng='"+val.lon+"'>" + val.display_name + '</a></li>'
  47. );
  48. });
  49. $('#modal .modal-body').empty();
  50. if (items.length != 0) {
  51. $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#modal .modal-body');
  52. } else {
  53. $('<p/>', { html: "Aucun résultat" }).appendTo('#modal .modal-body');
  54. }
  55. $('#modal').modal('show');
  56. // Bind click on results and update coordinates
  57. $('#modal .modal-body a').on('click', function(e){
  58. e.preventDefault();
  59. marker.setLatLng({lat:$(this).data('lat'), lng:$(this).data('lng')}).update();
  60. map.panTo({lat:$(this).data('lat'), lng:$(this).data('lng')});
  61. mapUpdateCoords();
  62. $('#modal').modal('hide');
  63. });
  64. btn.button('reset');
  65. }); // getJSON
  66. }); // Search sub form
  67. // Enter key on search form does not submit form,
  68. // Trigger search button instead.
  69. $('#search').keypress(function(e) {
  70. if (e.which == '13') {
  71. e.preventDefault();
  72. $('#search-btn').trigger('click');
  73. }
  74. });
  75. // Contrib share dynamic form
  76. if ($('[name="contrib-type"]:checked').val() == 'share') { $('#contrib-type-share').show(); }
  77. else { $('#contrib-type-share').hide(); }
  78. if ($('[name="contrib-type"]:checked').val() == 'connect') { $('#contrib-type-connect').show(); }
  79. else { $('#contrib-type-connect').hide(); }
  80. // On change
  81. $('[name="contrib-type"]').change(function(e){
  82. $('#contrib-type-share').slideUp();
  83. $('#contrib-type-connect').slideUp();
  84. if ($(this).val() == 'share') { $('#contrib-type-share').slideDown(); }
  85. if ($(this).val() == 'connect') { $('#contrib-type-connect').slideDown(); }
  86. });
  87. // select/deselect all checkbox
  88. $('#orientation-all').change(function(e){
  89. $('input[name="orientation"]').prop('checked', $(e.target).is(':checked') );
  90. });
  91. $('.orientation').change(function(e){
  92. if (! $(e.target).is(':checked')) {
  93. $('input[name="orientation-all"]').prop('checked', false);
  94. }
  95. if ($('.orientation').filter(':not(:checked)').length == 0) {
  96. $('input[name="orientation-all"]').prop('checked', true);
  97. }
  98. });
  99. });