rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

Add OpenStreet implementation to resq form. #270

Browse source
This commit is contained in:
Korina Cordero 2019-12-16 08:56:00 +00:00
parent 185ac8aa0d
commit 494ae85467
2 changed files with 114 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/job-order/cmb.form.html.twig
View file

@ -996,13 +996,17 @@ $(function() {
callback: function(results, status) {
markerLayerGroup.clearLayers();
if (status == 'OK') {
// google code
// selectPoint(map, results[0].geometry.location);
// OSM code
console.log(results);
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
selectPoint(lat, lng);
}
},
// TODO: change this to get what's in the translation file
// but for some strange reason, this worked.
region: 'ph'
});
}
@ -1022,8 +1026,10 @@ $(function() {
{% if ftags.set_map_coordinate %}
// check if we need to set map
// google code
//var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
//selectPoint(map, latlng);
// OSM code
var lat = {{ obj.getCoordinates.getLatitude }};
var lng = {{ obj.getCoordinates.getLongitude }};
selectPoint(lat, lng);
@ -1034,6 +1040,7 @@ $(function() {
{% if mode in ['update-processing', 'update-reassign-hub'] %}
// display hub map
// OSM code
var hub_lat = {{ obj.getCoordinates.getLatitude }};
var hub_lng = {{ obj.getCoordinates.getLongitude }};
@ -1064,6 +1071,7 @@ $(function() {
hubLayerGroup.addLayer(hub_marker);
{% endfor %}
// google code
/*
var hmap = new GMaps({
div: '#hub_map',

111
templates/job-order/form.html.twig
View file

@ -893,15 +893,67 @@
{% endblock %}
{% block scripts %}
{{ include('map/' ~ map_js_file) }}
<!-- <script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script> -->
<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}&libraries=places" type="text/javascript"></script>
<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
<script>
// location search autocomplete
var input = document.getElementById('m_gmap_address');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setComponentRestrictions({'country': ['{% trans %}default_region{% endtrans %}']});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var message = {
'action': 'map.search',
'params': {
'lat': place.geometry.location.lat(),
'lng': place.geometry.location.lng()
}
};
console.log(message);
});
$(function() {
var form_in_process = false;
// openstreet maps stuff
// TODO: move this to a service
var default_lat = {% trans %}default_lat{% endtrans %};
var default_lng = {% trans %}default_long{% endtrans %};
var map = mapCreate('m_gmap', default_lat, default_lng, 'road', 13);
var markerLayerGroup = L.layerGroup().addTo(map);
function selectPoint(lat, lng)
{
// clear markers
markerLayerGroup.clearLayers();
var marker = L.marker([lat, lng]);
// add marker to layer group
markerLayerGroup.addLayer(marker);
map.setView(new L.LatLng(lat, lng), 13);
}
map.on('click', function(e) {
selectPoint(e.latlng.lat, e.latlng.lng);
});
// BEGIN google maps stuff
/*
function selectPoint(map, latlng) {
var lat = latlng.lat();
var lng = latlng.lng();
@ -930,6 +982,8 @@ $(function() {
e.stop();
}
});
*/
var handleAction = function() {
var text = $.trim($('#m_gmap_address').val());
GMaps.geocode({
@ -937,9 +991,17 @@ $(function() {
callback: function(results, status) {
map.removeMarkers();
if (status == 'OK') {
selectPoint(map, results[0].geometry.location);
// google code
// selectPoint(map, results[0].geometry.location);
// OSM code
console.log(results);
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
selectPoint(lat, lng);
}
},
// TODO: change this to get what's in the translation file
// but for some strange reason, this worked.
region: 'ph'
});
}
@ -958,9 +1020,14 @@ $(function() {
});
{% if ftags.set_map_coordinate %}
// check if we need to set map
var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
selectPoint(map, latlng);
// check if we need to set map
// google code
//var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
//selectPoint(map, latlng);
// OSM code
var lat = {{ obj.getCoordinates.getLatitude }};
var lng = {{ obj.getCoordinates.getLongitude }};
selectPoint(lat, lng);
// remove placeholder text
$("[data-vehicle-field='1']").prop('placeholder', '');
@ -968,6 +1035,39 @@ $(function() {
{% if mode in ['update-processing', 'update-reassign-hub'] %}
// display hub map
// OSM code
var hub_lat = {{ obj.getCoordinates.getLatitude }};
var hub_lng = {{ obj.getCoordinates.getLongitude }};
var hmap = mapCreate('hub_map', hub_lat, hub_lng, 'road', 13);
var destLayerGroup = L.layerGroup().addTo(hmap);
var hubLayerGroup = L.layerGroup().addTo(hmap);
var dest_icon = L.icon({
iconUrl: '/assets/images/icon-destination.png',
shadowSize: [0,0]
});
var hub_icon = L.icon({
iconUrl: '/assets/images/icon-outlet.png',
shadowSize: [0,0]
});
var dest_marker = new L.Marker([hub_lat, hub_lng], {icon: dest_icon}).bindPopup("Destination");
destLayerGroup.addLayer(dest_marker);
{% for hub in hubs %}
var hub_marker = new L.Marker([{{ hub.hub.getCoordinates.getLatitude }},
{{ hub.hub.getCoordinates.getLongitude }}], {icon: hub_icon}).bindPopup("{{ hub.hub.getName }}");
hubLayerGroup.addLayer(hub_marker);
{% endfor %}
// google code
/*
var hmap = new GMaps({
div: '#hub_map',
lat: {{ obj.getCoordinates.getLatitude }},
@ -991,6 +1091,7 @@ $(function() {
icon: '/assets/images/icon-outlet.png'
});
{% endfor %}
*/
{% endif %}