I made this map on Photoshop with paint brushes and then vectorised in on Illustrator. This is ideally how I would like the map to be. There are two ways I have identified to include the interactive map on the website: through a Javascript code with Leaflet open source libraries using a GEOJson file with Scottish borders or through an external website, MapHub. The first option would allow the customisation of the map as showcased in the XD file wireframes. The second option does not allow as much customisation, but it is easier to build and implement through an iframe code.
OPTION 1
OPTION 2
THE PROCESS
The most important thing at the beginning of the data gathering process was to make sure I was collecting reliable data (such as name, coordinates, type of data) and information of the sites.
The archaeologists I talked to told me that most data of sites is online on Cenmore. I collected 30 sites for this prototype, and with them I collected coordinates, facts and the Google Maps Photo Sphere links.
Callanish Stones
FACTS
360°
Corrimony
FACTS
360°
Standing Stones of Stenness
FACTS
360°
Crannog Centre
360°
Glenbeag Broch
FACTS
360°
Barpa Langass
FACTS
360°
Loanhead of Daviot Stone Circle
FACTS
360°
Dun Carloway
FACTS
360°
Cairnpapple Hill
FACTS
360°
Maes Howe
FACTS
360°
Camster Cairn
FACTS
360°
Clava Cairns
FACTS
360°
Carn Liathbroch
FACTS
360°
Skara Brae
FACTS
360°
Ring of Brodgar
FACTS
360°
Mousa Broch
FACTS
360°
Hill o’ Many Stanes
FACTS
360°
Tomnaverie Stone Circle
FACTS
360°
East Aquhorthies Stone Circle
FACTS
360°
Tappoch Broch
FACTS
360°
Old Scatnessbroch
FACTS
360°
Gurness Broch
FACTS
360°
Clach an Trushal
FACTS
360°
Dun Deardail
FACTS
360°
Nether Largie Mid Cairn
FACTS
360°
Torhouse Stone Circle
FACTS
360°
Auchgallon Stone Circle
FACTS
360°
Cullerlie Stone Circle
FACTS
360°
Jarlshof Prehistoric and Norse Settlement
FACTS
https://www.historicenvironment.scot/visit-a-place/places/jarlshof-prehistoric-and-norse-settlement/
360°
Huly Hill Cairn
FACTS
360°
INTERACTIVE MAP DESIGN
This is the first draft of the interactive map. I wasn't quite happy with the result and wanted to make it more captivating. I then changed the design into something much cleaner and aesthetic as seen on the first image of this page.
MapHub that lets you create your own data visualization on maps. There are many different designs and it’s the perfect way to create a GEOJson dataset without knowing how to code. I added the 30 chosen sites to the map and linked them to their coordinates, 360° google photo sphere and noncommercial free to use image of the site. I even branded it with the Prehistone Scotland Icons. It’s also possible to filter out the different categories.
I tested it on different devices and the only problem I’ve had so far was to not show properly the different icons, it takes a while to load sometimes. I think this is the best option so far, because although having an illustrated map is also a really good option, it’s more difficult to modify (this would only need to be modified through MapHub and it would automatically update on site too). This obviously present some reliability concerns. If MapHub goes down, the map on the site would go down. But I think that the fact that the map is so accurate makes up for this possibility. After all if any hosting platform shut down the website hosted would go down as well.
There are many pros and cons. I guess another cons is the limited customisation of the map, although it is responsive I don’t really like the colours and I would have liked a desktop scrollable home page instead of a one page home.
It is possible to export the map in KML, GPX, Excel CSV
GEOJson file:
Tested it on a GeoJson player - code is flexible and can be used through different platforms easily.
To embed it on a website:
<iframe width="100%" height="576" src="https://maphub.net/embed/84487?button=0&directions=1&geolocation=1" frameborder="0" allow="geolocation"></iframe>
It is also possible to embed the 360 degree picture on the website:
- Google Maps
- 360 degree picture
- Options (3 dots)
- Embed or share an image
- Embed map
- Copy iframe and put into html body.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!4v1581784460881!6m8!1m7!1sCAoSLEFGMVFpcE91Y05aS1lUZHE5TkN6NzlNZjRuamtNT1RlWmdEekp3WDVWaUxq!2m2!1d58.1975333!2d-6.7450817!3f301.808704947671!4f0!5f0.7820865974627469" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</body>
</html>