https://francetopo.fr/lib/ui/style_pois_overpass.js

1// --------------------------------------------------------------------------------------------------------
2// --------------------------------------------------------------------------------------------------------
3// --------------------------------------------------------------------------------------------------------
4// --------------------------------------------------------------------------------------------------------
5// STYLE POIS
6// --------------------------------------------------------------------------------------------------------
7// --------------------------------------------------------------------------------------------------------
8// --------------------------------------------------------------------------------------------------------
9// --------------------------------------------------------------------------------------------------------
10'use strict';
11
12var labelPoisFontStyle = '24px ff-sans-bold';
13
14// ----------------------------------------------------
15// ----------------------------------------------------
16// POIS
17// ----------------------------------------------------
18// ----------------------------------------------------
19var stylePoisCacheArray = [];
20var stylePoisSelectedCacheArray = [];
21function _stylePoisFromOverpass(feature) {
22  // console.log('oui')
23  var stylePoisArray = stylePoisCacheArray[feature.getProperties().id];
24  // console.log(stylePoisArray)
25
26  if (stylePoisArray) {
27    return [stylePoisArray];
28  } else {
29    if (feature.get('icon')) {
30      var iconURL = feature.get('icon') || 'lib/icons/undefined/undefined.webp';
31      var poiFillColor = 'rgba(' + feature.get('poi_class_basecolor') + ', 0.3)';
32      var poiFillColorSelected = 'rgba(' + feature.get('poi_class_basecolor') + ', 0.3)';
33      var poiStrokeColor = 'rgba(' + feature.get('poi_class_basecolor') + ', 1.0)';
34      var poiLabel = feature.get('name');
35      // console.log(poiLabel)
36
37      stylePoisCacheArray[feature.getProperties().id] = new ol.style.Style({
38        zIndex: 64,
39        fill: new ol.style.Fill({
40          color: poiFillColor
41        }),
42        stroke: new ol.style.Stroke({
43          color: poiStrokeColor,
44          width: 1.5
45        }),
46        image: new ol.style.Icon({
47          opacity: 0.75,
48          src: iconURL,
49          scale: 1,
50          anchor: [0.5, 1],
51          anchorXUnits: 'fraction',
52          anchorYUnits: 'fraction'
53        })
54        // text: new ol.style.Text({
55        //   text: poiLabel,
56        //   font: labelPoisFontStyle,
57        //   textBaseline: 'bottom',
58        //   padding: [0, 0, 62, 0],
59        //   // offsetX: 0,
60        //   // offsetY: -62,
61        //   fill: new ol.style.Fill({
62        //     color: 'rgba(255,255,255,1.0)'
63        //   }),
64        //   stroke: new ol.style.Stroke({
65        //     color: 'rgba(0,0,0,1.0)',
66        //     width: 4,
67        //     lineJoin: 'round',
68        //     lineCap: 'round'
69        //   })
70        // })
71      });
72
73      stylePoisSelectedCacheArray[feature.getProperties().id] = new ol.style.Style({
74        zIndex: 64,
75        fill: new ol.style.Fill({
76          color: poiFillColorSelected
77        }),
78        stroke: new ol.style.Stroke({
79          color: poiStrokeColor,
80          width: 1.5
81        }),
82        image: new ol.style.Icon({
83          opacity: 1,
84          src: iconURL,
85          scale: 0.90,
86          anchor: [0.5, 1],
87          anchorXUnits: 'fraction',
88          anchorYUnits: 'fraction'
89        })
90        // text: new ol.style.Text({
91        //   text: poiLabel,
92        //   font: labelPoisFontStyle,
93        //   textBaseline: 'bottom',
94        //   padding: [0, 0, 62, 0],
95        //   // offsetX: 0,
96        //   // offsetY: -62,
97        //   fill: new ol.style.Fill({
98        //     color: 'rgba(255,255,255,1.0)'
99        //   }),
100        //   stroke: new ol.style.Stroke({
101        //     color: 'rgba(0,0,0,1.0)',
102        //     width: 4,
103        //     lineJoin: 'round',
104        //     lineCap: 'round'
105        //   })
106        // })
107      });
108    } else {
109      var poiFillColor = 'rgba(' + feature.get('poi_class_basecolor') + ', 0.3)';
110      var poiStrokeColor = 'rgba(' + feature.get('poi_class_basecolor') + ', 1.0)';
111
112      stylePoisCacheArray[feature.getProperties().id] = new ol.style.Style({
113        fill: new ol.style.Fill({

114          color: poiFillColor
115        }),
116        stroke: new ol.style.Stroke({
117          color: poiStrokeColor,
118          width: 2
119        })
120      });
121
122      stylePoisSelectedCacheArray[feature.getProperties().id] = new ol.style.Style({
123        fill: new ol.style.Fill({
124          color: poiFillColor
125        }),
126        stroke: new ol.style.Stroke({
127          color: poiStrokeColor,
128          width: 2
129        })
130      });
131    }
132    return [ stylePoisCacheArray[feature.getProperties().id] ];
133  }
134}
135
136// ----------------------------------------------------
137// ----------------------------------------------------
138// POIS SELECTED
139// ----------------------------------------------------
140// ----------------------------------------------------
141function _stylePoisFromOverpassSelected(feature) {
142  return [ stylePoisSelectedCacheArray[feature.getProperties().id] ];
143}