195 lines
9.4 KiB
HTML
195 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Storytelling map using Storymap.js | CARTO</title>
|
||
<meta name="viewport" content="initial-scale=1.0">
|
||
<meta charset="utf-8">
|
||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||
<!-- Include Leaflet -->
|
||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||
<!-- Include CARTO.js -->
|
||
<script src="../../../dist/public/carto.js"></script>
|
||
<!--jquery-->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||
<!--boostrap-->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||
<!--leaflet.ajax for asynchronously adding geojson data-->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
|
||
<!--story map plugin-->
|
||
<script src="https://cdn.rawgit.com/jakobzhao/storymap/master/dist/storymap.2.3.js"></script>
|
||
|
||
<link href="../style.css" rel="stylesheet">
|
||
<!--add required stylesheets-->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
|
||
<!--animation-->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
|
||
<!--Google Font-->
|
||
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
|
||
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jakobzhao/storymap/master/dist/storymap.2.3.css">
|
||
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
<div id="storymap" class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md-8 storymap-map"></div>
|
||
<div class="col-sm-6 col-md-4 storymap-story">
|
||
<section data-scene="scene1">
|
||
<h1>Spain, France and Portugal</h1>
|
||
</section>
|
||
<section data-scene="scene2">
|
||
<h1>Spain</h1>
|
||
<p>
|
||
<a href="https://en.wikipedia.org/wiki/Spain">Source Wikipedia</a>
|
||
</p>
|
||
|
||
<p>
|
||
Spain (Spanish: España [esˈpaɲa] (About this sound listen)), officially the Kingdom of Spain (Spanish: Reino de España),[a][b]
|
||
is a sovereign state located on the Iberian Peninsula in southwestern Europe, with two large archipelagoes,
|
||
the Balearic Islands in the Mediterranean Sea and the Canary Islands off the North African Atlantic
|
||
coast, two cities, Ceuta and Melilla, in the North African mainland and several small islands in
|
||
the Alboran Sea near the Moroccan coast. The country's mainland is bordered to the south and east
|
||
by the Mediterranean Sea except for a small land boundary with Gibraltar; to the north and northeast
|
||
by France, Andorra, and the Bay of Biscay; and to the west and northwest by Portugal and the Atlantic
|
||
Ocean. It is the only European country to have a border with an African country (Morocco)[h] and
|
||
its African territory accounts for nearly 5% of its population, mostly in the Canary Islands but
|
||
also in Ceuta and Melilla.
|
||
</p>
|
||
</section>
|
||
<section data-scene="scene3">
|
||
<h1>France</h1>
|
||
<p>
|
||
<a href="https://en.wikipedia.org/wiki/France">Source Wikipedia</a>
|
||
</p>
|
||
<p>
|
||
France (French IPA: [fʁɑ̃s]), officially the French Republic (French: République française [ʁepyblik fʁɑ̃sɛz]), is a country
|
||
whose territory consists of metropolitan France in western Europe, as well as several overseas regions
|
||
and territories.[XIII] The metropolitan area of France extends from the Mediterranean Sea to the
|
||
English Channel and the North Sea, and from the Rhine to the Atlantic Ocean. The overseas territories
|
||
include French Guiana in South America and several islands in the Atlantic, Pacific and Indian oceans.
|
||
The country's 18 integral regions (5 of which are situated overseas) span a combined area of 643,801
|
||
square kilometres (248,573 sq mi) which, as of October 2017, has a population of 67.15 million people.[10]
|
||
France is a unitary semi-presidential republic with its capital in Paris, the country's largest city
|
||
and main cultural and commercial centre. Other major urban centres include Marseille, Lyon, Lille,
|
||
Nice, Toulouse and Bordeaux.
|
||
</p>
|
||
</section>
|
||
<section data-scene="scene4">
|
||
<h1>Portugal</h1>
|
||
<p>
|
||
<a href="https://en.wikipedia.org/wiki/Portugal">Source Wikipedia</a>
|
||
</p>
|
||
<p>
|
||
Portugal (Portuguese: [puɾtuˈɣaɫ]), officially the Portuguese Republic (Portuguese: República Portuguesa [ʁɛ'puβlikɐ puɾtu'ɣezɐ]),[note
|
||
1] is a sovereign state located on the Iberian Peninsula in southwestern Europe. It is the westernmost
|
||
country of mainland Europe, being bordered to the west and south by the Atlantic Ocean and to the
|
||
north and east by Spain. Its territory also includes the Atlantic archipelagos of the Azores and
|
||
Madeira, both autonomous regions with their own regional governments. At 1.7 million km2, its Exclusive
|
||
Economic Zone is the 3rd largest in the European Union and the 11th largest in the world.
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<aside class="toolbox">
|
||
<div class="box">
|
||
<header>
|
||
<h1>Storytelling map</h1>
|
||
<button class="github-logo js-source-link"></button>
|
||
</header>
|
||
<div>
|
||
<p class="description open-sans">Storytelling map using Storymap.js and CARTO.js.</p>
|
||
</div>
|
||
<footer class="js-footer"></footer>
|
||
</div>
|
||
</aside>
|
||
<script>
|
||
// set map with initial zoom and coodinates view
|
||
const map = L.map('map').setView([40, 2], 4);
|
||
// define scenes
|
||
let scenes = {
|
||
scene1: { lat: 30, lng: 0, zoom: 3, layers: ['basemap'], name: "1" },
|
||
scene2: { lat: 40.40002626, lng: -3.68335169, zoom: 5, layers: ['basemap','cartoLayer'], name: "2" },
|
||
scene3: { lat: 47.08372683, lng: 2.39999792, zoom: 5, layers: ['basemap','cartoLayer'], name: "3" },
|
||
scene4: { lat: 38.52995953, lng: -8.90001001, zoom: 7, layers: ['basemap','cartoLayer'], name: "4" }
|
||
};
|
||
// disable scroll wheel zoom
|
||
map.scrollWheelZoom.disable();
|
||
|
||
|
||
// add basemaps to map
|
||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||
maxZoom: 18
|
||
}).addTo(map);
|
||
|
||
// set CARTO client
|
||
const client = new carto.Client({
|
||
apiKey: 'default_public',
|
||
username: 'cartojs-test'
|
||
});
|
||
|
||
const source = new carto.source.SQL(`
|
||
SELECT * FROM ne_10m_populated_places_simple
|
||
WHERE adm0name IN ('Spain', 'Portugal', 'France')
|
||
`);
|
||
// define CartoCSS code to style data on map
|
||
const style = new carto.style.CartoCSS(`
|
||
#layer[adm0name = "Spain"]{
|
||
marker-fill: #fbb4ae;
|
||
marker-allow-overlap: true;
|
||
}
|
||
#layer[adm0name = "Portugal"]{
|
||
marker-fill: #ccebc5;
|
||
marker-allow-overlap: true;
|
||
}
|
||
#layer[adm0name = "France"]{
|
||
marker-fill: #b3cde3;
|
||
marker-allow-overlap: true;
|
||
}
|
||
|
||
`);
|
||
// create CARTO layer from source and style variables
|
||
const Cartolayer = new carto.layer.Layer(source, style);
|
||
|
||
// add CARTO layer to the client
|
||
client.addLayer(Cartolayer);
|
||
|
||
// define layers that will be used on the map
|
||
var layers = {
|
||
cartoLayer: {
|
||
layer: client.getLeafletLayer()
|
||
},
|
||
basemap: {
|
||
layer: L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png')
|
||
}
|
||
};
|
||
|
||
// initializaze storymap
|
||
$('#storymap').storymap({
|
||
scenes: scenes,
|
||
layers: layers,
|
||
baselayer: layers.basemap,
|
||
legend: true,
|
||
loader: true,
|
||
flyto: false,
|
||
scalebar: true,
|
||
scrolldown: true,
|
||
progressline: true,
|
||
navwidget: true,
|
||
createMap: function () {
|
||
let map = L.map($(".storymap-map")[0], { zoomControl: false }).setView([30, 0], 3);
|
||
// add basemap
|
||
this.baselayer.layer.addTo(map);
|
||
// add carto layer
|
||
layers.cartoLayer.layer.addTo(map)
|
||
return map;
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|