mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
186 lines
5.6 KiB
HTML
186 lines
5.6 KiB
HTML
<DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2015 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>Historical maps</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="Historical maps of IGN France" />
|
|
<meta name="keywords" content="openlayers, timemap, historical, IGN" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
|
|
<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<style>
|
|
#map
|
|
{ position:fixed;
|
|
top: 4em;
|
|
left: 0;
|
|
right:0;
|
|
bottom:0;
|
|
margin:0;
|
|
}
|
|
.info
|
|
{ position: fixed;
|
|
right: 0.5em;
|
|
top: 4em;
|
|
width: 300px;
|
|
z-index: 1;
|
|
}
|
|
.ol-timeline .ol-scroll {
|
|
height: 3em;
|
|
}
|
|
.ol-timeline .ol-feature {
|
|
transform: translateX(-50%);
|
|
}
|
|
.ol-timeline.ol-zoomhover .ol-scroll .ol-feature:hover,
|
|
.ol-timeline.ol-zoomhover .ol-scroll .ol-feature.ol-select {
|
|
transform: translateX(-50%) scale(2);
|
|
}
|
|
.date {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 1.5em;
|
|
background: rgba(255,255,255,.5);
|
|
transform: translateX(-50%);
|
|
font-size: 2rem;
|
|
margin-bottom: .05em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
<a href="../../index.html">
|
|
<h1>Historical map</h1>
|
|
</a>
|
|
<div class="info">
|
|
</div>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map"></div>
|
|
<div class='date'></div>
|
|
|
|
<script type="text/javascript">
|
|
// The map
|
|
var map = new ol.Map ({
|
|
target: 'map',
|
|
view: new ol.View({
|
|
zoom: 18,
|
|
center: [269889, 6248507]
|
|
}),
|
|
layers: [ new ol.layer.Tile({
|
|
source: new ol.source.XYZ({
|
|
url: 'https://wxs.ign.fr/pratique/geoportail/wmts?layer=ORTHOIMAGERY.ORTHOPHOTOS&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}}&TileRow={y}',
|
|
attributions: '<a href="https://www.geoportail.gouv.fr/">© IGN-Geoportail</a>'
|
|
})
|
|
})]
|
|
});
|
|
|
|
var histo = [
|
|
new ol.layer.Image({
|
|
name: "1924",
|
|
source: new ol.source.GeoImage({
|
|
"url": "../data/INGF/IGNF_PVA_1-0__1924-08-11__C2314-1541_1924_NP9_13007.jpg",
|
|
"imageCenter": [269892.63568257954,6248535.314175406],
|
|
"imageRotate": 3.1401654995959856,
|
|
"imageScale": [0.2670215718130227,0.2670215718130227]
|
|
})
|
|
}),
|
|
new ol.layer.Image({
|
|
name: "1931",
|
|
source: new ol.source.GeoImage({
|
|
"url": "../data/INGF/IGNF_PVA_1-0__1931__CCF0H-2361_1931_CAF_H-236_0003.jpg",
|
|
"imageCenter": [269917.11527094606,6248564.182321039],
|
|
"imageRotate": -1.4887750967772184,
|
|
"imageScale": [0.5916825640700804,0.5916825640700804]
|
|
})
|
|
}),
|
|
new ol.layer.Image({
|
|
name: "1934",
|
|
source: new ol.source.GeoImage({
|
|
"url": "../data/INGF/IGNF_PVA_1-0__1934__CCF0F-54B1_1934_CAF_F-54_0011.jpg",
|
|
"imageCenter": [269884.7536107674,6248543.448601998],
|
|
"imageRotate": -3.136726258048235,
|
|
"imageScale": [0.6375976820489188,0.6375976820489188]
|
|
})
|
|
}),
|
|
new ol.layer.Image({
|
|
name: "1936",
|
|
source: new ol.source.GeoImage({
|
|
"url": "../data/INGF/IGNF_PVA_1-0__1936-07-17__C2314-1501_1936_NP2_3010.jpg?raw=true",
|
|
"imageCenter": [269937.2514666198,6248523.183442762],
|
|
"imageRotate": -2.778805073301242,
|
|
"imageScale": [0.47915761377123306,0.47915761377123306]
|
|
})
|
|
}),
|
|
new ol.layer.Image({
|
|
name: "1944",
|
|
source: new ol.source.GeoImage({
|
|
"url": "../data/INGF/IGNF_PVA_1-0__1944-08-11__C2214-1091_1944_106G2130_3199.jpg?raw=true",
|
|
"imageCenter": [269998.3656072118,6248506.391443234],
|
|
"imageRotate": 2.362938966984174,
|
|
"imageScale": [0.473608899531087,0.4768894853951739]
|
|
})
|
|
}),
|
|
new ol.layer.Image({
|
|
name: "1950",
|
|
source: new ol.source.GeoImage({
|
|
"url": "../data/INGF/IGNF_PVA_1-0__1950-05-30__C2314-1851_1950_CDP3505_0242.jpg?raw=true",
|
|
"imageCenter": [269869.74402191263,6248527.808891151],
|
|
"imageRotate": -0.028335836913955807,
|
|
"imageScale": [0.3267839610026342,0.326366151015898]
|
|
})
|
|
})
|
|
];
|
|
|
|
histo.forEach(function(l) { map.addLayer(l); });
|
|
|
|
|
|
var tline = new ol.control.Timeline({
|
|
className: 'ol-pointer ol-zoomhover',
|
|
features: histo,
|
|
minDate: new Date('1923'),
|
|
maxDate: new Date('2019'),
|
|
getFeatureDate: function(l) { return l.get('name'); },
|
|
getHTML: function(l) { return l.get('name'); }
|
|
});
|
|
|
|
tline.on('scroll', function(e){
|
|
var layer, dmin = Infinity;
|
|
histo.forEach(function(l) {
|
|
var d = new Date(l.get('name'));
|
|
var dt = Math.abs(e.date-d);
|
|
if (dt < dmin) {
|
|
layer = l;
|
|
dmin = dt;
|
|
}
|
|
l.setVisible(false);
|
|
});
|
|
layer.setVisible(true);
|
|
$('.date').text(layer.get('name'));
|
|
});
|
|
tline.on('select', function(e) {
|
|
tline.setDate(e.feature);
|
|
});
|
|
|
|
map.addControl (tline);
|
|
tline.setDate(1924);
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |