61 lines
2.3 KiB
HTML
61 lines
2.3 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>THE HOBBIT FILMING LOCATIONS - A Cartodb.js map</title>
|
||
|
|
<link href="css/reset.css" rel="stylesheet" type="text/css" />
|
||
|
|
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
||
|
|
<link href="css/style.css" rel="stylesheet" type="text/css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="map"></div>
|
||
|
|
<div id="leftBkg"></div>
|
||
|
|
<div id="overlay"></div>
|
||
|
|
|
||
|
|
<div class="left">
|
||
|
|
<div id="title"></div>
|
||
|
|
<p>Click on each location to discover pics of the places and comments from the production videos.</p>
|
||
|
|
<p>The data is hosted on <a href="http://cartodb.com">CartoDB</a> and was assembled from various data sources. </p>
|
||
|
|
<p>This map was developed using the CartoDB JavaScript library, <a href="https://github.com/CartoDB/cartodb.js">Cartodb.js</a> Fork it and create your own.</p>
|
||
|
|
<div id="legendBox">
|
||
|
|
<ul>
|
||
|
|
<li>Natural Parks</li>
|
||
|
|
<li>Villages</li>
|
||
|
|
<li>Rivers</li>
|
||
|
|
<li>Fields</li>
|
||
|
|
<li>Caves</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="pointTT">
|
||
|
|
<p></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--Custom html for the infowindow customization-->
|
||
|
|
<!--You can write simple html or use Mustache templates http://mustache.github.com/-->
|
||
|
|
<!--Content.data contains the field info-->
|
||
|
|
<script type="infowindow/html" id="infowindow_template">
|
||
|
|
<div class="cartodb-popup">
|
||
|
|
<a href="#close" class="cartodb-popup-close-button close">x</a>
|
||
|
|
<div class="cartodb-popup-content-wrapper">
|
||
|
|
<div class="cartodb-popup-cont">
|
||
|
|
<img src="{{content.data.pic}}" />
|
||
|
|
<h4>{{content.data.name_to_display}}</h4>
|
||
|
|
{{#content.data.video_url}}
|
||
|
|
<a class="videoButton" href="{{content.data.video_url}}" target="_blank"> </a>
|
||
|
|
{{/content.data.video_url}}
|
||
|
|
<p>{{content.data.description}}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="cartodb-popup-tip-container"></div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--Include the js. Please be sure that you use a locked version in case you go to production-->
|
||
|
|
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||
|
|
<script type="text/javascript" src="js/app.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|