form.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  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('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  11. attribution: 'Map data &copy; <a href="//openstreetmap.org">OpenStreetMap</a> contributors, <a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="//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('//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. map.setZoom(13);
  62. mapUpdateCoords();
  63. $('#modal').modal('hide');
  64. });
  65. btn.button('reset');
  66. }); // getJSON
  67. }); // Search sub form
  68. // Enter key on search form does not submit form,
  69. // Trigger search button instead.
  70. $('#search').keypress(function(e) {
  71. if (e.which == '13') {
  72. e.preventDefault();
  73. $('#search-btn').trigger('click');
  74. }
  75. });
  76. // Contrib share dynamic form
  77. if ($('[name="contrib-type"]:checked').val() == 'share') { $('#contrib-type-share').show(); }
  78. else { $('#contrib-type-share').hide(); }
  79. if ($('[name="contrib-type"]:checked').val() == 'connect') { $('#contrib-type-connect').show(); }
  80. else { $('#contrib-type-connect').hide(); }
  81. // On change
  82. $('[name="contrib-type"]').change(function(e){
  83. $('#contrib-type-share').slideUp();
  84. $('#contrib-type-connect').slideUp();
  85. if ($(this).val() == 'share') { $('#contrib-type-share').slideDown(); }
  86. if ($(this).val() == 'connect') { $('#contrib-type-connect').slideDown(); }
  87. });
  88. // select/deselect all checkbox
  89. $('#orientation-all').change(function(e){
  90. $('input[name="orientation"]').prop('checked', $(e.target).is(':checked') );
  91. });
  92. $('.orientation').change(function(e){
  93. if (! $(e.target).is(':checked')) {
  94. $('input[name="orientation-all"]').prop('checked', false);
  95. }
  96. if ($('.orientation').filter(':not(:checked)').length == 0) {
  97. $('input[name="orientation-all"]').prop('checked', true);
  98. }
  99. });
  100. });