Atlas of European & Mid-East Conflict - 1000 A.D. to 1700 A.D.

This Atlas Of European & Mid-East Conflicts is an interactive map and database of major Conflicts occurring in Europe, the Middle East and western Asia, between the years 1000 A.D. and 1700 A.D. The map and country overlay boundaries are set to the following geographic boundaries:

• West Longitude: 16.7 W
• East Longitude: 66.5 E
• North Latitude: 62.3 N
• South Latitude: 28.7 N

This geographic quadrangle is represented by the underlying base map as shown below. Map tiles are generated using a simple Stamen water-color style through a MapBox server (refer to the Technical Details section at the end of this Help file). The underlying map looks as follows:

A Conflict is comprised of one or more associated Wars. Each War consists of series of Events, ranging over a period of time, leading to a change in political boundaries, leadership, etc.  Each Event is an individual battle, siege, or skirmish that played into the Conflict and had an impact on the outcome of the Conflict. Each Event is represented on the map by its location, with various levels of summary information provided for further reference.

In addition to an underlying base map, the Atlas contains 388 individual colored overlay maps that depict the evolution of geo-political borders throughout the 700-year time span of the Atlas (refer to the Technical Details section for how the overlay maps are created, rendered and displayed). When a Conflict or an Event is displayed, the appropriate overlay map is updated to reflect the geographical year of occurrence of the Event, or the beginning year of the selected Conflict. The Year display at the bottom of the map reflects this Conflict/Event year. You can advance the Year one at a time through the left/right arrows of the Date Control at the bottom left corner of the map area.

Standard map controls allow you to zoom through four levels from an initial scale of 1 inch = approximately 200 miles or 500 km (minimum zoom) to a maximum of approximately 1 inch = 20 miles or 50 km (maximum zoom). The map can be panned at higher zoom levels but attempting to pan outside of the geographical area represented in the initial display causes the map to re-center to within the limits listed above.

Making Selections

The Menu screen allows you to choose Events in any of three ways: by date range, by Conflict, or by key word or phrase. When Event parameters are entered, the Go button turns green. Click to retrieve all Events associated with the Dates, Conflict, or key words.

To Select Events By Year Range

Click the grey By Date Range bar on the menu screen.   The bar turns blue and the Start Year and End Year fields are activated. Enter a Start Year and optional End Year, then click the Go button. All Events between the two years inclusive are displayed.  If no End Year is entered, the default is the Start Year, and a single year's Events will be displayed.

Menu Screen - Select Events by Date Range

You can enter dates manually by placing the cursor in the appropriate box. Alternatively, click the green Calendar icon to bring up the Year Selector. Navigate to the desired year, and click to select. The year is entered into the Start Year or End Year field.

Selecting Events Using the Date Selector

To Select Events By Conflict

Click the grey By Conflict bar on the menu screen.   The bar turns blue and the list of Conflicts is displayed. Select a Conflict from the drop-down selection list.   

Menu Screen - Select Events by Conflict

To Search For Events Containing A Word Or Phrase

Click the grey By Words or Phrases bar on the menu screen.   The bar turns blue and the and the Search field is activated. Enter one or more key words or a phrase (for example, the name of a city or location), then click the Go button.  All events with the specified word or phrase in the Event Title or the Event Description are displayed. NOTE: to search for a phrase, enclose it in double quotes - for example, "First Crusade". Otherwise, all Events containing any of the search words are displayed.

Menu Screen - Select Events by Words or Phrases

Selection Results

Conflict Summary

A summary of the currently selected Conflict is displayed in the top left panel of the display in a scrollable window.

Event List

All Events matching the selected criteria are returned in an Event List in the bottom left panel of the display. Event details include the Event Title, associated Conflict, date(s) when the Event occurred, and the geographic location of the Event.  Click the blue header ribbon containing the Event Title.  The Event background color changes to a light blue, and the associated icon marker on the map changes color from red to blue.  An Event Summary displays in a popup window on the map (see Event Display, below).

Event Display

All Events are positioned on the map using markers.  A shield marker  indicates the position of a land battle, and a ship marker  indicates the position of a sea battle.

Click on a marker, and the following actions occur: the associated Event in the Event List is highlighted.  A small window opens at the marker location with a summary of the Event. Click the small window to close it and display the marker in blue. (Note that this is the same result you get by clicking the Event Title in the Event List, as described above).

Locations Display

The locations of all Events (battles, sieges, etc.), are ALWAYS displayed on the map, regardless of any selection choices. Each location is marked with a black marker whose size indicates the relative importance of the location on a scale of 1 (least) to 4 (most) significant. Land locations have names of the site where the battle occurred, Sea locations are marked with an X.  Clicking on a location marker displays a popup listing ALL Events that have occurred at that location. Each listed Event is a link that directs you to the relevant Wikipedia page when selected.

      

Map Overlay Control

