Krautspace/calcifer
Archived
2
0
Fork 0
Code Issues 11 Pull requests 2 Activity

Show geocoords for known locations.

Browse source
This commit is contained in:
Tim Schumacher 2014-07-09 13:09:49 +02:00
parent d443179701
commit df74c9f263
4 changed files with 61 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss
View file

@ -35,6 +35,9 @@ form .ui.form {
.attached-label > input, .attached-label > textarea { .attached-label > input, .attached-label > textarea {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.attached-geo-label > input, .attached-geo-label > textarea {
margin-bottom: 3.2rem;
}
} }
} }

85
src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js
View file

@ -5,52 +5,61 @@
// initializing with settings // initializing with settings
function addGeoCoordinates(ev) { function addGeoCoordinates(ev) {
return false; return false;
} }
var map = null; var map = null;
$(document).ready(function () { $(document).ready(function () {
$('.icon.link').popup(); $('.icon.link').popup();
jQuery('input[type=datetime]').datetimepicker({lang: 'de', format: 'Y-m-d H:i'}); jQuery('input[type=datetime]').datetimepicker({lang: 'de', format: 'Y-m-d H:i'});
$('.add_geo').click(addGeoCoordinates); $('.add_geo').click(addGeoCoordinates);
map = L.map('map'); map = L.map('map');
// add an OpenStreetMap tile layer // add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); }).addTo(map);
map.setView([51.505, -0.09], 0); map.setView([51.505, -0.09], 0);
L.Icon.Default.imagePath = '/css/images'; L.Icon.Default.imagePath = '/css/images';
var popup = L.popup(); var popup = L.popup();
var marker = L.marker(); var marker = L.marker();
function onMapClick(e) { function onMapClick(e) {
marker marker
.setLatLng(e.latlng) .setLatLng(e.latlng)
//.setContent("You clicked the map at " + e.latlng.toString()) //.setContent("You clicked the map at " + e.latlng.toString())
.addTo(map); .addTo(map);
}
map.on('click', onMapClick);
$('.geo.chooser').modal('setting', {
closable: false,
onApprove: function () {
var coords = marker.getLatLng();
$('input[name=location_lat]').val(coords.lat);
$('input[name=location_lon]').val(coords.lng);
$('input[name=location]').css('margin-bottom','3.2rem');
$('span.coords').text('Folgende Koordinaten sind angegeben: lat:' +coords.lat + ', lon:' + coords.lng);
},
onDeny: function () {
},
onVisible: function () {
map.invalidateSize(true);
map.locate({setView: true});
} }
}).modal('attach events', '.add_geo', 'show');
map.on('click', onMapClick);
$('.geo.chooser').modal('setting', {
closable: false,
onApprove: function () {
var coords = marker.getLatLng();
$('input[name=location_lat]').val(coords.lat);
$('input[name=location_lon]').val(coords.lng);
$('input[name=location]').css('margin-bottom', '3.2rem');
$('span.coords').text('Folgende Koordinaten sind angegeben: lat:' + coords.lat + ', lon:' + coords.lng);
},
onDeny: function () {
},
onVisible: function () {
map.invalidateSize(true);
var lat = parseFloat($('input[name=location_lat]').val());
var lon = parseFloat($('input[name=location_lon]').val());
if ((lat > 0) && (lon > 0)) {
map.setView([lat,lon],16);
var latlng = new L.LatLng(lat,lon);
marker.setLatLng(latlng);
marker.addTo(map);
} else {
map.locate({setView: true});
}
}
}).modal('attach events', '.add_geo', 'show');
}); });

9
src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig
View file

@ -2,7 +2,10 @@
{% block css %} {% block css %}
{% stylesheets filter="compass" {% stylesheets filter="compass"
"@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss" %} "@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss"
"@CalciferBundle/Resources/assets/css/events.scss"
"@CalciferBundle/Resources/assets/css/leaflet.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}"/> <link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %} {% endstylesheets %}
{% endblock %} {% endblock %}
@ -10,7 +13,9 @@
{% block javascripts %} {% block javascripts %}
{% javascripts {% javascripts
"@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js" "@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js"
"@CalciferBundle/Resources/assets/js/events.js" %} "@CalciferBundle/Resources/assets/js/events.js"
"@CalciferBundle/Resources/assets/js/leaflet.js"
%}
<script src="{{ asset_url }}"></script> <script src="{{ asset_url }}"></script>
{% endjavascripts %} {% endjavascripts %}
{% endblock %} {% endblock %}

8
src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig
View file

@ -77,19 +77,19 @@
<div class="field"> <div class="field">
<label class="control-label required" for="event_location">Ort</label> <label class="control-label required" for="event_location">Ort</label>
<div class="ui left labeled icon input attached-label"> <div class="ui left labeled icon input attached-{% if entity.location.lat|default(0) > 0 %}geo-{% endif %}label">
<input type="text" <input type="text"
id="event_location" id="event_location"
name="location" name="location"
maxlength="255" maxlength="255"
value="{{ entity.location.name|default('') }}" value="{{ entity.location.name|default('') }}"
class="form-control"> class="form-control">
<input type="hidden" name="location_lat"> <input type="hidden" name="location_lat" value="{{ entity.location.lat|default('') }}">
<input type="hidden" name="location_lon"> <input type="hidden" name="location_lon" value="{{ entity.location.lon|default('') }}">
<i class="icon map marker"></i> <i class="icon map marker"></i>
<div class="ui bottom attached label"> <div class="ui bottom attached label">
Du kannst zu diesem Ort auch Geokoordinaten <a href="#" class="add_geo">hinterlegen</a>.<br /> Du kannst zu diesem Ort auch Geokoordinaten <a href="#" class="add_geo">hinterlegen</a>.<br />
<span class="coords"></span> <span class="coords">{% if entity.location.lat|default(0) > 0 %}Folgende Koordinaten sind angegeben: lat:{{ entity.location.lat }}, lon:{{ entity.location.lon }}{% endif %}</span>
</div> </div>
<div class="ui modal geo chooser"> <div class="ui modal geo chooser">
<i class="close icon"></i> <i class="close icon"></i>