Adding old OS maps to findspot maps
Friday, August 06, 2010 10:32am on Portable Antiquities BlogToday on Twitter, David Haskiya alerted me to a set of old Ordnance Survey maps that have been scanned by the National Library of Scotland and turned into the ‘NLS Maps API: Historic map of Great Britain for use in mashups’. These old maps are really useful (they cover England and Wales as well as Scotland!) for the work that our Finds Liaison Officers do, or for researchers using our database. Low level phenomenological research can be conducted. Their instructions are pretty straightforward to follow and I have now added this layer to our findspot mapping (at the moment just for higher level users). The image below gives an example of the embedded Googlemap that we can produce from these OS tiles:
Our maps now have the following layers:
- Satellite
- Terrain
- Openstreetmap
- Google Earth
- Basic map
- Hybrid
- Historical
To implement this layer all you need to do is the following (I have Jquery as my javascript framework), firstly add the Javascript file that runs their tileserver to either your head tags or before the closing body tag of your HTML document.
<script type="text/javascript" src="http://nls.tileserver.com/api.js"></script>
Then you need to initiate the layer and add the historical map button and copyright layer:
var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)), 1,
"Historical maps from <a href='http://geo.nls.uk/maps/api/'>NLS Maps API<\/a>");
var copyrightCollection = new GCopyrightCollection();
copyrightCollection.addCopyright(copyright);var tilelayer = new GTileLayer(copyrightCollection, 1, NLSTileUrlOS('MAXZOOM'));
tilelayer.getTileUrl = NLSTileUrlOS;
var nlsmap = new GMapType([tilelayer], G_NORMAL_MAP.getProjection(), "Historical");
You will then need to add the map type to your mapping script by adding the following javascript:
map.addMapType(nlsmap);
So for example my code for running our map looks like the below (and I add this before the closing body tags, and using Zend Framework’s inlineScript syntax within my php script:
<script type="text/javascript" src="<a href="http://nls.tileserver.com/api.js">http://nls.tileserver.com/api.js</a>"></script>
<script type="text/javascript" src="<a href="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAasv4kXXJ0jQKvwOWfHsLjBSlEYz08iyooQyuh_EGbYeUie1elhTVaZDZHd9xfLdYKWAVz9b3bDuvKA">http://maps.google.com/maps?file=api&amp;v=2.x&key={key}</a>"></script>
<script type="text/javascript" src="<a href="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.0/src/mapiconmaker.js">http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.0/src/mapiconmaker.js</a>"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
if (GBrowserIsCompatible()) {
//Set up the NLS layer
var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)), 1,
"Historical maps from <a href='http://geo.nls.uk/maps/api/'>NLS Maps API<\/a>");
var copyrightCollection = new GCopyrightCollection();
copyrightCollection.addCopyright(copyright);
var tilelayer = new GTileLayer(copyrightCollection, 1, NLSTileUrlOS('MAXZOOM'));
tilelayer.getTileUrl = NLSTileUrlOS;
var nlsmap = new GMapType([tilelayer], G_NORMAL_MAP.getProjection(), "Historical");
//Set up the openstreet map layer
var copyOSM = new GCopyrightCollection('<a href="http://www.openstreetmap.org/">OpenStreetMap</a>');
copyOSM.addCopyright(new GCopyright(1,
new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)),
0, // minimum zoom level
' ' // no additional copyright message, but empty string hides entire copyright
));
var osmLayer = new GTileLayer(copyOSM, 0, 18, {
tileUrlTemplate: 'http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/998/256/{Z}/{X}/{Y}.png',
isPng: true,
opacity: 1.0
});
var osmMap = new GMapType(
[osmLayer], // list of layers
G_NORMAL_MAP.getProjection(), // borrow the Mercator projection from the standard map
'OSM' // name should be short enough to fit in button
);
//Initiate the map for the div with id of "map" - random Lat/lon pair used here - not a findspot!
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.263722,0.68009),11);
//Add your map types - here I have added OSM, NLS, Earth and Terrain
map.addMapType(osmMap);
map.addMapType(nlsmap);
map.addMapType(G_SATELLITE_3D_MAP);
map.addMapType(G_PHYSICAL_MAP);
//Set your default map type
map.setMapType(G_PHYSICAL_MAP);
map.disableScrollWheelZoom();
map.enableRotation();
//Set up my icons
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
markerOptions = { icon:tinyIcon };
var findIcon = new GIcon();
findIcon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
findIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
findIcon.iconSize = new GSize(12, 20);
findIcon.shadowSize = new GSize(22, 20);
findIcon.iconAnchor = new GPoint(6, 20);
findIcon.infoWindowAnchor = new GPoint(5, 1);
findOptions = { icon:findIcon };
var point = new GLatLng(51.263722,0.68009);
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("Findspot location");
});
map.addOverlay(marker);
}
});
//]]>
</script>
So really simple to integrate and get running on your site.
PAS record number: WMID-D6D183
On April Fool’s day, the Ordnance Survey opened up its data for people to reuse with less restrictions applied. At the heart of everything we do, place perhap the most important. The Scheme uses National Grid References and place names that you would find on an OS map. The things that these maps depict, often inform where people discover objects; they represent habitation in a past and present form, sometimes concurrently, sometimes from anitiquity. The last word in that sentence is the key to why I wanted to use the 1:50 000 data in our web application (our database). Two categories of place are defined within this dataset:
)
