Using the Imperium map layer from the Scheme server for Google maps

I’ve already written elsewhere (http://finds.org.uk/blogs/centralunit/2012/10/05/the-portable-antiquities-scheme-joins-pelagios/ and http://pelagios-project.blogspot.co.uk/2012/10/the-portable-antiquities-scheme-joins.html) about how the Scheme has recently joined the Pelagios project. One of the outcomes of this excellent project was Johan Åhlfeldt’s wonderful slippy map of the Roman Empire, produced from the famous Barrington Atlas. As we serve quite a few map laden pages, it was only fair that our bandwidth took up the strain and so our tilestore is publicly available as well. This post describes how to get the PAS store working and shows how very simple it is to use and how to integrate them with Google Maps API version 3. (There is one limitation that you need to be aware of when using the maps and that is the minimum and maximum zoom levels.)

The Imperium map layer in action

Let’s assume you’re using jQuery for your javascript library and have included the appropriate file (packed or unpacked) and you have included the correct Google Maps API javascript library like so:

<html>
<head>
<title>An example of the Imperium map</title>
<style type="text/css">
            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</body>
</html>

<html>

<head>

<title>An example of the Imperium map</title>

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</body>

</html>

Once the above scripts are present, you need to add the code that will drive your map to appear on your HTML page (see the end of this post for an entire script).

$(document).ready(function() {
//Set the function to load when document ready

//Maximum zoom level of map (for Roman Britain the map works to level 11)
            var max = 11; 
//Minimum zoom level of map
            var min = 1; 
//Set the map element
            var element = document.getElementById("map");

//Set up the map type array (this adds all available gmaps one by default) 
            var mapTypeIds = [];

            for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }

//Push the imperium map to the ids array
            mapTypeIds.push("Imperium");

            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(41.8954656, 12.4823243),
                zoom: 7,
                mapTypeId: "Imperium",
                mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
                }
            });

	map.mapTypes.set("Imperium", new google.maps.ImageMapType({
        getTileUrl: function (coord, zoom) {
            return "http://finds.org.uk/imperium/" +
                zoom + "/" + coord.x + "/" + coord.y + ".png";

        },
        tileSize: new google.maps.Size(256, 256),
        isPng: true,
        alt: "Imperium layer",
        name: "Imperium",
        maxZoom: max,
	minZoom: min
    }));

	});

$(document).ready(function() {

//Set the function to load when document ready

//Maximum zoom level of map (for Roman Britain the map works to level 11)

var max = 11;

//Minimum zoom level of map

var min = 1;

//Set the map element

var element = document.getElementById("map");

//Set up the map type array (this adds all available gmaps one by default)

var mapTypeIds = [];

for(var type in google.maps.MapTypeId) {

mapTypeIds.push(google.maps.MapTypeId[type]);

}

//Push the imperium map to the ids array

mapTypeIds.push("Imperium");

var map = new google.maps.Map(element, {

center: new google.maps.LatLng(41.8954656, 12.4823243),

zoom: 7,

mapTypeId: "Imperium",

mapTypeControlOptions: {

mapTypeIds: mapTypeIds

}

});

map.mapTypes.set("Imperium", new google.maps.ImageMapType({

getTileUrl: function (coord, zoom) {

return "http://finds.org.uk/imperium/" +

zoom + "/" + coord.x + "/" + coord.y + ".png";

tileSize: new google.maps.Size(256, 256),

isPng: true,

alt: "Imperium layer",

maxZoom: max,

minZoom: min

}));

});

The Imperium map layer is licenced under a Creative Commons By attribution licence, so to add this to the map, one can add these lines of javascript:

	var copyright= document.createElement('p');
	copyright.style.color = '#444444';
	copyright.style.font = "10px sans-serif";
	copyright.innerHTML = 'Imperium layer - The Pelagios Project CC-BY';

	var copyrightDiv = document.createElement('div');
	copyrightDiv.appendChild(copyright);

	map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv);

var copyright= document.createElement('p');

var copyrightDiv = document.createElement('div');

copyrightDiv.appendChild(copyright);

map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv);

So the final code would look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Imperium with Google Maps v3 API</title>
<style type="text/css">

            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }
</style>

 </head>
 <body>
  <div id="map">
  </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set the function to load when document ready

//Maximum zoom level of map (for Roman Britain the map works to level 11)
            var max = 11; 
//Minimum zoom level of map
            var min = 1; 
//Set the map element
            var element = document.getElementById("map");

//Set up the map type array (this adds all available gmaps one by default) 
            var mapTypeIds = [];

            for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }

//Push the imperium map to the ids array
            mapTypeIds.push("Imperium");
//Create the map centred on Rome with a zoom of 7
            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(41.8954656, 12.4823243),
                zoom: 7,
                mapTypeId: "Imperium",
                mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
                }
            });

//Set up the map tiles for use by the slippy map engine
	map.mapTypes.set("Imperium", new google.maps.ImageMapType({
        getTileUrl: function (coord, zoom) {
            return "http://finds.org.uk/imperium/" +
                zoom + "/" + coord.x + "/" + coord.y + ".png";

        },
        tileSize: new google.maps.Size(256, 256),
        isPng: true,
        alt: "Imperium layer",
        name: "Imperium",
        maxZoom: max,
	minZoom: min
    }));

//Create and place the licence message
	var copyright= document.createElement('p');
	copyright.style.color = '#444444';
	copyright.style.font = "10px sans-serif";
	copyright.innerHTML = 'Imperium layer - The Pelagios Project CC-BY';

	var copyrightDiv = document.createElement('div');
	copyrightDiv.appendChild(copyright);

	map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv);

	});
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Imperium with Google Maps v3 API</title>

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</div>

