Organization html
Jump to navigation
Jump to search
| Line 13: | Line 13: | ||
<input class="cultura_italiana_form_input" type="text" placeholder="Logo" name="Form organization[Organization logo]" value=""> | <input class="cultura_italiana_form_input" type="text" placeholder="Logo" name="Form organization[Organization logo]" value=""> | ||
<input class="cultura_italiana_form_input" type="text" placeholder="Type" name="Form organization[Organization type]" value=""> | <input class="cultura_italiana_form_input" type="text" placeholder="Type" name="Form organization[Organization type]" value=""> | ||
| − | |||
<select class="cultura_italiana_form_input" name="Form organization[Organization country]" placeholder="Country"> | <select class="cultura_italiana_form_input" name="Form organization[Organization country]" placeholder="Country"> | ||
<option>Afghanistan</option> | <option>Afghanistan</option> | ||
| Line 246: | Line 245: | ||
<input class="cultura_italiana_form_input" type="text" placeholder="City, town or village of the organization" name="Form organization[City, town or village of the organization]" value=""> | <input class="cultura_italiana_form_input" type="text" placeholder="City, town or village of the organization" name="Form organization[City, town or village of the organization]" value=""> | ||
| + | |||
| + | |||
| + | |||
| + | <label for="latInput">Latitude</label> | ||
| + | <input id="latInput"/> | ||
| + | <label for="lngInput">Longitude</label> | ||
| + | <input id="lngInput"/> | ||
| + | <div id="map" style="height : 200px"></div> | ||
| + | <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | ||
| + | <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | ||
| + | |||
| + | |||
| + | var mapCenter = [22, 87]; | ||
| + | var map = L.map('map', {center : mapCenter, zoom : 3}); | ||
| + | L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', { | ||
| + | maxZoom: 18, | ||
| + | attribution: 'Map data © <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>', | ||
| + | id: 'examples.map-i875mjb7', | ||
| + | noWrap : true | ||
| + | }).addTo(map); | ||
| + | |||
| + | |||
| + | var marker = L.marker(mapCenter).addTo(map); | ||
| + | var updateMarker = function(lat, lng) { | ||
| + | marker | ||
| + | .setLatLng([lat, lng]) | ||
| + | .bindPopup("Your location : " + marker.getLatLng().toString()) | ||
| + | .openPopup(); | ||
| + | return false; | ||
| + | }; | ||
| + | |||
| + | |||
| + | map.on('click', function(e) { | ||
| + | $('#latInput').val(e.latlng.lat); | ||
| + | $('#lngInput').val(e.latlng.lng); | ||
| + | updateMarker(e.latlng.lat, e.latlng.lng); | ||
| + | }); | ||
| + | |||
| + | |||
| + | var updateMarkerByInputs = function() { | ||
| + | return updateMarker( $('#latInput').val() , $('#lngInput').val()); | ||
| + | } | ||
| + | $('#latInput').on('input', updateMarkerByInputs); | ||
| + | $('#lngInput').on('input', updateMarkerByInputs); | ||
<input class="cultura_italiana_form_input" type="text" placeholder="Organization coordinates" name="Form organization[Organization coordinates]" value=""> | <input class="cultura_italiana_form_input" type="text" placeholder="Organization coordinates" name="Form organization[Organization coordinates]" value=""> | ||
<input class="cultura_italiana_form_input" type="text" placeholder="Registration date" name="Form organization[Organization registration date]" value=""> | <input class="cultura_italiana_form_input" type="text" placeholder="Registration date" name="Form organization[Organization registration date]" value=""> | ||
Revision as of 13:05, 28 February 2020