Commit c294c7d6 authored by scot.hubbard's avatar scot.hubbard

Added traffic layer (Issue #3093362), Enabled use of custom markers (Issue #3128178).

parent e6f4138a
......@@ -88,7 +88,7 @@ If the map is not being displayed, check the following:
- Did you configured the “marker” options in the content map field?
- Did you upgraded from a previous release? If so check the release notes for
- Did you upgrade from a previous release? If so check the release notes for
upgrade steps.
- Do you have any Javascript errors on the page you have the map?
......@@ -100,10 +100,5 @@ MAINTAINERS
Current maintainers:
- Scot Hubbard (scot.hubbard) - <https://www.drupal.org/u/scothubbard>
- Paulo Gomes (pauloamgomes) - <https://www.drupal.org/u/pauloamgomes>
- Scott Hubbard (scot.hubbard) - <https://www.drupal.org/u/scothubbard>
 
 
......@@ -61,10 +61,37 @@
}
#google_map_map_container {
flex: 1;
flex: 1 75%;
}
#google_map_field_options {
flex: 0 0 9em;
flex: 0 0 25%;
order: 1;
}
#google_map_field_options select,
#google_map_field_options input[type="text"] {
box-sizing: border-box;
width: 100%;
}
#google_map_field_options .form-checkbox::after {
clear: both;
content: " ";
display: table;
}
#google_map_field_options .form-checkbox {
margin-bottom: 5px;
margin-top: 5px;
}
#google_map_field_options .form-checkbox input,
#google_map_field_options .form-checkbox label {
float: left;
}
#google_map_field_options .form-checkbox label {
margin-top: 2px;
padding-left: 5px;
}
......@@ -162,3 +162,29 @@ function google_map_field_update_8002() {
\Drupal::state()->set('google_map_field_8102_processed', $processed_fields);
}
/**
* Adds custom marker field.
*/
function google_map_field_update_8003() {
$columns_to_add = ['marker_icon'];
$processed_fields = google_map_field_add_columns_to_schema($columns_to_add);
\Drupal::state()->set('google_map_field_8103_processed', $processed_fields);
}
/**
* Adds traffic layer field.
*/
function google_map_field_update_8104() {
$columns_to_add = ['traffic'];
$processed_fields = google_map_field_add_columns_to_schema($columns_to_add);
// Set correct state for previous updates.
\Drupal::state()->set('google_map_field_8001_processed', $processed_fields);
\Drupal::state()->set('google_map_field_8002_processed', $processed_fields);
\Drupal::state()->set('google_map_field_8003_processed', $processed_fields);
// Set state for this update.
\Drupal::state()->set('google_map_field_8104_processed', $processed_fields);
}
......@@ -20,6 +20,8 @@ function google_map_field_theme($existing, $type, $theme, $path) {
'width' => NULL,
'height' => NULL,
'show_marker' => NULL,
'marker_icon' => NULL,
'traffic' => NULL,
'show_controls' => NULL,
'infowindow' => NULL,
],
......
......@@ -12,6 +12,8 @@ var google_map_field_map;
var zoom = parseInt($(this).attr('data-zoom'));
var type = $(this).attr('data-type');
var show_marker = $(this).attr('data-marker-show') === "true";
var traffic = $(this).attr('data-traffic') === "true";
var marker_icon = $(this).attr('data-marker-icon');
var show_controls = $(this).attr('data-controls-show') === "true";
var info_window = $(this).attr('data-infowindow') === "true";
......@@ -27,6 +29,11 @@ var google_map_field_map;
var google_map_field_map = new google.maps.Map(this, mapOptions);
if (traffic) {
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(google_map_field_map);
}
google.maps.event.addDomListener(window, 'resize', function () {
var center = google_map_field_map.getCenter();
google.maps.event.trigger(google_map_field_map, "resize");
......@@ -38,6 +45,7 @@ var google_map_field_map;
position: latlng,
optimized: false,
visible: show_marker,
icon: marker_icon,
map: google_map_field_map
});
......
......@@ -13,7 +13,10 @@
var data_lon = $('input[data-lon-delta="' + data_delta + '"]').val();
var data_zoom = $('input[data-zoom-delta="' + data_delta + '"]').attr('value');
var data_type = $('input[data-type-delta="' + data_delta + '"]').attr('value');
var data_marker = $('input[data-marker-delta="' + data_delta + '"]').val() === "1";;
var data_traffic = $('input[data-traffic-delta="' + data_delta + '"]').val() === "1";
var data_marker = $('input[data-marker-delta="' + data_delta + '"]').val() === "1";
var data_marker_icon = $('input[data-marker-icon-delta="' + data_delta + '"]').attr('value');
var show_controls = $('input[data-controls-delta="' + data_delta + '"]').val() === "1";
data_lat = googleMapFieldValidateLat(data_lat);
data_lon = googleMapFieldValidateLon(data_lon);
......@@ -30,15 +33,22 @@
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
disableDefaultUI: true,
disableDefaultUI: show_controls ? false : true,
};
google_map_field_map = new google.maps.Map(this, mapOptions);
// see if we need to add a traffic layer
if (data_traffic) {
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(google_map_field_map);
}
// drop a marker at the specified lat/lng coords
marker = new google.maps.Marker({
position: latlng,
optimized: false,
visible: data_marker,
icon: data_marker_icon,
map: google_map_field_map
});
......
......@@ -13,7 +13,9 @@
var type = $('#edit-type').val();
var width = $('#edit-width').val();
var height = $('#edit-height').val();
var traffic = $('#edit-traffic').prop('checked') ? "1" : "0";
var show_marker = $('#edit-marker').prop('checked') ? "1" : "0";
var marker_icon = $('#edit-marker-icon').val();
var show_controls = $('#edit-controls').prop('checked') ? "1" : "0";
var infowindow_text = $('#edit-infowindow').val();
......@@ -23,7 +25,9 @@
$('input[data-type-delta="' + delta + '"]').prop('value', type).attr('value', type);
$('input[data-width-delta="' + delta + '"]').prop('value', width).attr('value', width);
$('input[data-height-delta="' + delta + '"]').prop('value', height).attr('value', height);
$('input[data-traffic-delta="' + delta + '"]').prop('value', traffic).attr('value', traffic);
$('input[data-marker-delta="' + delta + '"]').prop('value', show_marker).attr('value', show_marker);
$('input[data-marker-icon-delta="' + delta + '"]').prop('value', marker_icon).attr('value', marker_icon);
$('input[data-controls-delta="' + delta + '"]').prop('value', show_controls).attr('value', show_controls);
$('input[data-infowindow-delta="' + delta + '"]').prop('value', infowindow_text).attr('value', infowindow_text);
......@@ -50,7 +54,7 @@
dialogHTML += ' </div>';
dialogHTML += ' <div id="infowindow_container">';
dialogHTML += ' <label for="edit-infowindow">' + Drupal.t('InfoWindow Popup text: (optional)') + '</label>';
dialogHTML += ' <textarea class="form-textarea" id="edit-infowindow" name="infowindow" rows="5" cols="70"></textarea>';
dialogHTML += ' <textarea class="form-textarea" id="edit-infowindow" name="infowindow" rows="3" cols="70"></textarea>';
dialogHTML += ' </div>';
dialogHTML += ' </div>';
dialogHTML += ' <div id="google_map_field_options">';
......@@ -62,10 +66,20 @@
dialogHTML += ' <input type="text" id="edit-width" size="5" maxlength="6" name="field-width" value="" />';
dialogHTML += ' <label for="edit-height">' + Drupal.t('Map Height') + '</label>';
dialogHTML += ' <input type="text" id="edit-height" size="5" maxlength="6" name="field-height" value="" />';
dialogHTML += ' <label for="edit-controls">' + Drupal.t('Enable controls') + '</label>';
dialogHTML += ' <input type="checkbox" class="form-checkbox" id="edit-controls" name="field_controls" />';
dialogHTML += ' <label for="edit-marker">' + Drupal.t('Enable marker') + '</label>';
dialogHTML += ' <input type="checkbox" class="form-checkbox" id="edit-marker" name="field_marker" />';
dialogHTML += ' <div class="form-checkbox">';
dialogHTML += ' <input type="checkbox" class="form-checkbox" id="edit-controls" name="field_controls" />';
dialogHTML += ' <label for="edit-controls">' + Drupal.t('Enable controls') + '</label>';
dialogHTML += ' </div>';
dialogHTML += ' <div class="form-checkbox">';
dialogHTML += ' <input type="checkbox" class="form-checkbox" id="edit-traffic" name="field_traffic" />';
dialogHTML += ' <label for="edit-traffic">' + Drupal.t('Traffic layer') + '</label>';
dialogHTML += ' </div>';
dialogHTML += ' <div class="form-checkbox">';
dialogHTML += ' <input type="checkbox" class="form-checkbox" id="edit-marker" name="field_marker" />';
dialogHTML += ' <label for="edit-marker">' + Drupal.t('Enable marker') + '</label>';
dialogHTML += ' </div>';
dialogHTML += ' <label for="edit-marker-icon">' + Drupal.t('Custom marker') + '</label>';
dialogHTML += ' <input type="text" size="10" id="edit-marker-icon" name="field_marker_icon" />';
dialogHTML += ' </div>';
dialogHTML += ' </div>';
dialogHTML += '</div>';
......@@ -90,6 +104,8 @@
dialog.dialog('open');
var trafficLayer = new google.maps.TrafficLayer();
// Handle map options inside dialog.
$('#edit-zoom').change(function () {
google_map_field_map.setZoom(googleMapFieldValidateZoom($(this).val()));
......@@ -100,9 +116,20 @@
$('#edit-controls').change(function () {
google_map_field_map.setOptions({disableDefaultUI : !$(this).prop('checked')});
})
$('#edit-traffic').change(function () {
if ($(this).prop('checked')) {
trafficLayer.setMap(google_map_field_map);
}
else {
trafficLayer.setMap(null);
}
})
$('#edit-marker').change(function () {
marker.setVisible($(this).prop('checked'));
})
$('#edit-marker-icon').change(function () {
marker.setIcon($(this).val());
})
// Create the map setter map.
// get the lat/lon from form elements
......@@ -112,7 +139,9 @@
var type = $('input[data-type-delta="' + delta + '"]').attr('value');
var width = $('input[data-width-delta="' + delta + '"]').attr('value');
var height = $('input[data-height-delta="' + delta + '"]').attr('value');
var traffic = $('input[data-traffic-delta="' + delta + '"]').val() === "1";
var show_marker = $('input[data-marker-delta="' + delta + '"]').val() === "1";
var marker_icon = $('input[data-marker-icon-delta="' + delta + '"]').attr('value');
var show_controls = $('input[data-controls-delta="' + delta + '"]').val() === "1";
var infowindow_text = $('input[data-infowindow-delta="' + delta + '"]').attr('value');
......@@ -124,12 +153,12 @@
$('#edit-type').val(type);
$('#edit-width').prop('value', width).attr('value', width);
$('#edit-height').prop('value', height).attr('value', height);
$('#edit-traffic').prop('checked', traffic);
$('#edit-marker').prop('checked', show_marker);
$('#edit-marker-icon').val(marker_icon);
$('#edit-controls').prop('checked', show_controls);
$('#edit-infowindow').val(infowindow_text);
// $('#edit-controls').prop('checked', controls);
var latlng = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: parseInt(zoom),
......@@ -140,6 +169,10 @@
};
google_map_field_map = new google.maps.Map(document.getElementById("gmf_container"), mapOptions);
if (traffic) {
trafficLayer.setMap(google_map_field_map);
}
// Add map listener
google.maps.event.addListener(google_map_field_map, 'zoom_changed', function () {
$('#edit-zoom').val(google_map_field_map.getZoom());
......@@ -151,6 +184,7 @@
optimized: false,
draggable: true,
visible: show_marker,
icon: marker_icon,
map: google_map_field_map
});
......@@ -164,6 +198,7 @@
optimized: false,
draggable: true,
visible: $('#edit-marker').prop('checked'),
icon: marker_icon,
map: google_map_field_map
});
});
......@@ -181,6 +216,7 @@
position: latlng,
draggable: true,
visible: $('#edit-marker').prop('checked'),
icon: marker_icon,
map: google_map_field_map
});
google.maps.event.addListener(marker, 'dragend', function (event) {
......
......@@ -13,6 +13,9 @@
$('input[data-lat-delta="' + data_delta + '"]').prop('value', '').attr('value', '');
$('input[data-lon-delta="' + data_delta + '"]').prop('value', '').attr('value', '');
$('input[data-zoom-delta="' + data_delta + '"]').prop('value', '').attr('value', 9);
$('input[data-traffic-delta="' + data_delta + '"]').prop('value', '').attr('value', 0);
$('input[data-marker-delta="' + data_delta + '"]').prop('value', '').attr('value', 1);
$('input[data-marker-icon-delta="' + data_delta + '"]').prop('value', '').attr('value', '');
$('input[data-type-delta="' + data_delta + '"]').prop('value', '').attr('value', 'roadmap');
googleMapFieldPreviews(data_delta);
});
......
......@@ -132,6 +132,7 @@ class GmapFieldSettingsForm extends ConfigFormBase {
$config->set('google_map_field_auth_method', $form_state->getValue('google_map_field_auth_method'))
->set('google_map_field_apikey', $form_state->getValue('google_map_field_apikey'))
->set('google_map_field_map_client_id', $form_state->getValue('google_map_field_map_client_id'))
->set('google_map_field_icon', $form_state->getValue('google_map_field_icon'))
->save();
parent::submitForm($form, $form_state);
}
......
......@@ -32,6 +32,8 @@ class GoogleMapFieldDefaultFormatter extends FormatterBase {
'#zoom' => $item->zoom,
'#type' => $item->type,
'#show_marker' => $item->marker === "1" ? "true" : "false",
'#marker_icon' => $item->marker_icon,
'#traffic' => $item->traffic === "1" ? "true" : "false",
'#show_controls' => $item->controls === "1" ? "true" : "false",
'#width' => $item->width ? $item->width : '320px',
'#height' => $item->height ? $item->height : '200px',
......
......@@ -68,6 +68,16 @@ class GoogleMapFieldType extends FieldItemBase {
'length' => 10,
'not null' => FALSE,
],
'traffic' => [
'type' => 'int',
'length' => 10,
'not null' => FALSE,
],
'marker_icon' => [
'type' => 'varchar',
'length' => 512,
'not null' => FALSE,
],
'controls' => [
'type' => 'int',
'length' => 10,
......@@ -118,6 +128,12 @@ class GoogleMapFieldType extends FieldItemBase {
$properties['marker'] = DataDefinition::create('integer')
->setLabel(new TranslatableMarkup('Show marker'));
$properties['traffic'] = DataDefinition::create('integer')
->setLabel(new TranslatableMarkup('Traffic Layer'));
$properties['marker_icon'] = DataDefinition::create('string')
->setLabel(new TranslatableMarkup('Custom marker'));
$properties['controls'] = DataDefinition::create('integer')
->setLabel(new TranslatableMarkup('Show controls'));
......
......@@ -124,6 +124,22 @@ class GoogleMapFieldDefaultWidget extends WidgetBase {
],
];
$element['traffic'] = [
'#type' => 'hidden',
'#default_value' => isset($items[$delta]->traffic) ? $items[$delta]->traffic : "",
'#attributes' => [
'data-traffic-delta' => $instance_delta,
],
];
$element['marker_icon'] = [
'#type' => 'hidden',
'#default_value' => isset($items[$delta]->marker_icon) ? $items[$delta]->marker_icon : "",
'#attributes' => [
'data-marker-icon-delta' => $instance_delta,
],
];
$element['controls'] = [
'#type' => 'hidden',
'#default_value' => isset($items[$delta]->controls) ? $items[$delta]->controls : "1",
......
......@@ -8,5 +8,5 @@
{% if showInfowindow %}
<div class="map-infowindow" style="display:none;">{{ infowindow }}</div>
{% endif %}
<div class="map-container" style="width:{{ width }};height:{{ height }};" data-controls-show="{{ show_controls }}" data-marker-show="{{ show_marker }}" data-type="{{ type }}" data-lat="{{ lat }}" data-lon="{{ lon }}" data-zoom="{{ zoom }}" data-infowindow="{{ showInfowindow }}"></div>
<div class="map-container" style="width:{{ width }};height:{{ height }};" data-controls-show="{{ show_controls }}" data-traffic="{{ traffic }}" data-marker-show="{{ show_marker }}" data-marker-icon="{{ marker_icon }}" data-type="{{ type }}" data-lat="{{ lat }}" data-lon="{{ lon }}" data-zoom="{{ zoom }}" data-infowindow="{{ showInfowindow }}"></div>
</section>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment