main.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. $( document ).ready(function() {
  2. var map = L.map('map').setView([47.218371,-1.553621], 13);
  3. var latitude = document.getElementById('latitude');
  4. var longitude = document.getElementById('longitude');
  5. L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  6. 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>',
  7. maxZoom: 18
  8. }).addTo(map);
  9. var marker = L.marker([47.218371,-1.553621], {
  10. draggable: true
  11. }).addTo(map);
  12. // every time the marker is dragged, update the coordinates container
  13. marker.on('dragend', ondragend);
  14. // Set the initial marker coordinate on load.
  15. ondragend();
  16. function ondragend() {
  17. var m = marker.getLatLng();
  18. latitude.value = m.lat;
  19. longitude.value = m.lng;
  20. }
  21. $('#search-btn').click(function(e){
  22. e.preventDefault();
  23. var searchString = $('#search').val();
  24. $.getJSON('http://nominatim.openstreetmap.org/search?limit=5&format=json&q='+searchString, function(data){
  25. var items = [];
  26. $.each(data, function(key, val) {
  27. items.push(
  28. "<li class='list-group-item'><a href='#' data-lat='"+val.lat+"' data-lng='"+val.lon+"'>" + val.display_name + '</a></li>'
  29. );
  30. });
  31. $('#search-results').empty();
  32. if (items.length != 0) {
  33. // $('<p>Resultats</p>').appendTo('#search-results');
  34. $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#search-results');
  35. } else {
  36. $('<p>', { html: "No results found" }).appendTo('#search-results');
  37. }
  38. $('#search-results a').on('click', function(e){
  39. e.preventDefault();
  40. marker.setLatLng({lat:$(this).data('lat'), lng:$(this).data('lng')}).update();
  41. map.panTo({lat:$(this).data('lat'), lng:$(this).data('lng')});
  42. ondragend();
  43. });
  44. });
  45. });
  46. });