This article's focus is on the common need for both developers and clients for responsive images on their websites, not just for image fields but equally necessary for responsive inline images within text.
As any web developer can attest, formatting user uploaded images is a regular task with almost every project. Some of the most common challenges are formatting an image, whether it be tall or wide, to become a square or squarish image. The trouble is, when it comes to photographs of people, how can you setup an automated way to format these pics to a standard size without cutting people's heads off?! The trick is find a common focus and crop that works for both types of images.
There are many tutorials out there for creating maps in Drupal but most of them focus on just one layer on a map. This tutorial is for creating one map with multiple, switchable layers complete with pop-ups and a title. In the future I plan on writing more tutorials on more advanced mapping topics, such as polygons, using kml files, and other items. For now though, below are the main steps and concepts to understand with OpenLayers: