1(function($){ 2 3 4 /** 5 * initialize_field 6 * 7 * This function will initialize the $field. 8 * 9 * @date 30/11/17 10 * @since 5.6.5 11 * 12 * @param n/a 13 * @return n/a 14 */ 15 16 function initialize_field( $field ) { 17 18 if (typeof mapboxgl !== 'undefined') { 19 var field_id = $($field[0]).find('.acf-input .acf-mapbox').attr('id'); 20 var center_lng = $($field).find('.acf-hidden .input-lng').val(); 21 var center_lat = ($field).find('.acf-hidden .input-lat').val(); 22 var address = ($field).find('.acf-hidden .input-address').val(); 23 var zoom = $($field).find('.acf-hidden .input-zoom').val(); 24 var styles = $($field).find('.acf-hidden .input-styles').val(); 25 var enable_nav_control = $($field).find('.acf-hidden .input-enable_nav_control').val(); 26 var enable_marker = $($field).find('.acf-hidden .input-enable_marker').val(); 27 var enable_marker_popup = $($field).find('.acf-hidden .input-enable_marker_popup').val(); 28 29 // Create the map using all the values we gathered 30 if (typeof create_map !== 'undefined') { 31 create_map(field_id, center_lng, center_lat, address, zoom, styles, enable_nav_control, enable_marker, enable_marker_popup); 32 } 33 } 34 35 } 36 37 38 if( typeof acf.add_action !== 'undefined' ) { 39 40 /* 41 * ready & append (ACF5) 42 * 43 * These two events are called when a field element is ready for initialization. 44 * - ready: on page load similar to $(document).ready() 45 * - append: on new DOM elements appended via repeater field or other AJAX calls 46 * 47 * @param n/a 48 * @return n/a 49 */ 50 51 acf.add_action('load_field/type=Mapbox', initialize_field); 52 acf.add_action('append_field/type=Mapbox', initialize_field); 53 54 55 } else { 56 57 /* 58 * acf/setup_fields (ACF4) 59 * 60 * These single event is called when a field element is ready for initialization. 61 * 62 * @param event an event object. This can be ignored 63 * @param element An element which contains the new HTML 64 * @return n/a 65 */ 66 67 $(document).on('acf/setup_fields', function(e, postbox){ 68 69 // find all relevant fields 70 $(postbox).find('.field[data-field_type="mapbox_field_hoyry"]').each(function(){ 71 72 // initialize 73 initialize_field( $(this) ); 74 75 }); 76 77 }); 78 79 } 80 81 82})(jQuery); 83 84 85/** 86 * Custom Mapbox JS 87 */ 88 89/** 90 * Create the custom map 91 * 92 * @param id 93 * @param center_lat 94 * @param center_lng 95 * @param address 96 * @param zoom 97 * @param styles 98 * @param enable_nav_control 99 * @param enable_marker 100 * @param enable_marker_popup 101 */ 102 103var previous_marker = []; 104 105function create_map(id, center_lng, center_lat, address, zoom, styles, enable_nav_control, enable_marker, enable_marker_popup) { 106 107 // bail early if Mapbox required JS is not available 108 if (typeof mapboxgl === 'undefined') { 109 return; 110 } 111 112 mapboxgl.accessToken = mopboxgl_accestoken; 113 114 try { 115 // Create the map coordinates using the values from the form or from the user's selected location 116 var map = new mapboxgl.Map({ 117 container: 'map_' + id, 118 zoom: (zoom) ? zoom : '16', 119 center: [center_lng, center_lat], 120 style: 'mapbox://styles/mapbox/' + styles 121 }); 122 123 // Add the navigation control if it is set to be enabled ?> 124 if (enable_nav_control) { 125 let navControl = new mapboxgl.NavigationControl(); 126 map.addControl(navControl, 'top-left'); 127 } 128 129 // Add the geocoder to search for places using Mapbox Geocoding API 130 map.addControl(new MapboxGeocoder({ 131 accessToken: mapboxgl.accessToken, 132 placeholder: address 133 }).on('result', function (geocoder) { 134 let field_id = jQuery('#' + id); 135 let hidden_input_lng = jQuery('.input-lng', field_id); 136 let hidden_input_lat = jQuery('.input-lat', field_id); 137 let hidden_input_address = jQuery('.input-address', field_id); 138 let hidden_input_zoom = jQuery('.input-zoom', field_id); 139 let center_lng = (geocoder.result.center[0]) ? geocoder.result.center[0] : null; 140 let center_lat = (geocoder.result.center[1]) ? geocoder.result.center[1] : null; 141 let address = (geocoder.result.place_name) ? geocoder.result.place_name : null; 142 143 // Update the hidden elements using the values from the search result 144 if (hidden_input_lat.length > 0 && center_lat) { 145 // Update center_lat 146 hidden_input_lat.val(center_lat); 147 } 148 if (hidden_input_lng.length > 0 && center_lng) { 149 // Update center_lng 150 hidden_input_lng.val(center_lng) 151 } 152 if (hidden_input_address.length > 0 && address) { 153 // Update address 154 hidden_input_address.val(address) 155 } 156 157 // Create the marker on the searched location 158 if (center_lat && center_lng && address) { 159 create_marker(map, center_lng, center_lat, address, enable_marker, enable_marker_popup, id); 160 } 161 })); 162 163 // Create the map marker 164 create_marker(map, center_lng, center_lat, address, enable_marker, enable_marker_popup, id); 165 166 // Create marker on click 167 map.on('click', function(e){ 168 169 var click_lng = e.lngLat.lng; 170 var click_lat = e.lngLat.lat; 171 172 create_marker(map, click_lng, click_lat, address, enable_marker, enable_marker_popup, id); 173 174 let field_id = jQuery('#' + id); 175 let hidden_input_lng = jQuery('.input-lng', field_id); 176 let hidden_input_lat = jQuery('.input-lat', field_id); 177 let hidden_input_address = jQuery('.input-address', field_id); 178 hidden_input_lng.val(click_lng); 179 hidden_input_lat.val(click_lat); 180 hidden_input_address.val(''); 181 182 }); 183 184 jQuery('body').click(function(){ 185 map.resize(); 186 }); 187 188 jQuery(window).scroll(function (){ 189 map.resize(); 190 }); 191 192 } catch (error) { 193 // Log important error message 194 console.log(error); 195 } 196} 197 198 199/** 200 * Create the map marker 201 * 202 * @param map 203 * @param center_lat 204 * @param center_lng 205 * @param address 206 * @param enable_marker 207 * @param enable_marker_popup 208 */ 209function create_marker(map, center_lng, center_lat, address, enable_marker, enable_marker_popup, id) { 210 211 // Add the marker if it is set to be enabled 212 if (enable_marker) { 213 214 if( previous_marker[id] ) { 215 previous_marker[id].remove(); 216 } 217 218 setTimeout(function(){ 219 220 // This GeoJSON will be used to determine where the marker will appear on the map 221 let geoJSON = { 222 type: 'FeatureCollection', 223 features: [{ 224 type: 'Feature', 225 geometry: { 226 type: 'Point', 227 coordinates: [center_lng, center_lat] 228 }, 229 properties: { 230 description: address 231 } 232 }] 233 }; 234 235 // Add marker to the location
236 geoJSON.features.forEach(function (marker) { 237 // Create an HTML element for each feature 238 let el = document.createElement('div'); 239 el.className = 'marker'; 240 241 // Make a marker for the feature and add to the map 242 let map_marker = new mapboxgl.Marker( el, {draggable: true, offset: [0,20]} ).setLngLat( marker.geometry.coordinates ); 243 244 // Update coordinates on drag end 245 let field_id = jQuery('#' + id); 246 let hidden_input_lng = jQuery('.input-lng', field_id); 247 let hidden_input_lat = jQuery('.input-lat', field_id); 248 let hidden_input_address = jQuery('.input-address', field_id); 249 map_marker.on('dragend', function(){ 250 var lngLat = map_marker.getLngLat(); 251 hidden_input_lng.val(lngLat.lng); 252 hidden_input_lat.val(lngLat.lat); 253 hidden_input_address.val(''); 254 }); 255 256 // Set the popup if the marker popup is set to be enabled 257 if (enable_marker_popup) { 258 map_marker.setPopup(new mapboxgl.Popup({offset: 25}) // adds popup 259 .setHTML('<p>' + marker.properties.description + '</p>')); 260 } 261 262 // Add the marker to the map 263 map_marker.addTo(map); 264 265 previous_marker[id] = map_marker; 266 }); 267 268 }, 10); 269 } 270 271 return previous_marker; 272 273}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.