script pour établir une bdd Ãà partir d'un tsv avec différent format - retour accueil
git clone git://bebou.netlib.re/laradb
Log | Files | Refs |
map.sh (4727B)
1 #!/bin/sh
2
3 echo Building map.html
4
5 DIST="dist"
6
7 DB="src/db.tsv"
8 DB_CITIES="src/cities.tsv"
9
10 LINE_DB=1
11 LINE_CITIES=1
12
13 OUT=$(basename "$0" | sed "s/sh$/html/g")
14
15 entree(){
16 #echo "$line" | cut -d"," -f $1
17 echo "$line" | tsv-select -f $1
18 }
19
20 cat << % > $DIST/$OUT
21 <!DOCTYPE html>
22 <html>
23 <head>
24 <title>The Amateur feminist Library</title>
25 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
26 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
27 <meta name="HandheldFriendly" content="true">
28 <meta charset="utf-8">
29 <link rel="stylesheet" href="style.css">
30 <script src="script.js" defer></script>
31
32 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
33 <link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
34 <script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
35 </head>
36 <body>
37
38 $(cat src/templates/nav-main.html)
39 $(cat src/templates/nav.html)
40
41 <div id="map"></div>
42
43
44 <script>
45
46
47 mapboxgl.accessToken = 'pk.eyJ1IjoiYW1mZW1saWIiLCJhIjoiY20zYWNpdGllMDA5czJrcjM1MWR0dGpqdiJ9.f-jxHPeMLzwDmoE3zB41xA';
48
49 minZoom = 2;
50 maxZoom = 13;
51 pointMinSize = 5
52 pointMaxSize = 20
53
54 const map = new mapboxgl.Map({
55 container: 'map',
56 attributionControl: false,
57 style: 'mapbox://styles/amfemlib/cm3e6u0wx003801ph76od1v60',
58 center: [2.5, 46.35],
59 zoom: window.innerWidth > 699 ? 5 : 4,
60 minZoom: minZoom,
61 maxZoom: maxZoom
62 });
63
64 let allEvents = Array.from(document.querySelectorAll(".event")).map((element) => {
65 return {
66 lng: element.getAttribute("data-lng"),
67 lat: element.getAttribute("data-lat"),
68 title: element.getAttribute("data-title"),
69 url: element.getAttribute("data-url"),
70 }
71 });
72
73 const entries = [
74 $(while IFS= read -r line; do
75 cat <<- ENTRY
76 {title:"$(entree 2)",city:"$(entree 9)",startDate:"$(entree 5)", endDate:"$(entree 6)", noi:"$(entree 7)"}
77 ,
78 ENTRY
79 LINE=$(($LINE + 1))
80 done < $DB | sed '$ d'
81 )
82 ]
83
84 const coords = [
85 $(while IFS= read -r line; do
86 cat <<- COORDS
87 {city:"$(entree 1)",$(entree 2)}
88 ,
89 COORDS
90 LINE_CITIES=$(($LINE_CITIES + 1))
91 done < $DB_CITIES | sed '$ d' | sed '1,2d'
92 )
93 ]
94
95 const markerHtmlStyles = \`
96 background-color: var(--accent);
97 width: var(--marker-size);
98 height: var(--marker-size);
99 display: block;
100 position: relative;
101 border-radius:100%;
102 \`
103
104
105 const icon = L.divIcon({
106 className: "pin",
107 iconAnchor: [0, 24],
108 labelAnchor: [-6, 0],
109 popupAnchor: [0, -36],
110 html: \`<span style="\${markerHtmlStyles}" />\`
111 })
112
113 const popupOptions = {
114 'maxWidth': 'auto',
115 'className': 'popup'
116 }
117
118 const entriesByCity = entries.reduce((acc, entry) => {
119 if (!acc[entry.city]) acc[entry.city] = [];
120 acc[entry.city].push(entry);
121 return acc;
122 }, {});
123
124 const coordsWithEntries = coords.map(coord => ({
125 ...coord,
126 relatedEntries: entriesByCity[coord.city] || []
127 }));
128
129 console.log(coordsWithEntries)
130
131 const offsetDistance = .3;
132
133 function applyOffset(coord, index) {
134 const angle = index + (index * 45) * (Math.PI / 180);
135 const offsetLng = offsetDistance * Math.cos(angle);
136 const offsetLat = offsetDistance * Math.sin(angle);
137 return [coord[0] + offsetLng, coord[1] + offsetLat];
138 }
139
140 let i = 0
141 let spread = .1;
142 coordsWithEntries.forEach((data, index) => {
143 if(data.city != "" && data.lon != "" && data.lat != ""){
144 data.relatedEntries.forEach((entry) => {
145
146 const dataOffset = applyOffset([parseFloat(data.lon),parseFloat(data.lat)], index);
147
148 let markerInnerHTML = \`
149 <p>\${entry.title}</p>
150 <p>\${entry.city}</p>
151 <p>\${entry.startDate.replaceAll('-','.')}–\${entry.endDate.replaceAll('-','.')}</p>
152 <p>â„–\${entry.noi}</p>
153 \`
154
155 console.log(dataOffset)
156 if (Math.abs(dataOffset[0]) <= 180 && Math.abs(dataOffset[1]) <= 90) {
157 const markerPin = document.createElement('div')
158 const markerChild = document.createElement('section')
159 markerPin.appendChild(markerChild)
160 markerChild.innerHTML=markerInnerHTML
161 markerPin.classList.add('pin');
162 let deltaX = Math.random() * spread - (spread / 2);
163 let deltaY = Math.random() * spread - (spread / 2);
164 new mapboxgl.Marker(markerPin)
165 .setLngLat([parseFloat(data.lon) + deltaX, parseFloat(data.lat) + deltaY])
166 .addTo(map);
167 //.setLngLat(data.relatedEntries.length == 1 ? [parseFloat(data.lon), parseFloat(data.lat)] : dataOffset)
168 }
169 }
170 )}
171 });
172
173 </script>
174
175 $(cat src/templates/foot.html)
176 %
177