Tag: Drupal Responsive Web Design

Features & Use Of Display Modes In Drupal 8

Display modes are one of the core functionalities of Drupal 8. They are easy to create and provides great flexibility in terms of theming at entity viewing and editing level. Display modes are available for content, comment, contact messages, custom blocks, taxonomy terms, users. They are also available to views adding more power to views.

Display modes are located at Admin -> Structure -> Display modes -> View mode.

Two types of display modes are available: “view modes” and “form modes.”  Both these are an example of configuration entities.

View modes allow site builder to request a field to be rendered in a certain way. For example, we can have an article that has doctors field has entity reference. An article full mode display, we can request few details of doctor to be displayed. We can create a new display mode (“Doctor details”) to do so. On Doctor’s full view, we can include a brief summary of articles associated with them.  (In detail: https://goo.gl/9J2oms)

To create View mode 

Navigate to Admin -> Structure -> Display modes -> View mode

  1. Click on “Add view mode” to add new view mode

  2. Created view mode is available on content types. Navigate to manage display of the content type and enable view mode.

    Manage display console test.png

Once enabled, this mode can be used on referenced field.

Once view modes are enabled, we can theme it as per requirements. To get template suggestions, you need to turn on debug property from services.yml.

You can find theme suggestion in inspect element.

Display modes can also be used based on conditions and we can switch mode based on conditions.

function hook_entity_view_mode_alter(&$view_mode, Drupal\Core\Entity\EntityInterface $entity, $context) {
  // For nodes, change the view mode when it is teaser.
  if ($entity->getEntityTypeId() == 'node' && $view_mode == 'teaser') {
    $view_mode = 'my_custom_view_mode';
  }
}
Hope this helped you to understand Display Modes in Drupal 8, Feel free to drop us a line for any Drupal 8 related work/queries/tasks, or Need any assistance regarding Drupal 8 Web design & Development.
Always ready to help 🙂

Guide To Customize Google Map Style And Custom Zoom Bar

custom-zoom

Google map theming and configuration with custom zoom controls, please follow the below details:

Styling google map allows us to change standard google map style and customize maps visual display like road, water, park and etc.

To make changes in standard google map style, we can use json array as per below:

var styledMapType = new google.maps.StyledMapType([
  { elementType: 'geometry', stylers: [{color: '#EBE5E2'}]},
  { elementType: 'labels.text.fill', stylers: [{color: '#520000'}]},
  { elementType: 'labels.text.stroke', stylers: [{color: '#F5E8DA'}]},
  {
    featureType: 'administrative',
    elementType: 'geometry.stroke',
    stylers: [{color: '#C9A193'}]
  },
  {
    featureType: 'administrative.land_parcel',
    elementType: 'geometry.stroke',
    stylers: [{color: '#DCD6B2'}]
  },
  {
    featureType: 'administrative.land_parcel',
    elementType: 'labels.text.fill',
    stylers: [{color: '#AEA5A0'}]
  },
  {
    featureType: 'landscape.natural',
    elementType: 'geometry',
    stylers: [{color: '#DFDFBB'}]
  },
  {
    featureType: 'poi',
    elementType: 'geometry',
    stylers: [{color: '#DFC47F'}]
  },
  {
    featureType: 'poi',
    elementType: 'labels.text.fill',
    stylers: [{color: '#93746E'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'geometry.fill',
    stylers: [{color: '#9DB04A'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'labels.text.fill',
    stylers: [{color: '#197515'}]
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{color: '#F5E4BF'}]
  },
  {
    featureType: 'road.arterial',
    elementType: 'geometry',
    stylers: [{color: '#FDFBF3'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [{color: '#F8C452'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry.stroke',
    stylers: [{color: '#E9BF79'}]
  },
  {
    featureType: 'road.highway.controlled_access',
    elementType: 'geometry',
    stylers: [{color: '#E97741'}]
  },
  {
    featureType: 'road.highway.controlled_access',
    elementType: 'geometry.stroke',
    stylers: [{color: '#DBA37F'}]
  },
  {
    featureType: 'road.local',
    elementType: 'labels.text.fill',
    stylers: [{color: '#80544F'}]
  },
  {
    featureType: 'transit.line',
    elementType: 'geometry',
    stylers: [{color: '#DFCD95'}]
  },
  {
    featureType: 'transit.line',
    elementType: 'labels.text.fill',
    stylers: [{color: '#8F726D'}]
  },
  {
    featureType: 'transit.line',
    elementType: 'labels.text.stroke',
    stylers: [{color: '#EBD9B0'}]
  },
  {
    featureType: 'transit.station',
    elementType: 'geometry',
    stylers: [{color: '#DFD2A9'}]
  },
  {
    featureType: 'water',
    elementType: 'geometry.fill',
    stylers: [{color: '#BAD3C2'}]
  },
  {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{color: '#8E9985'}]
  }
]);

Below is the example of google style:

Before style applied

After style applying:

Google map provides ease level of customization.

We can make changes as per our need easily. I have provided an example to configure zoom, scroll, street view and etc options to change default google map.

// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('gmap'), {
  center: {lat: 23.028349, lng: 72.559097},
  zoom: 11,
  mapTypeControlOptions: {
    mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map'],
  },
  scrollwheel: true,
  mapTypeControl: true,
  mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.LEFT_TOP
  },
  zoomControl: false,
  // zoomControlOptions: {
  //     style: google.maps.ZoomControlStyle.LARGE,
  //     position: google.maps.ControlPosition.LEFT_TOP
  // },
  scaleControl: true,
  streetViewControl: true,
  streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
  },
  fullscreenControl: false
});

To Add Custom zoom bar:

To add custom zoom bar on the map we can add custom element and use this element we can handle zoom controls.

I have added example code to add custom zoom controls.

// To customize google zoom bar to slider and search controlls
var centerControlDiv = document.createElement('div');
centerControlDiv.setAttribute("class", "gm-custom-controlls");
centerControlDiv.index = 1;

// Add custom zoom controlls
var centerControl = new ZoomControl(centerControlDiv, map, map.minZoom, map.maxZoom, map.zoom);

// map custom controlls to map
map.controls[google.maps.ControlPosition.BOTTOM].push(centerControlDiv);
// Zoom controlls
function ZoomControl(controlDiv, map, min, max, currentZoom) {

  var parentDiv = document.createElement('div');
  parentDiv.setAttribute("class", "gm-zoom-slider");

  var controlUI = document.createElement('input');
  controlUI.type = 'range';
  controlUI.value = currentZoom;
  controlUI.min = min;
  controlUI.max = max;
  controlUI.style.width = "400px";

  // Add zoom controlls
  var incControlls = document.createElement('div');
  incControlls.id = 'gm-zoom-inc';
  incControlls.innerHTML = '+';

  var decControlls = document.createElement('div');
  decControlls.id = 'gm-zoom-dec';
  decControlls.innerHTML = '-';

  parentDiv.appendChild(decControlls);
  parentDiv.appendChild(controlUI);
  parentDiv.appendChild(incControlls);

  controlDiv.appendChild(parentDiv);

  // Click event listner for side-bar
  controlUI.addEventListener('click', function() {
    map.setZoom(parseFloat(controlUI.value));
  });

  // Click event listner for inc button
  incControlls.addEventListener('click', function() {
    map.setZoom(parseFloat(controlUI.value) + 1 );
  });

  // Click event listner for dec button
  decControlls.addEventListener('click', function() {
    map.setZoom(parseFloat(controlUI.value) - 1 );
  });

  // Set slider value on zoom change 
  google.maps.event.addListener(map, 'zoom_changed', function(){
    controlUI.value = map.getZoom();
  });
}

Zoom bar will be displayed as per below screenshot:



Read more regarding Drupal Development Service