$(document).ready(function() {

//Set the function to load when document ready

//Maximum zoom level of map (for Roman Britain the map works to level 11)

var max = 11;

//Minimum zoom level of map

var min = 1;

//Set the map element

var element = document.getElementById("map");

//Set up the map type array (this adds all available gmaps one by default)

var mapTypeIds = [];

for(var type in google.maps.MapTypeId) {

mapTypeIds.push(google.maps.MapTypeId[type]);

}

//Push the imperium map to the ids array

mapTypeIds.push("Imperium");

//Create the map centred on Rome with a zoom of 7

var map = new google.maps.Map(element, {

center: new google.maps.LatLng(41.8954656, 12.4823243),

zoom: 7,

mapTypeId: "Imperium",

mapTypeControlOptions: {

mapTypeIds: mapTypeIds

}

});

//Set up the map tiles for use by the slippy map engine

map.mapTypes.set("Imperium", new google.maps.ImageMapType({

getTileUrl: function (coord, zoom) {

return "http://finds.org.uk/imperium/" +

zoom + "/" + coord.x + "/" + coord.y + ".png";

tileSize: new google.maps.Size(256, 256),

isPng: true,

alt: "Imperium layer",

maxZoom: max,

minZoom: min

}));

//Create and place the licence message

var copyright= document.createElement('p');

var copyrightDiv = document.createElement('div');

copyrightDiv.appendChild(copyright);

map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv);

});

</script>

</body>

</html>

This can be seen in action here: http://finds.org.uk/imperium/example.html

As this is pretty basic, perhaps you want to add another third party layer – for example the Open Street Map tiles, so if you study the code below, you can see how this has been achieved:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Imperium with Google Maps v3 API</title>
<style type="text/css">

            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }
</style>

 </head>
 <body>
  <div id="map">
  </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set the function to load when document ready

//Maximum zoom level of map (for Roman Britain the map works to level 11)
            var max = 11; 
//Minimum zoom level of map
            var min = 1; 
//Set the map element
            var element = document.getElementById("map");

//Set up the map type array (this adds all available gmaps one by default) 
            var mapTypeIds = [];

            for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }

//Push the imperium map to the ids array
            mapTypeIds.push("Imperium");
//Push the OSM map to the ids array
		mapTypeIds.push("OSM");

//Create the map centred on Rome with a zoom of 7
            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(41.8954656, 12.4823243),
                zoom: 7,
                mapTypeId: "Imperium",
                mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
                }
            });

//Set up the map tiles for use by the slippy map engine
	map.mapTypes.set("Imperium", new google.maps.ImageMapType({
        getTileUrl: function (coord, zoom) {
            return "http://finds.org.uk/imperium/" +
                zoom + "/" + coord.x + "/" + coord.y + ".png";

        },
        tileSize: new google.maps.Size(256, 256),
        isPng: true,
        alt: "Imperium layer",
        name: "Imperium",
        maxZoom: max,
	minZoom: min
    }));
//Set up the OSM tiles
	map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            }));

//Create and place the licence message
	var copyright= document.createElement('p');
	copyright.style.color = '#444444';
	copyright.style.font = "10px sans-serif";
	copyright.innerHTML = 'Imperium layer - The Pelagios Project CC-BY | OSM layer - CC-BY-SA &copy OpenStreetMap';

	var copyrightDiv = document.createElement('div');
	copyrightDiv.appendChild(copyright);

	map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv);

	});
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Imperium with Google Maps v3 API</title>

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</div>

$(document).ready(function() {

//Set the function to load when document ready

//Maximum zoom level of map (for Roman Britain the map works to level 11)

var max = 11;

//Minimum zoom level of map

var min = 1;

//Set the map element

var element = document.getElementById("map");

//Set up the map type array (this adds all available gmaps one by default)

var mapTypeIds = [];

for(var type in google.maps.MapTypeId) {

mapTypeIds.push(google.maps.MapTypeId[type]);

}

//Push the imperium map to the ids array

mapTypeIds.push("Imperium");

//Push the OSM map to the ids array

mapTypeIds.push("OSM");

//Create the map centred on Rome with a zoom of 7

var map = new google.maps.Map(element, {

center: new google.maps.LatLng(41.8954656, 12.4823243),

zoom: 7,

mapTypeId: "Imperium",

mapTypeControlOptions: {

mapTypeIds: mapTypeIds

}

});

//Set up the map tiles for use by the slippy map engine

map.mapTypes.set("Imperium", new google.maps.ImageMapType({

getTileUrl: function (coord, zoom) {

return "http://finds.org.uk/imperium/" +

zoom + "/" + coord.x + "/" + coord.y + ".png";

tileSize: new google.maps.Size(256, 256),

isPng: true,

alt: "Imperium layer",

maxZoom: max,

minZoom: min

}));

//Set up the OSM tiles

map.mapTypes.set("OSM", new google.maps.ImageMapType({

getTileUrl: function(coord, zoom) {

return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";

tileSize: new google.maps.Size(256, 256),

maxZoom: 18

}));

//Create and place the licence message

var copyright= document.createElement('p');

var copyrightDiv = document.createElement('div');

copyrightDiv.appendChild(copyright);

map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv);

});

</script>

</body>

</html>

And you can view this example at: http://finds.org.uk/imperium/osmImperium.html

Leave a Reply