Vici.org

The Vici.org map is available as a javascript widget and can be included on any web page. Just follow three steps.

1. Include the required libraries

The Vici widget requires 3 libraries to run. These are Google Maps, jQuery and of course the Vici library. Include these libraries in your page by adding the following code between the <head>-tags of the page:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript" src="http://vici.org/js/vici-latest.min.js"></script>

2. Determine where the map should be shown

Reserve a place on the page for the map by adding a <div>-tag with the desired layout. Give this element an id, for example "map". Here is an example:

<div id="map" style="width:600px; height:400px"></div>

3. Activate the widget

Examples from sites that implemented the wiget

Activate the widget by putting the following code on the bottom of the page, just before the </body>-tag:

<script type="text/javascript">
var mapObj = new ViciWidget(document.getElementById('map'), {"zoom": 14});
</script>

Use the id of the element you want the map to be shown. In this example the map has an initial zoom of 14. You may also chose the initial lattitude or longitude. You can do this for example by replacing {"zoom": 14} with {"center": { "lat": 50.84, "lng": 5.69}, "zoom": 8}.

There are more options. In the next example, the widget will highlight the most interesting locations for the displayed area. It will show visible objects only, both archeological and touristic, but it provides the user with a menu that enables him to change what is shown.

<script type="text/javascript">
var mapObj = new ViciWidget(document.getElementById('map'), {
    "highlights": 2,
    "showPrefbox" : true,
    "preferences": {"visibility": "onlyVisible", "era": "RomanAndContemporary"}
});
</script>

Example implementations

Here are some example implementations:

The widget is being using by Romeinen.info, Oud Houten, Parklaan Landschapsarchitecten and Livius.org - Articles on ancient history (custom implementation). Please let me know when you have implemented the widget or have wishes for a next version.

Parameters reference table

ParameterFunction        Usage
"zoom"Initial zoomlevel.Integer: values 5 to 18. Defaults to 10
If user changes the zoom of the map, the new zoom be kept (using a cookie) and used next time the map is displayed.
"center"Initial center of the map.Object containing values for lattitude "lat" and longitude "lng": values 5 to 18. For example { "lat": 50.84, "lng": 5.69}. If none given, the previous location is used (stored in a cookie) or otherwise the center of Rome.
"mapTypeId"Map backgroundPossible values: "SATELLITE" (default), "HYBRID" or "HYBRID" for the Digital Atlas of the Roman Empire (DARE) map.
"lang"Language of the interfaceA string containing a two letter languagecode. Supported values are "de", "en", "fr", "nl". Defaults to the language setting of the webbrowser, with a fallback to English ("en").
"highlights"Featured locationsAn integer value that sets the maximum number of locations that are given extra attention by showing them in a 'featured' box. For example, the value 2 will highlight upto two locations. Defaults to 0, meaning no locations are highlighted.
"showPrefbox"User customizable viewsA boolean, the value true will show a clickable menu in the lower left corner that allows the user to select what objects are shown on the map and what map to use. Default value is false (no menu).
"preferences"Customizable viewsUsing the preferences object one can define what is shown on the map. These setting can be altered by the user using the preferences menu. So when the preference menu is disabled (showPrefbox set to false) these setting cannot be overridden by the user. Two aspects can be controlled, the kind of objects to be shown, archeological or touristic (the "era" property, possible values are "onlyContemporary", "RomanAndContemporary" and "onlyRoman") and whether invisible objects should displayed or not (the "visibility" property, possible values are "onlyVisible" and "anyVisibility").