The Map Overlay Intensity control    in the upper right corner of the map allows you to emphasize or de-emphasize the intensity of the overlay maps; a zero setting displays the base map only whereas a setting of 100% puts full focus on the historical countries and boundaries.

Conflict and Event Reference Materials

The icon indicates the availability of an appropriate Wikipedia page for further reference on any Conflict or Event. Click the icon to display the Wikipedia content in separate window, as in the following example.

Technical Details

This section provides some detail on the implementation of the Atlas.

• The user interface is built using HTML5 and Javascript.
• The Conflict database is hosted on a MySQL server and accessed through standard mySqli commands.
• The interface to the data is though PHP5 using AJAX where appropriate (e.g., to retrieve Conflict and Event description details).

I am greatly indebted to the following technologies, all of which are free for use via standard GNU licensing or similar access rights:

• The base map tiles are provided through a MapBox server and are rendered in the EPSG3857 Coordinate Reference System (CRS).
• The overlay maps depicting historical geo-political country names and boundaries are courtesy of the Geacron Project, which provides interactive access to its world historical atlas.  For each overlay map, I perform a screen capture of the relevant map area, save the capture as an image file, then render each map in Scaleable Vector Graphics (SVG) format using the free services of the VectorizerIO site to preserve map detail on zoom. Note: actual geo-political boundaries are not always accurately known and often somewhat fluid, especially prior to the development of mapping technology in the 16th Century; therefore the overlay maps purposely lack a level of detail found on modern maps. The intent of the overlay maps is to provide a coarse detail rendering for conceptual understanding.
• I use Leaflet (version 1.3) Javascript library for basic map presentation and manipulation. There are essentially four leaflet layers: a base (tile) layer, an overlay map layer, a label layer (for location text), and a marker layer (for the event markers).
• I use the L.SVGOverlay Leaflet plug-in (Copyright 2015, Teralytics AG) to render the overlay maps correctly on top of the base tile layer. I use the d3 (Data Driven Documents) Javascript library to perform translation and scaling of the overlays for initial display and for pan/zoom.

Representative Source Code

Battlefield Locations and Labels

Locations are named after Events, which are generally the names of where the event occurred. Location data (name, geo-coordinates, importance, etc.) is maintained in a mySQL file on the local server. Locations are created when the Leaflet map is initialized at startup. Locations are rendered on four separate custom Leaflet panes, based on the relative importance of the event on a scale of 4 (most important) to 1 (least important). The four panes are sandwiched logically between the base tile layer and the SVG overlay layer. Each location on a pane is rendered as a Leaflet circleMarker instance and an associated (bound) Label instance. Each circleMarker/Label has an associated click event that displays the contents of the location popup window. The level 4 locations are displayed on zoom levels 5 through 8, level 3 locations are displayed on zoom levels 6 through 8, level 2 locations are displayed on zoom levels 7 and 8, and level 1 locations are only displayed on zoom level 8. Further zooming is inhibited, primarily since uncertainties in historical battle locations are such that more detailed zooming would imply false accuracy.

