$( document ).ready(function() { // Defaults defaults = { lat: ($('#id_latitude').val()) ? $('#id_latitude').val() : 47.218371, lng: ($('#id_longitude').val()) ? $('#id_longitude').val() : -1.553621, zoom: 13, } // Create map var map = L.map('map', {scrollWheelZoom: false}).setView([defaults.lat,defaults.lng], defaults.zoom); L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <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>', maxZoom: 18 }).addTo(map); // Add scale control L.control.scale({ position: 'bottomleft', metric: true, imperial: false, maxWidth: 150 }).addTo(map); var marker = L.marker([defaults.lat, defaults.lng], { draggable: true }).addTo(map); // every time the marker is dragged, update the coordinates container marker.on('dragend', mapUpdateCoords); map.on('click', (e) => { marker.setLatLng(e.latlng) mapUpdateCoords() }); function mapUpdateCoords() { var m = marker.getLatLng(); $('#id_latitude').val(m.lat); $('#id_longitude').val(m.lng); } // Display tiny circles on existing public points var GeoJsonPath = $('#map').data('json'); $.getJSON(GeoJsonPath, function(data){ var featureLayer = L.geoJson(data, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, {color: '#00B300'}); } }).addTo(map); }); // Search sub form $('#search-btn').click(function(e){ e.preventDefault(); var btn = $(this).button('loading'); // Geocoding var searchString = $('#search').val(); $.getJSON('https://nominatim.openstreetmap.org/search?limit=5&format=json&q='+searchString, function(data){ var items = []; $.each(data, function(key, val) { items.push( "<li class='list-group-item'><a href='#' data-lat='"+val.lat+"' data-lng='"+val.lon+"'>" + val.display_name + '</a></li>' ); }); $('#modal .modal-body').empty(); if (items.length != 0) { $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#modal .modal-body'); } else { $('<p/>', { html: "Aucun résultat" }).appendTo('#modal .modal-body'); } $('#modal').modal('show'); // Bind click on results and update coordinates $('#modal .modal-body a').on('click', function(e){ e.preventDefault(); marker.setLatLng({lat:$(this).data('lat'), lng:$(this).data('lng')}).update(); map.panTo({lat:$(this).data('lat'), lng:$(this).data('lng')}); map.setZoom(16); mapUpdateCoords(); $('#modal').modal('hide'); }); btn.button('reset'); }); // getJSON }); // Search sub form // Enter key on search form does not submit form, // Trigger search button instead. $('#search').keypress(function(e) { if (e.which == '13') { e.preventDefault(); $('#search-btn').trigger('click'); } }); // Contrib share dynamic form if ($('[name="contrib_type"]:checked').val() == 'share') { $('#contrib-type-share').show(); } else { $('#contrib-type-share').hide(); } if ($('[name="contrib_type"]:checked').val() == 'connect') { $('#contrib-type-connect').show(); } else { $('#contrib-type-connect').hide(); } // On change $('[name="contrib_type"]').change(function(e){ $('#contrib-type-share').slideUp(); $('#contrib-type-connect').slideUp(); if ($(this).val() == 'share') { $('#contrib-type-share').slideDown(); } if ($(this).val() == 'connect') { $('#contrib-type-connect').slideDown(); } }); // select/deselect all checkbox $('#orientation-all').change(function(e){ $('input[name="orientations"]').prop('checked', $(e.target).is(':checked') ); }); $('.orientations').change(function(e){ if (! $(e.target).is(':checked')) { $('input[name="orientation-all"]').prop('checked', false); } if ($('.orientations').filter(':not(:checked)').length == 0) { $('input[name="orientation-all"]').prop('checked', true); } }); });