mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
151 lines
4.5 KiB
HTML
151 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ol-ext: control Legend</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="iconic font and scalable vector icons for OL3" />
|
|
<meta name="keywords" content="ol3, style, vector, font, fontawesome, icon, maki" />
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<link rel="stylesheet" href="../css/fontmaki.css" />
|
|
<link rel="stylesheet" href="../css/fontmaki2.css" />
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
|
|
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
|
|
<!-- ol-ext maki and fontawesome defintions used in fontsymbol -->
|
|
<script type="text/javascript" src="../../dist/extra/FontAwesomeDef.js"></script>
|
|
|
|
<style>
|
|
</style>
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<i clas="fa fa-car" style="position: absolute; top: -100px;"></i>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: control Legend</h1>
|
|
</a>
|
|
<div class="info">
|
|
The <i>ol/control/Legend</i> computes a legend based on <i>ol/style/Style</i> and draw it on the map.
|
|
<br/>
|
|
This example displays a legend for a statistical map.
|
|
</div>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map" style="width:600px; height:400px;"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Layers
|
|
var layer = new ol.layer.Geoportail({ layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' });
|
|
|
|
// The map
|
|
var map = new ol.Map ({
|
|
target: 'map',
|
|
view: new ol.View ({
|
|
zoom: 5,
|
|
center: [166326, 5992663]
|
|
}),
|
|
layers: [layer]
|
|
});
|
|
|
|
// Style function
|
|
function getFeatureStyle (feature) {
|
|
return [
|
|
new ol.style.Style ({
|
|
image: new ol.style.Circle({
|
|
radius: Math.sqrt(feature.get('pop')/Math.PI) / 50,
|
|
fill: new ol.style.Fill ({
|
|
color: [0,128,255,.3],
|
|
}),
|
|
stroke: new ol.style.Stroke ({
|
|
width: 1,
|
|
color: [0,128,255],
|
|
})
|
|
}),
|
|
geometry: function(feature) {
|
|
return new ol.geom.Point( ol.extent.getCenter(feature.getGeometry().getExtent() ))
|
|
}
|
|
}),
|
|
new ol.style.Style ({
|
|
stroke: new ol.style.Stroke ({
|
|
width: 1,
|
|
color: [255,128,0]
|
|
}),
|
|
fill: new ol.style.Fill ({
|
|
color: [255, 128, 0, 0.2]
|
|
})
|
|
})
|
|
];
|
|
}
|
|
|
|
// GeoJSON layer
|
|
var vectorSource = new ol.source.Vector({
|
|
url: '../data/departements.geojson',
|
|
format: new ol.format.GeoJSON(),
|
|
attributions: [ "© <a href='https://www.insee.fr'>INSEE</a>", "© <a href='https://www.data.gouv.fr/fr/datasets/geofla-r/'>IGN</a>" ],
|
|
});
|
|
|
|
map.addLayer(new ol.layer.Vector({
|
|
name: 'Departements',
|
|
source: vectorSource,
|
|
style: getFeatureStyle
|
|
}));
|
|
|
|
// Define a new legend
|
|
var legend = new ol.legend.Legend({
|
|
title: 'Legend',
|
|
style: getFeatureStyle,
|
|
margin: 0,
|
|
size: [50, 16]
|
|
});
|
|
map.addControl(new ol.control.Legend({
|
|
collapsible: false,
|
|
legend: legend
|
|
}));
|
|
|
|
// Add empty row to
|
|
legend.addItem({});
|
|
legend.addItem({ title:'2.600.000', properties: { pop: 2600000 }, typeGeom: 'Point', height: 8 });
|
|
legend.addItem({ properties: { pop: 1000000 }, typeGeom: 'Point', height: 8 });
|
|
legend.addItem({ title:'100.000', properties: { pop: 100000 }, typeGeom: 'Point', height: 8 });
|
|
|
|
// Display the style on select
|
|
var popup = new ol.Overlay.Popup({
|
|
popupClass: 'tooltips',
|
|
positioning: 'top-auto',
|
|
offsetBox: [-10,0,15,0]
|
|
});
|
|
map.addOverlay(popup);
|
|
var hover = new ol.interaction.Hover();
|
|
map.addInteraction(hover);
|
|
hover.on('leave', function(e) {
|
|
popup.hide();
|
|
});
|
|
hover.on('hover', function(e) {
|
|
popup.show(e.coordinate,
|
|
'<b>'+ e.feature.get('nom') + ' ('+e.feature.get('id')+')' +'</b>'
|
|
+'<br/>'
|
|
+e.feature.get('pop').toLocaleString()+' hab.')
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|