/* There are four custom map panes used to display the event locations and location names, based on the value of the 'extent' field associated with the location. The extent value ranges from 1 (least significant) to 4 (most significant); its value determines the size of the location circle and the style properties of the location name. These custom map panes are maintained in the following array. */ var panes = []; var locationsCount = 0; /* Creates the locations as instances of L.circleMarker with the location name as an associated L.label. */ function setLocations() { var locations, locationList; var loc_id, loc_name, loc_lat, loc_lng, loc_ext, loc_dir; var ct, i; var pane, paneNumber; for (i=0; i<4; i++) { panes[i] = map.createPane("loc" + (i+1).toString()); } map.getPane('loc4').style.zIndex = -1; map.getPane('loc3').style.zIndex = -1; map.getPane('loc2').style.zIndex = -1; map.getPane('loc1').style.zIndex = -1; getAllLocations(); var interval = setInterval(function() { var locations = document.getElementById("locations").innerHTML; if (locations !== undefined && locations.length > 0) { clearInterval(interval); // Retrieve all location data from the mySQL LOCATION table. // The server-side data retrieval returns a JSON string of comma // separated values. if (locations !== null) { locationList = locations.split(","); } // Construct each location from the JSON stream, and place it on the map pane // specified by the loc_ext (extent) parameter. ct = 0; while (ct<locationList.length) { loc_id = locationList[ct]; loc_name = locationList[ct+1]; loc_lat = locationList[ct+2]; loc_lng = locationList[ct+3]; loc_ext = locationList[ct+4]; loc_dir = locationList[ct+5]; // Create the location marker (L.circleMarker) and associated location name // (HTML div element with dsesignated properties). placeLocation(loc_id, loc_name, loc_lat, loc_lng, loc_ext, loc_dir); ct += 6; locationsCount++; } // Remove the query fetch string and JSON data stream; they're not needed any more. locationList.length = 0; locations = ""; document.getElementById("locations").innerHTML = ""; } }, 500); } /* Creates a location L.CircleMarker with properties determined by the importance (extent) parameter, and bind a location name as a label to identify the location. Add onClick event handlers to display location details. */ function placeLocation(id, name, lat, lng, ext, dir) { var locName = name.substr(0,4) === "Off " ? "X" : name; var locLatLng = L.latLng(lat, lng); var locColor = name.substr(0,4) === "Off " ? "#00FF00" : "#000000"; var locOpacity = 1.0; var iext = Number(ext); var idir = Number(dir); var locPane = 'loc' + ext; var label; // Location name var popupPos = L.point([0, 0]); var popupOptions; var circleOptions = { pane: locPane, fill: true, color: "#000000", opacity: locOpacity, weight: 1, fillColor: locColor, fillOpacity: locOpacity, clickable: true }; var locCircle = L.circleMarker(locLatLng, circleOptions); locCircle.setRadius(iext); locCircle.addTo(map); popupOptions = { className: 'location-popup', offset: popupPos, border: "1px solid", autoPan: true, closeButton: true }; // Make the circle selectable, with onclick providing a list of events // associated with the location, based on the location id. locCircle.on('click', function() { locCircle.bindPopup(createLocationPopup(id), popupOptions); locCircle.openPopup(); }); // Associate the location name with its circle marker. label = bindLabel(id, locName, locLatLng, iext, idir); // Make the label selectable, with onclick providing a list of events // associated with the location, based on the location id. L.DomEvent.on(label, 'click', function() { var pop = L.popup(popupOptions); createLabelPopup(id, pop, locLatLng); }); // Make the label turn color on mouseover, and revert on mouseout. label.addEventListener('mouseover', function() { label.style.color = "#f00"; }); label.addEventListener('mouseout', function() { label.style.color = "#000"; }); // Update the label position after zoom to reflect the transform that // the map pane undergoes. map.on('zoomend', (function() { setLabelPosition(label, locLatLng, iext, idir); })); } /* Creates a div element in the appropriate map pane that contains the location name, and places it next to the location circle marker, adjusted according to the 'idir' parameter. Sets the class names for the div to make it clickable for event handling, and to display the appropriate font style and size. */ function bindLabel(id, content, latLng, iext, idir) { var locPane = map.getPane(panes[iext-1]); var labelDiv = L.DomUtil.create('div'); var zoom = map.getZoom(); var ident = "Label" + id.toString(); labelDiv.className = setLabelClasses(iext, zoom); labelDiv.setAttribute("id", ident); labelDiv.text = content; labelDiv.innerHTML = content; locPane.appendChild(labelDiv); setLabelPosition(labelDiv, latLng, iext, idir); return labelDiv; } /* Updates the className set for a label, which includes both the leaflet classes as well as the 'labeldef[E][Z]' CSS (E=extent, range 1-4, Z=zoom, range 4-8). In general, CSS properties for font size and weight change as the zoom level changes. */ function setLabelClasses(iext) { var locClasses = "labeldef" + iext.toString() + map.getZoom().toString() + " leaflet-clickable leaflet-label leaflet-zoom-hide "; return locClasses; } /* Responds to a location (LCircle) click event. Retrieves the location name and (lat/lng), and the list of events recorded at the location, from the "locations" HTML element, where it was placed by the getLocationPopupContent method after being retrieved from the database and formatted (the formatting takes place on the server side, currently). */ function createLocationPopup(loc_id) { var interval; var el = document.getElementById("locations"); getLocationPopupContent(loc_id); interval = setInterval(function() { if (el.innerHTML.length > 0) { document.getElementsByClassName("leaflet-popup-content")[0].innerHTML = el.innerHTML; clearInterval(interval); } }, 200); } /* Responds to a label (HTML div) click event. Functions the same as createLocationPopup, but since the label is not associated with the leaflet-popup-content class, builds the popup content and sets its position directly after the content has been retrieved from the database and formatted. */ function createLabelPopup(loc_id, pop, latlng) { var interval; var el = document.getElementById("locations"); getLocationPopupContent(loc_id); interval = setInterval(function() { if (el.innerHTML.length > 0) { pop.setContent(el.innerHTML); pop.setLatLng(latlng); pop.openOn(map); clearInterval(interval); } }, 200); } /* Positions the location label around the location circle as specified in the 'direction' parameter, based on clock-face (1 - 12) notation and the size of the associated circle marker (e.g. direction = 6 is directly below the circle, 9 is to the left, etc). The label's text alignment is based on which side of center the label is on. */ function setLabelPosition(labelDiv, latLng, extent, direction) { var labelWidth, labelHeight, cradius, pos, offset; // Use a nominal bounding box for the label. The offset position within the box // will be determined in the case structure below. labelWidth = 200; labelHeight = 10; if (map.getZoom() < 5) { return; } // Update the className set, which contains the labeldef[E][Z] CSS. labelDiv.className = setLabelClasses(extent); // Initial label offset(x, y) is labelDiv upper left corner at location // circle center latitude/longitude. pos = map.latLngToLayerPoint(latLng); offset = L.point([0, 0]); cradius = extent + 2; // Radius of location circle with added padding. switch (direction) { case 1: offset.x = cradius / 3; offset.y = -labelHeight - (2 * cradius / 3); labelDiv.style.textAlign = 'left'; break; case 2: offset.x = 2 * cradius / 3; offset.y = -labelHeight - (cradius / 3); labelDiv.style.textAlign = 'left'; break; case 3: offset.x = cradius; offset.y = -labelHeight/2; labelDiv.style.textAlign = 'left'; break; case 4: offset.x = 2 * cradius / 3; offset.y = (cradius / 3); labelDiv.style.textAlign = 'left'; break; case 5: offset.x = cradius / 3; offset.y = (2 * cradius / 3); labelDiv.style.textAlign = 'left'; break; case 6: offset.x = -(labelWidth / 2); offset.y = cradius; labelDiv.style.textAlign = 'center'; break; case 7: offset.x = -labelWidth - (cradius / 3); offset.y = (2 * cradius / 3); labelDiv.style.textAlign = 'right'; break; case 8: offset.x = -labelWidth - (2 * cradius / 3); offset.y = (cradius / 3); labelDiv.style.textAlign = 'right'; break; case 9: offset.x = -labelWidth - cradius; offset.y = -labelHeight/2; labelDiv.style.textAlign = 'right'; break; case 10: offset.x = -labelWidth - (2 * cradius / 3); offset.y = -labelHeight - (cradius / 3); labelDiv.style.textAlign = 'right'; break; case 11: offset.x = -labelWidth - (cradius / 3); offset.y = -labelHeight - (2 * cradius / 3); labelDiv.style.textAlign = 'right'; break; case 12: offset.x = -(labelWidth / 2); offset.y = -(labelHeight + cradius); labelDiv.style.textAlign = 'center'; break; } offset.y -= 2; pos = pos.add(L.point(offset.x, offset.y)); L.DomUtil.setPosition(labelDiv, pos); } /* Displays or hides the individual map panes based on the current zoom level. A z-index < 0 effectively makes the pane invisible. */ function showHideMapPanes() { var zoom = map.getZoom(); if (zoom < 5) { map.getPane('loc4').style.zIndex = -1; map.getPane('loc3').style.zIndex = -1; map.getPane('loc2').style.zIndex = -1; map.getPane('loc1').style.zIndex = -1; //setOpacityValue(1.0); } else if (zoom === 5) { map.getPane('loc4').style.zIndex = 400; map.getPane('loc3').style.zIndex = -1; map.getPane('loc2').style.zIndex = -1; map.getPane('loc1').style.zIndex = -1; //setOpacityValue(1.0); } else if (zoom === 6) { map.getPane('loc4').style.zIndex = 400; map.getPane('loc3').style.zIndex = 400; map.getPane('loc2').style.zIndex = -1; map.getPane('loc1').style.zIndex = -1; //setOpacityValue(0.8); } else if (zoom === 7) { map.getPane('loc4').style.zIndex = 400; map.getPane('loc3').style.zIndex = 400; map.getPane('loc2').style.zIndex = 400; map.getPane('loc1').style.zIndex = -1; //setOpacityValue(0.6); } else { map.getPane('loc4').style.zIndex = 400; map.getPane('loc3').style.zIndex = 400; map.getPane('loc2').style.zIndex = 400; map.getPane('loc1').style.zIndex = 400; //setOpacityValue(0.4); } } /* Creates a Marker whose icon is a circle sized according to the location 'extent' (specified by the 'ext' input parameter), at the location specified by the (lat, lng) input parameters, and places it on the map pane defined by the 'ext' parameter. Associates a click event with the location that produces a list of events recorded at the location. function placeLoc(id, name, lat, lng, ext, dir) { var locMarker, locCircle, locOptions; var iext = Number(ext); var locPane = map.getPane(panes[iext-1]); var locSize = iext * 2; var latlng = L.latLng(lat, lng); // var locColor = name.substr(0,4) === "Off " ? "#00FF00" : "#888"; var locOpacity = MARKERSVISIBLE ? 1.0 : 0.0; locOptions = { iconUrl: 'images/loc.png', iconSize: [locSize, locSize], iconAnchor: [0, 0], opacity: locOpacity, clickable: true }; locCircle = L.icon(locOptions); locMarker = L.marker(latlng, {icon: locCircle, pane: locPane}); // Make the marker selectable, with onclick providing a list of events associated with the location. locMarker.on('click', function() { var loc_data = createLocationPopup(id); locMarker.bindPopup(loc_data).openPopup(); }); locMarker.addTo(map); } Creates a marker whose icon is an instance of L.divIcon that contains the Location name formatted as an HTML string, at the location specified by the (lat, lng) input parameters, and places it on the map pane defined by the ext (extent) parameter. Associates a click event with the location that produces a list of events recorded at the location. function placeLabel(id, name, lat, lng, ext, dir) { var locLabelMarker, locLabelIcon, labelOptions, markerOptions; var latlng = L.latLng(lat, lng); var locNameCSS = 'labeldef' + ext.toString(); var labelString = name.substr(0,4) === "Off " ? 'X' : name; var opaque = MARKERSVISIBLE ? 1.0 : 0.0; var zoom = map.getZoom(); var iext = Number(ext); var labelPane = map.getPane(panes[iext-1]); var labelWidth = 20 + 8 * iext + 4 * zoom; var labelHeight = labelWidth / 4; // var labelSize = L.point(labelWidth, labelHeight); var labelAnchor = setLabelPosition(iext, dir, labelWidth, labelHeight); labelOptions = { iconUrl: null, className: locNameCSS, // iconSize: labelSize, iconAnchor: labelAnchor, html: labelString }; locLabelIcon = L.divIcon(labelOptions); locLabelMarker = L.marker(latlng, {icon: locLabelIcon, pane: labelPane}); // Make the label selectable, with onclick providing a list of events associated with the location. locLabelMarker.on('click', function() { var loc_data = createLocationPopup(id); locLabelMarker.bindPopup(loc_data).openPopup(); }); locLabelMarker.addTo(map); } function setLabelProperties(labelDiv, iext) { var size = [[9, 12, 14, 16], [0, 11, 12, 12], [0, 0, 11, 11], [0, 0, 0, 12]]; var weight = [[600, 600, 600, 600], [ 0, 700, 700, 700], [ 0, 0, 700, 800], [ 0, 0, 0, 800]]; var zoom = map.getZoom(); if (zoom >= 5) { var extIndex = 4 - iext; var zoomIndex = zoom - 5; labelDiv.style.fontSize = (size[zoomIndex, extIndex]).toString() + "px"; labelDiv.style.fontWeight = (weight[zoomIndex, extIndex]).toString(); } } */

Javascript file to create and manage the four location overlays

Year Selector Field

The code to display a range of years from 1000 A.D. to 1700 A.D. is built entirely in Javascript and CSS, with only a reference <div> element to contain the display.

/* This file contains code that builds, displays, and manages the menu cascading year-selector for the start date and end date when using the option to display information by year. */ /* Creates an instance of the Year Selection cascading menu for selecting a Start Year or End Year. */ function buildCascadingMenu(elem, pick) { var yearField = document.getElementById(elem); var tli, cli, dli, yli, i, j, k, val; var ulMain, ulTop, ulSub1, ulSub2; var startYear = MINAPPDATE; var endYear = MAXAPPDATE; var yearRange = endYear - startYear; var selectedYear; document.getElementById(pick).innerHTML = ""; ulMain = document.createElement("ul"); ulMain.setAttribute("class", "cyear"); tli = document.createElement("li"); val = startYear; selectedYear = createAnchor(pick, tli, "", val, true); ulTop = document.createElement("ul"); ulTop.setAttribute("class", "top"); for (i=0; i<yearRange; i+=100) { val = i + startYear; cli = document.createElement("li"); selectedYear = createAnchor(pick, cli, "", val, true); ulSub1 = document.createElement("ul"); ulSub1.setAttribute("class", "sub1"); for (j=val; j<val+100; j+=10) { dli = document.createElement("li"); selectedYear = createAnchor(pick, dli, "", j, true); ulSub2 = document.createElement("ul"); ulSub2.setAttribute("class", "sub2"); for (k=j; k<j+10; k++) { yli = document.createElement("li"); selectedYear = createAnchor(pick, yli, "last", k, false); ulSub2.appendChild(yli); } dli.appendChild(ulSub2); ulSub1.appendChild(dli); } cli.appendChild(ulSub1); ulTop.appendChild(cli); } tli.appendChild(ulTop); ulMain.appendChild(tli); yearField.appendChild(ulMain); yearField.style.visibility = "hidden"; } /* Creates an anchor <a> element in a table column and inserts the 'val' parameter specifying the Year as its innerHTML content. The <span> element contains a right arrow, if addSpan is true. */ function createAnchor(pick, parent, eClass, val, addSpan) { var a = document.createElement("a"); a.setAttribute("href", "#"); if (eClass.length > 0) { a.setAttribute("class", eClass); } a.innerHTML = val; a.onclick = function() { document.getElementById(pick).innerHTML = this.innerHTML; }; parent.appendChild(a); if (addSpan) { var s = document.createElement("span"); s.innerHTML = "&#9654;"; s.setAttribute("class", "rarrow"); parent.appendChild(s); } } /* Toggles the visibility of the Year Selector. elem - the top-level Year <ul> element (fourth column). pick - the currently selected year element (second column). pair - the other top-level Year <ul> element. */ function showHideDateSelector(elem, pick, pair) { var yearField = document.getElementById(elem); var pickField = document.getElementById(pick); var pairField = document.getElementById(pair); if (yearField.style.visibility === "hidden") { yearField.style.visibility = "visible"; pairField.style.visibility = "hidden"; } else { yearField.style.visibility = "hidden"; } } /* Validates keystroke input in the start/end year fields. In this text field, input is restricted to a maximum of four digits, and allowable values are processed according to the following keycode values: 48-57: integers 0-9; 8: Backspace key; 35: Home key; 36: End key; 37-40: Arrow keys; 46: Delete key. Notes: e.target refers to the parent field, either the Start Year or End Year table column. Higher level checks (e.g. conformance to a range between MINAPPDATE and MAXAPPDATE) are performed during menu input validation. */ function checkForValidEntry(e){ var x=e.which || e.keycode; var key = ((x>=48 && x<=57) || x==8 || (x>=35 && x<=40) || x==46); return key; } /* Ensures that the user entry is no more than four digits in length. */ function restrictToFourDigits(element){ var el = document.getElementById(element); var input = el.textContent; var in4digits; if (input.length > 4) { in4digits = input.substring(0, 4); el.innerHTML = ""; el.blur(); el.innerHTML = in4digits; el.focus(); } }

Javascript file to create and manage the Start Year and End Year Cascading Menus

/* Rules for the cascading Year Selection feature when specifying conflicts in a year range. */ #calendardiv { /*border: 2px solid #003366;*/ width: 100%; background-color: #bbb; } #syrwindow { position: absolute; width: 200px; height: 488px; background-color: #eee; border: 5px ridge #888; margin-top: -5px; margin-left: -5px; } #eyrwindow { position: absolute; width: 200px; height: 455px; background-color: #eee; border: 5px ridge #888; margin-top: -5px; margin-left: -5px; } #syear { border: 2px solid #666; cursor: pointer; color: #000; } #eyear { border: 2px solid #666; cursor: pointer; color: #000; } #syearpick { width: 15%; background-color: white; border: 2px inset #888; text-align: center; font-family: Verdana; font-weight: 800; color: #000; } #eyearpick { width: 15%; background-color: white; border: 2px inset #888; text-align: center; font-family: Verdana; font-weight: 800; color: #000; } .rttltxt { font-family: "Verdana"; font-weight: bold; font-size: 12px; color: white; text-align: right; border: 2px solid #888; width: 25%; } .calimg { width: 22px; height: 22px; } .imgcell { border: 2px solid #888; width: 8%; text-align: center; cursor: pointer; } ul.cyear, ul.top, ul.sub1, ul.sub2 { list-style-type: none; font-family: Verdana; font-size: 12px; font-weight: 600; text-align: center; margin: auto; } ul.cyear li { width: 10px; text-align: left; position: relative; } ul.cyear a { text-decoration: none; display: block; height: 16px; background-color: #fff; margin-left: -40px; border: 1px solid #666; color: #000; } ul.cyear .sub1 li { /* border: 1px solid green; */ } ul.cyear .top a { margin-top: 0px; } ul.cyear .sub1 a { /* margin-top: 2px;*/ } ul.cyear .sub2 a { margin-left: 1px; } ul.cyear li:hover > a { background-color: #CCC; } ul.cyear li:hover a:hover { background-color: #AAA; } ul.cyear ul.top { display: none; position: absolute; top: 0px; left: 10px; } ul.cyear ul.sub1 { display: none; position: absolute; top: 0px; left: 10px; } ul.cyear ul.sub2 { display: none; position: absolute; top: 0px; left: -32px; } ul.cyear li:hover .top { display: block; } ul.cyear .top li:hover .sub1 { display: block; } ul.cyear .sub1 li:hover .sub2 { display: block; } ul.cyear .sub2 a { width: 40px; } .darrow { font-size: 9px; position: absolute; top: 1px; right: 3px; } .rarrow { font-size: 9px; position: absolute; top: 2px; color: #888; }

CSS file to create and manage the Start Year and End Year Cascading Menus

Scalable Vector Graphics Overlays

The nearly 400 SVG overlay diagrams used to represent yearly changes in country boundaries over the course of 700 years were obtained through screen captures of the changes implemented in the Geacron Project as described above. Each screen capture was rendered in Inkscape and the country names were manually added.  Each diagram was properly positioned on the initial map base so that all year-to-year boundary changes appear seamless. The SVG overlay is generated on the Leaflet overlay pane. The code to create the initial overlay display code, as well as transform the SVG x and y coordinates when the map is panned and zoomed, is shown here. The key method scaleRegion() performs the zoom transform calculations.

/* Manages the content of the overlay layer that presents selective map details including country/regional borders, labels, etc., using an instance of SVGOverlay. SVGOverlay accesses a number of SVG data files built from historical Geacron map files isolated to a European/Middle East gengraphic region, projected in Mercator style and hand-edited. The overlay layer is initialized with the last date the app supports. */ var regionsSVGOverlay = null; var countries = []; var overlayURL; //===================================================================================== /* Displays the appropriate overlay, based on the ID of a selected event (or no event, if the ID = -1) */ function initializeSVGOverlay() { overlayURL = getOverlayURL(MAXAPPDATE); paintSVG(); setOpacity(); setDisplayDate(MAXAPPDATE); } /* Creates an instance of L.d3SVGOverlay by reading the appropriate SVG file (encoded as XML), adding the overlay layer to the map, and transforming (translate/scale) to properly overlay it on the base map tiles. */ function paintSVG() { regionsSVGOverlay = new L.D3SvgOverlay(function(selection, projection) { var upd = selection.data(countries[0]); upd.append(function(d) {return d}); }, {zoomHide: true, zoomDraw: false}); d3.xml(overlayURL, function(error, documentFragment) { if (documentFragment !== undefined && documentFragment !== null) { var svg = documentFragment.getElementsByTagName("svg")[0]; countries = d3.select(svg).attr('opacity', overlayOpacity); regionsSVGOverlay.addTo(map); // Scale the region on the <g> element that is the parent of the svg overlay... var transform = scaleRegion(svg); document.getElementsByClassName("leaflet-zoom-hide")[0].setAttribute("transform", transform); } }); } /* Replaces the existing SVG node in the overlay layer (represented by a URL containing the vector graphics) with a new SVG node identified through the event_id, if necessary. The new SVG data is obtained through an AJAX call to the updateURL file closest in time (current or prior start year of the event). */ function updateSVGOverlayByEventID(event_id) { var updateURL = getOverlayURLByEventDate(event_id); var oldSVG; if (updateURL !== overlayURL && updateURL.length > 0) { overlayURL = updateURL; if (document.getElementsByClassName("leaflet-zoom-hide")[0].hasChildNodes()) { oldSVG = document.getElementsByClassName("leaflet-zoom-hide")[0].firstChild; } else { oldSVG = null; } d3.xml(overlayURL, function(error, documentFragment) { if (documentFragment !== undefined && documentFragment !== null) { var newSVG = documentFragment.getElementsByTagName("svg")[0]; document.getElementsByClassName("leaflet-zoom-hide")[0].appendChild(newSVG); try { if (oldSVG !== undefined && oldSVG !== null) { document.getElementsByClassName("leaflet-zoom-hide")[0].removeChild(oldSVG); } } catch(DOMException) { // ignore Node Not Found errors... } } }); } } /* Replaces the existing SVG node in the overlay layer (represented by a URL containing the vector graphics) with a new SVG node identified through the displayDate, if necessary. The new SVG data is obtained through an AJAX call to the updateURL file closest in time (current or prior start year of the event). */ function updateSVGOverlayByDate(year) { var updateURL = getOverlayURL(year); var oldSVG; if (updateURL !== overlayURL && updateURL.length > 0) { overlayURL = updateURL; if (document.getElementsByClassName("leaflet-zoom-hide")[0].hasChildNodes()) { oldSVG = document.getElementsByClassName("leaflet-zoom-hide")[0].firstChild; } else { oldSVG = undefined; } d3.xml(overlayURL, function(error, documentFragment) { if (documentFragment !== undefined && documentFragment !== null) { var newSVG = documentFragment.getElementsByTagName("svg")[0]; document.getElementsByClassName("leaflet-zoom-hide")[0].appendChild(newSVG); try { if (oldSVG !== undefined && oldSVG !== null) { document.getElementsByClassName("leaflet-zoom-hide")[0].removeChild(oldSVG); } } catch(DOMException) { // ignore Node Not Found errors... } } }); } } /* Scales/translates the overlay layer based on the current zoom level. */ function updateSVGOverlayOnZoom() { regionsSVGOverlay.onRemove(map); regionsSVGOverlay = null; paintSVG(); } /* Calculates the Scale/Translation matrix for the SVG overlay based on its position relative to the base map. Uses calculated values for translation & scaling (zoom = current): */ function scaleRegion(svg) { var transX, transY, scaleX, scaleY; var tMatrix = ""; var mBounds = map.getBounds(); var mWestLng = mBounds.getWest(); var mEastLng = mBounds.getEast(); var mNorthLat = mBounds.getNorth(); var mSouthLat = mBounds.getSouth(); // SVG source region coordinates for the SVG overlay, at minimum zoom level; these values // must be constant for all SVG maps. Here we simply set the overlay and map bounds equal. var rNWCorner = nwCorner; var rSECorner = seCorner; var rWestLng = rNWCorner.lng; var rEastLng = rSECorner.lng; var rNorthLat = rNWCorner.lat; var rSouthLat = rSECorner.lat; var pxMapNWCorner = map.latLngToLayerPoint([mNorthLat, mWestLng]); var pxMapSECorner = map.latLngToLayerPoint([mSouthLat, mEastLng]); var pxOvlNWCorner = map.latLngToLayerPoint([rNorthLat, rWestLng]); var pxOvlSECorner = map.latLngToLayerPoint([rSouthLat, rEastLng]); var overlayHeight = pxOvlSECorner.y - pxOvlNWCorner.y; var overlayWidth = pxOvlSECorner.x - pxOvlNWCorner.x; var containerHeight = svg.getAttribute("height"); var containerWidth = svg.getAttribute("width"); transX = pxOvlNWCorner.x; transY = pxOvlNWCorner.y; scaleX = overlayWidth / containerWidth; scaleY = overlayHeight / containerHeight; tMatrix = "matrix(" + scaleX + ", 0.0, 0.0, " + scaleY + ", " + transX + ", " + transY + ")"; return tMatrix; } /* Returns the relative URL path name of the SVG overlay file associated with the specified year. */ function getOverlayURL(year) { var hy = (Math.floor(year / 100)).toString(); return "mapdata/SVG/" + hy + "/Map" + year + ".svg"; } /* Returns the URL of the SVG overlay file, based on the date associated with the specified event_id. If the event_id is not defined, it returns the overlay URL associated with MINAPPDATE (dateControl.js). */ function getOverlayURLByEventDate(event_id) { return getOverlayURL(getDisplayDate()); } /* ---------------------------------------------------------------------------- Routines to manage the opacity level of the map overlay. ---------------------------------------------------------------------------- */ // Opacity value for the map overlay, range 0.0 - 1.0 in increments of 0.1. var overlayOpacity = 0.6; function setOpacity() { var opacClass = document.getElementsByClassName("leaflet-zoom-hide")[0]; if (opacClass !== undefined) { opacClass.setAttribute("opacity", overlayOpacity); } var iopac = Math.round(overlayOpacity * 100); if (iopac >= 95) { document.getElementById("up").setAttribute("disabled", true); iopac = 100; } else { document.getElementById("up").setAttribute("disabled", false); } if (iopac <= 5) { document.getElementById("down").setAttribute("disabled", true); iopac = 0; } else { document.getElementById("down").setAttribute("disabled", false); } document.getElementById('opacity').value = iopac; document.getElementById('opacity').innerHTML = iopac + "%"; } function increaseOpacity() { if (overlayOpacity < 1.0) { overlayOpacity += 0.1; setOpacity(); } } function mouseoverIncreaseOpacity() { document.getElementById("up").innerHTML = "Map View +"; } function decreaseOpacity() { if (overlayOpacity > 0.0) { overlayOpacity -= 0.1; setOpacity(); } } function mouseoverDecreaseOpacity() { document.getElementById("down").innerHTML = "Map View -"; } function setOpacityValue(opacity) { overlayOpacity = opacity; setOpacity(); }

Javascript file to perform initial display and pan/zoom 

Status and Caveats

This is a work in progress; as of the latest update, the Events database contains over 1400 entries, grouped into approximately 20 Conflicts.  Future plans are to add individual Wars and Countries to the selection capability which requires some enhancements to the current database structure. I would also like to implement a 3-D map display (e.g., using Google World as a base map), and build an Animator capability that automatically sequences through the map geo-political borders over a specified time interval.

First of all I am not an historian, by education or profession. Reading history is something I enjoy doing, but as with many subjects that don't involve direct experience, I find it difficult at times to grasp the large scale historical flow of events, especially over extended periods of time and across fluid geo-political boundaries.  So developing this site is an exercise in gaining a better sense of that flow.  Of course, any major conflict evolves over time as the result of complex political, economic, and religious factors that cannot possibly be represented with simplistic static displays. As with any high-level summary of complex geo-political, regional, and local events, I had to make some concessions for the sake of simplicity. I use the notion of a Conflict as a convenient method of grouping historical Events into manageable collections for storage and retrieval. This sometimes results in placing Events into Conflicts that may seem somewhat arbitrary.  And the time-frame in which Events occur has to be bounded rather narrowly; in reality, the lead-up to a battle or siege takes time and almost always involves movement of forces that cannot be accurately represented in the format I use here.  For details on the events, I tried to maintain a single point of reference, hence the use of Wikipedia; the usual caveats apply to the information contained there as well.

I welcome comments, (constructive) criticism, suggestions, and improvements; please refer to the Contact information in the Footer display at the bottom of the Web page.