https://www.visitreykjanes.is/_moya/js/map/osm.js?v=1790280596

1if (typeof moya === 'undefined') moya = {};
2moya.map = window.moya.map || {};
3
4moya.map = $.extend(moya.map, {
5	createMap: function ($element, options) {
6		var opts = moya.map.getMapOptions(options);
7		var el = $element.get(0);
8
9		var map = L.map(el, opts).setView(opts.center, opts.zoom);
10		moya.map.addTileLayer(map, opts);
11
12		if (opts.useZoomControl) {
13			map.zoomControl.setPosition(opts.zoomControlPosition);
14		}
15
16		moya.map.osmMap = map;
17		moya.map.markers = this.addMarkers(opts.markers, map, opts);
18
19		if (opts.markers && opts.autoCenter) {
20			this.fitMarkers();
21		}
22		$element.data('moyaMap', map);
23		return map;
24	},
25
26	addTileLayer: function(map, opts) {
27		L.tileLayer(opts.tileLayer, {
28			attribution: opts.attribution
29		}).addTo(map);
30	},
31
32	addMarkers: function (markers, map, options) {
33		var m = [];
34		if (markers && markers.length > 0) {
35			var markerOpts = (options.markerOptions) ? options.markerOptions : {};
36			if (options.useMarkerCluster) {
37				var clusterGroup = L.markerClusterGroup(options.markerClusterOptions ? options.markerClusterOptions : {});
38			}
39			for (var i = 0; i < markers.length; i++) {
40				var marker = markers[i];
41				var position = this.getLatLng(marker.position);
42				var opts = {
43					markerOpts: $.extend(markerOpts, moya.map.createMarkerOptions(marker), {
44						icon: this.getMarkerIcon(marker.icon ? marker.icon : options.icon)
45					})
46				};
47
48				if (marker.info) {
49					opts.info = marker.info;
50				}
51				var markerObject = this.createMarker(map, position, opts);
52				if (options.useMarkerCluster) {
53					clusterGroup.addLayer(markerObject);
54				}
55				else {
56					markerObject.addTo(map);
57				}
58				m.push(markerObject);
59			}
60
61			if (options.useMarkerCluster) {
62				map.addLayer(clusterGroup);
63			}
64		}
65		return m;
66	},
67
68	fitMarkers: function() {
69		if (moya.map.markers.length > 0) {
70			var positions = [];
71			for (var i = 0; i < moya.map.markers.length; i++) {
72				positions.push(moya.map.markers[i].getLatLng());
73			}
74			var bound = L.latLngBounds(positions);
75			moya.map.osmMap.setView(bound.getCenter());
76			moya.map.osmMap.fitBounds(bound);
77		}
78	},
79
80	createMarker: function (map, position, opts) {
81		var marker = L.marker(position, opts.markerOpts);
82
83		if (opts.info) {
84			marker.bindPopup(opts.info, opts.markerOpts);
85		}
86		return marker;
87	},
88
89	moveMarker: function (marker, pos) {
90		marker.setLatLng(pos).update();
91	},
92
93	getDefaultOptions: function () {
94		return {
95			center: [65.66665729747450, -18.11641167892040],
96			useMarkerCluster: false,
97			autoCenter: true,
98			zoom: 7,
99			useZoomControl: true,
100			zoomControlPosition: 'bottomright',
101			scrollWheelZoom: false,
102			icon: {
103				iconUrl: 'https://static.stefna.is/map/marker-icon-red.png',
104				iconSize: [25, 41]
105			},
106			markerOpts: {}
107		}
108	},
109
110	createLatLng: function (lat, lng) {
111		return L.latLng(lat, lng);
112	},
113
114	getLatLngString: function (pos) {
115		return pos.lat + ',' + pos.lng;
116	},
117
118	getMarkerIcon: function(icon) {
119		if (typeof icon === 'string') {
120			icon = {
121				iconUrl: icon,
122				iconSize: [25, 41]
123			};
124		}
125		if (!icon.hasOwnProperty('iconAnchor') && icon.hasOwnProperty('iconSize') && icon.iconSize instanceof Array) {
126			icon.iconAnchor = [icon.iconSize[0] / 2, icon.iconSize[1]];
127		}
128		return L.icon(icon);
129	},
130
131	initEdit: function (selector, opts) {
132		var $selection = $(selector);
133		var isSingle = true;
134		var $lat = $selection.find('input.lat');
135		var $lng = $selection.find('input.lng');
136		var $zoom = $selection.find('input.zoom');
137		if ($lat.length > 0 && $lng.length > 0) {
138			isSingle = false;
139		}
140		if ($zoom.length === 0) {
141			$zoom = null;
142		}
143		else if ($zoom.val() !== '') {
144			opts.zoom = parseInt($zoom.val());
145		}
146		var defaultOptions = {
147			mapElement: {
148				cssClass: 'edit',
149				css: {
150					width: '400px',
151					height: '400px',
152					float: 'right'
153				}
154			},
155			markerOpts: {
156				draggable: true
157			},
158			search: {
159				enable: false,
160				inputId: ''
161			}
162		};
163
164		defaultOptions = $.extend({}, this.getDefaultOptions(), defaultOptions);
165		opts = $.extend({}, defaultOptions, opts);
166		if (opts.center && 'string' === typeof opts.center) {
167			opts.center = moya.map.getLatLng(opts.center);
168		}
169
170		const geosearchOptions = opts.geosearch || {};
171		delete opts.geosearch;
172		let $input = null;
173		var $mapParent = isSingle ? $selection.parent() : $selection;
174		var $map = moya.map.getMapElement($mapParent, opts.mapElement);
175		var map = this.createMap($map, opts);
176		var marker = this.createMarker(map, opts.center, opts);
177		marker.addTo(map);
178
179		if (opts.search.enable) {
180			$input = opts.search.inputId ? $('#' + opts.search.inputId) : null;
181			const search = new GeoSearch.GeoSearchControl({
182				style: 'bar',
183				position: 'topright',
184				searchLabel: geosearchOptions.placeholder,

185				provider: new GeoSearch.OpenStreetMapProvider({
186					params: {
187						addressdetails: 1,
188					}
189				}),
190				resultFormat: ({result}) => moya.map.getPlaceLabel(result)
191			});
192			// monky patch GeoSearchControl so that it works like we want
193			search.addMarker = function (place, query) {
194				moya.map.moveMarker(marker, [place.y, place.x]);
195				_updateText(moya.map.getPlaceLabel(place));
196
197				return marker;
198			}
199			map.addControl(search);
200			map.on('geosearch/showlocation', (e) => {
201				search.searchElement.input.value = moya.map.getPlaceLabel(e.location);
202			})
203			$('.leaflet-geosearch-bar form input').css('box-shadow', 'none');
204		}
205
206		if (opts.locate) {
207			map.on('locationfound', function(e) {
208				moya.map.moveMarker(marker, e.latlng)
209			});
210			map.on('locationerror', function(e) {
211				console.log(e);
212			});
213			map.locate({setView: true});
214		}
215
216		var _getLatLng = function () {
217			var pos = null;
218			if (isSingle) {
219				var latLng = $selection.val();
220				pos = moya.map.getLatLng(latLng);
221			}
222			else {
223				var lat = $lat.val();
224				var lng = $lng.val();
225				if (lat && lng) {
226					pos = moya.map.createLatLng(lat, lng);
227				}
228			}
229			return pos;
230		};
231		var _updateText = function (text) {
232			var pos = marker.getLatLng();
233			if (isSingle) {
234				$selection.val(moya.map.getLatLngString(pos));
235			}
236			else {
237				$lat.val(pos.lat);
238				$lng.val(pos.lng);
239			}
240			if (text && $input) {
241				$input.val(text);
242			}
243			_updateZoom();
244		};
245		var _updateMarker = function () {
246			var pos = _getLatLng();
247			if (pos) {
248				moya.map.moveMarker(marker, pos);
249
250				var bound = L.latLngBounds([
251					pos
252				]);

253				map.setView(bound.getCenter(), opts.zoom);
254			}
255		};
256		var _updateZoom = function () {
257			if ($zoom) {
258				$zoom.val(moya.map.osmMap.getZoom());
259			}
260		};
261
262		_updateMarker();
263
264		$selection.change(function () {
265			_updateMarker();
266		});
267
268		marker.on('dragend', function(e) {
269			_updateText();
270		});
271
272		map.on('zoomend', function() {
273			_updateZoom();
274		});
275	},
276
277	getPlaceLabel: function(place) {
278		const address = place.raw.address;
279		if (!address.house_number) {
280			return place.label;
281		}
282		return [
283			address.road + ' ' + address.house_number,
284			address.village,
285			address.suburb,
286			address.town,
287			address.country,
288		].filter(elm => {
289			return elm !== undefined;
290		}).join(', ');
291	}
292});