Commit 1b37c7f5 authored by Naoeltanuki's avatar Naoeltanuki
Browse files

tests de divers marqueurs + cartes

je vais faire le tri à la fin quand on aura les marqueurs qu'on aime :)
j'ai pas modifié la mini carte, je ferai aussi à la fin
parent 4494ba4b
This diff is collapsed.
......@@ -2,6 +2,7 @@ body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
font-family: Arial;
}
h1, h2, h3, h4, h5, h6 {
......
......@@ -5,26 +5,35 @@
<!--leaflet-->
<div id="mapid" style="height: 800px;"></div>
<div id="mapid" style="height: 600px;"></div>
<script>
/*setView(lat et lng du centre, combien de zoom - 1 = minimum qui affiche carte en entier)*/
var mymap = L.map('mapid').setView([42.783307, 31.514282], 3);
var mymap = L.map('mapid').setView([42.783307, 31.514282], 2);
//instanciation couche carte avec paramètres zoom
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
//L.tileLayer.provider('Stamen.Watercolor', {//'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 8,
maxNativeZoom: 8,
minZoom: 2,
wheelPxPerZoomLevel: 100,
panBy: 10,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
//attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
//attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
// '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
// 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
//provider('Stamen.Watercolor')
}).addTo(mymap);
//création classe marqueur avec taille etc pour éviter répétition de code
var MapIcon = L.Icon.extend({
options: {
......@@ -40,6 +49,17 @@
greenIcon = new MapIcon({iconUrl: 'static/img/marker/marker-icon-green.png'}),
greyIcon = new MapIcon({iconUrl: 'static/img/marker/marker-icon-grey.png'});
chart_blueIcon = new MapIcon({iconUrl: '{{ url_for('static', filename='img/marker/chart_blue.png')}}'});
chart_fullredIcon = new MapIcon({iconUrl: '{{ url_for('static', filename='img/marker/chart_fullred.png')}}'});
chart_pinkIcon = new MapIcon({iconUrl: '{{ url_for('static', filename='img/marker/chart_pink.png')}}'});
chart_redIcon = new MapIcon({iconUrl: '{{ url_for('static', filename='img/marker/chart_red.png')}}'});
icon1 = new MapIcon({iconUrl: 'static/img/marker/1.png'});
icon2 = new MapIcon({iconUrl: 'static/img/marker/2.png'});
icon3 = new MapIcon({iconUrl: 'static/img/marker/3.png'});
icon4 = new MapIcon({iconUrl: 'static/img/marker/4.png'});
//parcourir toutes les langues de la base de données pour placer chaque marqueur
{% for langue in prince_language %}
var lat = {{ langue.geolat|tojson }};
......@@ -68,19 +88,19 @@
{% if audioplayerList|length %}
//langue principale
{% if langue.varpron == 0 %}
{icon: greenIcon}
{icon: chart_redIcon}
//variante de prononciation
{% elif langue.varpron == 1 %}
{icon: blueIcon}
{icon: chart_fullredIcon}
//dialecte
{% elif langue.varpron == 2 %}
{icon: redIcon}
{icon: chart_pinkIcon}
{% endif %}
{% else %}
// les langues sans enregistrements en gris
{icon: greyIcon}
{icon: chart_blueIcon}
{% endif %}
).addTo(mymap).bindPopup('<b>' + french + '</b><br>' +
).addTo(mymap).bindPopup('<b>' + french + '</b><br>' +
//s'il existe au moins un audio, on met le premier(ou le dernier?), se lance automatiquement quand on clique dessus
{% if audioplayerList|length %}
'<audio controls src="{{ url_for('static', filename='audio/') }}' + audioplayerJS + '" autoplay = "autoplay"> Your browser does not support the <code>audio</code> element.</audio><p>' +
......@@ -107,7 +127,8 @@
var div = L.DomUtil.create('div', 'info-legend'),
types = ['sans enregistrement sonore', 'langue', 'variante de prononciation', 'dialecte'],
markers = ['static/img/marker/marker-icon-grey.png', 'static/img/marker/marker-icon-green.png','static/img/marker/marker-icon-blue.png', 'static/img/marker/marker-icon-red.png'];
// markers = [chart_blueIcon, chart_redIcon, chart_fullredIcon, chart_pinkIcon];
markers = ['{{ url_for('static', filename='img/marker/chart_blue.png')}}', '{{ url_for('static', filename='img/marker/chart_red.png')}}','{{ url_for('static', filename='img/marker/chart_fullred.png')}}', '{{ url_for('static', filename='img/marker/chart_pink.png')}}'];
for (var i = 0; i < types.length; i++) {
div.innerHTML +=
......@@ -119,8 +140,9 @@
legend.addTo(mymap);
</script>
<div class="padding-footer" style= "padding:50px">
<div class="padding-footer" style= "padding:20px">
</div>
......
......@@ -10,6 +10,7 @@
<link rel="icon" href="static/img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="static/js/leaflet-providers.js"></script>
{% if title %}
<title>Petit Prince - {{title}}</title>
{% else %}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment