https://sbschool.org/js/frontend/map-locations.js

1function init_map_locations_map() {
2	$('#map-locations-map').remove();
3	$('#map-locations-map-settings').after('<div id="map-locations-map" class="map-locations-map"></div>');
4
5	var cloudmadeUrl = "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
6		cloudmadeAttribution = "Map data &copy; OpenStreetMap",
7		all_markers_lat_lng = [],
8		category_markers = [],
9		category_layer_groups = [],
10		all_markers_arr = [];
11
12	// mapbox override
13	cloudmadeUrl = "https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic29zaW1wbGVjbXMiLCJhIjoiY2o3cnRqZWZuMnRrYTJ5cGt5ZjBvY2hzMiJ9.khJlK_GOkz_YHpJjIo_YzA";
14	cloudmadeAttribution = "";
15
16	var latitude = $('#map-locations-map-settings').attr('data-latitude');
17	var longitude = $('#map-locations-map-settings').attr('data-longitude');
18	var pin_behavior = $('#map-locations-map-settings').attr('data-pin-behavior');
19
20	map = new L.map("map-locations-map").setView([latitude,longitude], 12);
21	if(scroll_behavior == 'none') map.scrollWheelZoom.disable();
22
23	var markers = new L.MarkerClusterGroup({
24		maxClusterRadius : 30
25	});
26
27	L.tileLayer(cloudmadeUrl, {
28		attribution: cloudmadeAttribution,
29		maxZoom: 18
30	}).addTo(map);
31
32	if(typeof raw_markers_arr !== 'undefined' && raw_markers_arr.length) {
33		for(i=0;i<raw_markers_arr.length;i++) {
34			addMarker(raw_markers_arr[i][0],raw_markers_arr[i][1],raw_markers_arr[i][2],raw_markers_arr[i][3],raw_markers_arr[i][4],raw_markers_arr[i][5],raw_markers_arr[i][6],raw_markers_arr[i][7],raw_markers_arr[i][8],raw_markers_arr[i][9]);
35		}
36	}
37
38	function addMarker(lat,lng,name,id,address,icon,categories,url,show_directions_button,short_description) {
39		all_markers_lat_lng.push([lat,lng]);
40
41		var marker = new L.marker(
42			[lat,lng],
43			{
44				icon: L.icon({
45					iconUrl: icon,
46					iconSize:     [29, 43], // size of the icon
47					//shadowSize:   [30, 36], // size of the shadow
48					iconAnchor:   [15, 43], // point of the icon which will correspond to markers location
49					//shadowAnchor: [15, 36],  // the same for the shadow
50					popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
51				})
52			}
53		);
54
55		marker.lat = lat;
56		marker.lng = lng;
57		// marker.categories = el.categories;
58		marker.name = name;
59		marker.id = id;
60		marker.address = address;
61
62		var infobox =	'<div class="infobox-content">' +
63						'	<a href="'+url+'" class="title">'+marker.name+'</a>' +
64						'	<div class="address">'+marker.address+'</div>' +
65						(short_description?'						<div class="short_description">'+short_description+'</div>':"") +
66						(categories?'	<div class="categories"><ul>'+categories+'</ul></div>':"") +
67						(show_directions_button?'<div class="button-wrap"><a href="https://www.google.com/maps?saddr=&daddr='+lat+','+lng+'" class="button" target="_blank">Get Directions</a></div>':"") +
68						'</div>';
69
70		all_markers_arr.push(marker);
71
72		markers.addLayer(marker);
73		marker.bindPopup(infobox);
74
75		marker.on("click",function(e) {
76			marker.openPopup(false);
77			map.panTo([e.target.lat, e.target.lng]);
78		});
79
80		if(pin_behavior == 'hover') {
81			var ct;
82			marker.on("mouseover",function(e) {
83				clearTimeout(ct);
84				ct = setTimeout(function() {
85					marker.openPopup(false);
86				},350);
87			});
88			marker.on("mouseout",function(e) {
89				clearTimeout(ct);
90				setTimeout(function() {
91					//marker.closePopup(false);
92				},500);
93			});
94		}
95	}
96
97	if(pin_behavior == 'hover') {
98		map.on("zoomstart",function(e) {
99			if(all_markers_arr.length) {
100				for(i=0;i<all_markers_arr.length;i++) all_markers_arr[i].closePopup(false);
101			}
102		});
103	}
104
105	if(all_markers_arr.length) {
106		markers.addTo(map);
107		setTimeout(function() {
108			map.fitBounds(all_markers_lat_lng);
109		},50);
110	}
111}