Dec 9, 2016
Old and new conflicts have made the shores of the Mediterranean one of the most insecure places on the planet. The refugee crisis, which has plagued Southern Europe for decades, has been aggravated by instability and chaos in Libya and Syria. Branches of Islamist terrorism in North Africa and the threat of the Islamic State represent a danger to peace in the region, especially the Middle East, where many conflicts of the last century are still open.
My colleague Giulio M. Piantadosi had the chance to visit three of the places where Spanish forces are present. The Naval Air Station Sigonella in Sicily, UNIFIL Deployment at the blue line in Lebanon and the Incirlik Air Base in Turkey.
It was a great opportunity to work hard on the maps, to improve and use new techniques and tools that make that maps a little bit better than others I made before. So I made a basemap in QGIS using OSM shapefiles as landuse or roads playing with soft colors and rule-based styles. In two of the three maps I used the The Earth's Relief DEM layer, make by ClusterGIS. Then I drew all the labels, arrows, polygons and other vectorial elements in Illustrator.
Finally I used the ai2html plugin for Illustrator to publish on the web. I created five designs for each map, fifteen Artboards in total. ai2html uses CSS's display block/in-line to show correct artboards depending on screen size. If we don't use a script or a lazy load the reader will have to download the images for all the screen sizes. To fix that I created an easy script which downloads only one image for each resolution.
QGIS Illustrator ai2html HTML css