1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2
3 @if (Model.Item.TryGetGeolocation("DefaultMapCenter", out var defaultMapCenter)) {
4 var defaultLat = defaultMapCenter.Latitude.ToString().Replace(",", ".");
5 var defaultLng = defaultMapCenter.Longitude.ToString().Replace(",", ".");
6
7 if (defaultLat != "0.000000" && defaultLng != "0.000000") {
8 if (Pageview.AreaSettings.TryGetString("Google_APIKey", out string apiKey)) {
9 var locationList = Model.Item.GetUsers("UserGroup");
10 string iconPath = "/Files/Images/Icons/";
11
12 int initialZoomLevel = 4;
13 if (Model.Item.TryGetString("InitialZoomLevel", out string zoomlevel))
14 {
15 initialZoomLevel = Convert.ToInt32(zoomlevel);
16 }
17
18 string regionCode = "DK";
19 if (Model.Item.TryGetString("RegionCode", out string region))
20 {
21 regionCode = region;
22 }
23
24 <div class="grid position-relative">
25 <div class="g-col-12 g-col-lg-8 order-1" id="MapHeader">
26 @if (Model.Item.TryGetString("Title", out string title))
27 {
28 @title
29 }
30 </div>
31
32 <div class="g-col-12 g-col-lg-4 order-2 order-lg-2 position-relative js-map-search-column">
33 <form class="d-flex align-items-center w-100" id="MapSearch">
34 <span class="position-absolute top-0 icon-2 px-3 d-flex align-items-center h-100 search-icon">
35 @ReadFile(iconPath + "search.svg")
36 </span>
37
38 <input type="text" class="form-control rounded-pill py-2 ps-5 pe-3" placeholder="@Translate("Enter city, state or zip")" aria-label="@Translate("Enter city, state or zip")">
39 <button type="submit" class="d-none" id="MapSearchButton">@Translate("Search")</button>
40 </form>
41 </div>
42
43 <div class="g-col-12 g-col-lg-8 order-1 order-lg-4 js-map-column">
44 <div class="map" id="Map"></div>
45 </div>
46
47 @if (locationList.Count() > 1) {
48 <div class="g-col-12 g-col-lg-4 order-2 order-lg-3 js-locations-list-column">
49 <div class="locations-list">
50 <div class="list-group" id="LocationsList" aria-labelledby="MapHeader"></div>
51 </div>
52 </div>
53 } else if (Model.Item.TryGetString("Title", out string title2)) {
54 <div class="g-col-12 order-5 order-lg-3">
55 @title2
56 </div>
57 }
58 </div>
59
60 <script type="module">
61 @if (!Model.Item.GetBoolean("UseDefaultGoogleMapsStyling")) {
62 <text>
63 var mapIcon = {
64 url: "@(iconPath)marker.svg"
65 }
66
67 var mapStyle = [
68 {
69 "featureType": "administrative.land_parcel",
70 "elementType": "labels",
71 "stylers": [
72 {
73 "visibility": "off"
74 }
75 ]
76 },
77 {
78 "featureType": "landscape.man_made",
79 "elementType": "geometry.fill",
80 "stylers": [
81 {
82 "color": "#b0afb6"
83 }
84 ]
85 },
86 {
87 "featureType": "landscape.natural",
88 "elementType": "geometry.fill",
89 "stylers": [
90 {
91 "color": "#d7d7da"
92 }
93 ]
94 },
95 {
96 "featureType": "landscape.natural.terrain",
97 "elementType": "geometry.fill",
98 "stylers": [
99 {
100 "color": "#7ba78b"
101 }
102 ]
103 },
104 {
105 "featureType": "poi",
106 "elementType": "labels.text",
107 "stylers": [
108 {
109 "visibility": "off"
110 }
111 ]
112 },
113 {
114 "featureType": "poi",
115 "elementType": "geometry",
116 "stylers": [
117 {
118 "color": "#659577"
119 }
120 ]
121 },
122 {
123 "featureType": "poi.business",
124 "stylers": [
125 {
126 "visibility": "off"
127 }
128 ]
129 },
130 {
131 "featureType": "poi.park",
132 "elementType": "geometry.fill",
133 "stylers": [
134 {
135 "color": "#659577"
136 }
137 ]
138 },
139 {
140 "featureType": "road",
141 "elementType": "labels.icon",
142 "stylers": [
143 {
144 "visibility": "off"
145 }
146 ]
147 },
148 {
149 "featureType": "road.highway",
150 "elementType": "geometry.fill",
151 "stylers": [
152 {
153 "color": "#f5f5f5"
154 }
155 ]
156 },
157 {
158 "featureType": "road.highway",
159 "elementType": "geometry.stroke",
160 "stylers": [
161 {
162 "color": "#f0f0f0"
163 }
164 ]
165 },
166 {
167 "featureType": "road.local",
168 "elementType": "labels",
169 "stylers": [
170 {
171 "visibility": "off"
172 }
173 ]
174 },
175 {
176 "featureType": "transit",
177 "stylers": [
178 {
179 "visibility": "off"
180 }
181 ]
182 },
183 {
184 "featureType": "water",
185 "elementType": "geometry.fill",
186 "stylers": [
187 {
188 "color": "#8ea5c2"
189 }
190 ]
191 }
192 ];
193 </text>
194 } else {
195 <text>
196 var mapIcon = {};
197
198 var mapStyle = [{
199 featureType: 'poi',
200 elementType: 'labels.icon',
201 stylers: [
202 {
203 visibility: 'off'
204 }
205 ]
206 }];
207 </text>
208 }
209
210 var locations = [
211 @foreach (var location in locationList) {
212 <text>{
213 name: "@(location.Name)",
214 company: "@(location.Company)",
215 address: "@(location.Address)",
216 city: "@(location.City)",
217 zip: "@(location.Zip)",
218 state: "@(location.State)",
219 country: "@(location.Country)",
220 phone: "@(location.Phone)",
221 email: "@(location.Email)",
222 location: {
223 lat: @(location.Location.Lat.ToString().Replace(",", ".")),
224 lng: @(location.Location.Lng.ToString().Replace(",", "."))
225 }
226 },</text>
227 }
228 ];
229
230 var mapSettings = {
231 locations: locations,
232 mapStyle: mapStyle,
233 mapIcon: mapIcon,
234 initialZoomLevel: @initialZoomLevel,
235 defaultLat: @defaultLat,
236 defaultLng: @defaultLng,
237 regionCode: "@(regionCode)",
238 listItemLabel: "@Translate("View location")",
239 directionsLabel: "@Translate("Directions")",
240 noLocationsFoundLabel: "@Translate("No options available in the selected area")"
241 };
242
243 function initMap() {
244 swift.LocationsMap.init(mapSettings);
245 }
246
247 window.initMap = initMap;
248 </script>
249
250 <script async src="https://maps.googleapis.com/maps/api/js?key=@(apiKey)&loading=async&callback=initMap"></script>
251 }
252 else
253 {
254 <div class="alert alert-info" role="alert">
255 @Translate("Google maps API key is missing")
256 </div>
257 }
258 } else {
259 <div class="alert alert-info" role="alert">
260 @Translate("The map is not properly configured")
261 </div>
262 }
263 } else {
264 <div class="alert alert-info" role="alert">
265 @Translate("The map is not properly configured")
266 </div>
267 }
268
