Add search function to OpenStreetMap

assets/css/Control.Geocoder.css

@@ -0,0 +1,126 @@
+.leaflet-control-geocoder {
+  border-radius: 4px;
+  background: white;
+  min-width: 26px;
+  min-height: 26px;
+}
+
+.leaflet-touch .leaflet-control-geocoder {
+  min-width: 30px;
+  min-height: 30px;
+}
+
+.leaflet-control-geocoder a,
+.leaflet-control-geocoder .leaflet-control-geocoder-icon {
+  border-bottom: none;
+  display: inline-block;
+}
+
+.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
+  width: inherit;
+  height: inherit;
+  line-height: inherit;
+}
+
+.leaflet-control-geocoder a:hover,
+.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
+  border-bottom: none;
+  display: inline-block;
+}
+
+.leaflet-control-geocoder-form {
+  display: none;
+  vertical-align: middle;
+}
+.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
+  display: inline-block;
+}
+.leaflet-control-geocoder-form input {
+  font-size: 120%;
+  border: 0;
+  background-color: transparent;
+  width: 246px;
+}
+
+.leaflet-control-geocoder-icon {
+  border-radius: 4px;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background-color: white;
+  background-image: url(images/geocoder.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+
+.leaflet-touch .leaflet-control-geocoder-icon {
+  width: 30px;
+  height: 30px;
+}
+
+.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
+  background-image: url(images/throbber.gif);
+}
+
+.leaflet-control-geocoder-form-no-error {
+  display: none;
+}
+
+.leaflet-control-geocoder-form input:focus {
+  outline: none;
+}
+
+.leaflet-control-geocoder-form button {
+  display: none;
+}
+.leaflet-control-geocoder-error {
+  margin-top: 8px;
+  margin-left: 8px;
+  display: block;
+  color: #444;
+}
+.leaflet-control-geocoder-alternatives {
+  display: block;
+  width: 272px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.leaflet-control-geocoder-alternatives-minimized {
+  display: none;
+  height: 0;
+}
+.leaflet-control-geocoder-alternatives li {
+  white-space: nowrap;
+  display: block;
+  overflow: hidden;
+  padding: 5px 8px;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.leaflet-control-geocoder-alternatives li a,
+.leaflet-control-geocoder-alternatives li a:hover {
+  width: inherit;
+  height: inherit;
+  line-height: inherit;
+  background: inherit;
+  border-radius: inherit;
+  text-align: left;
+}
+
+.leaflet-control-geocoder-alternatives li:last-child {
+  border-bottom: none;
+}
+.leaflet-control-geocoder-alternatives li:hover,
+.leaflet-control-geocoder-selected {
+  background-color: #f5f5f5;
+}
+.leaflet-control-geocoder-address-detail {
+}
+.leaflet-control-geocoder-address-context {
+  color: #666;
+}

includes/admin/class-sp-admin-assets.php

@@ -37,7 +37,9 @@ class SP_Admin_Assets {
 		if ( in_array( $screen->id, sp_get_screen_ids() ) ) {
 			// Admin styles for SP pages only
 			wp_enqueue_style( 'jquery-chosen', SP()->plugin_url() . '/assets/css/chosen.css', array(), '1.1.0' );
+			//OpenStreetMaps
 			wp_enqueue_style( 'leaflet_stylesheet', SP()->plugin_url() . '/assets/css/leaflet.css', array(), '1.4.0' );
+			wp_enqueue_style( 'control-geocoder', SP()->plugin_url() . '/assets/css/Control.Geocoder.css', array() );
 			wp_enqueue_style( 'wp-color-picker' );
 			wp_enqueue_style( 'sportspress-admin', SP()->plugin_url() . '/assets/css/admin.css', array(), SP_VERSION );
 		} elseif ( strpos( $screen->id, 'sportspress-config' ) !== false ) {
@@ -85,12 +87,15 @@ class SP_Admin_Assets {
 
 		wp_register_script( 'jquery-fitvids', SP()->plugin_url() . '/assets/js/jquery.fitvids.js', array( 'jquery' ), '1.1', true );
 
-		wp_register_script( 'google-maps', '//tboy.co/maps_js' );
+		//wp_register_script( 'google-maps', '//tboy.co/maps_js' );
+		
+		//OpenStreetMaps
 		wp_register_script( 'leaflet_js', SP()->plugin_url() . '/assets/js/leaflet.js', array(), '1.4.0' );
+		wp_register_script( 'control-geocoder', SP()->plugin_url() . '/assets/js/Control.Geocoder.js', array( 'leaflet_js' ) );
 
-		wp_register_script( 'jquery-locationpicker', SP()->plugin_url() . '/assets/js/locationpicker.jquery.js', array( 'jquery', 'google-maps' ), '0.1.6', true );
+		//wp_register_script( 'jquery-locationpicker', SP()->plugin_url() . '/assets/js/locationpicker.jquery.js', array( 'jquery', 'google-maps' ), '0.1.6', true );
 
-		wp_register_script( 'sportspress-admin-locationpicker', SP()->plugin_url() . '/assets/js/admin/locationpicker.js', array( 'jquery', 'google-maps', 'jquery-locationpicker' ), SP_VERSION, true );
+		//wp_register_script( 'sportspress-admin-locationpicker', SP()->plugin_url() . '/assets/js/admin/locationpicker.js', array( 'jquery', 'google-maps', 'jquery-locationpicker' ), SP_VERSION, true );
 
 		wp_register_script( 'sportspress-admin-equationbuilder', SP()->plugin_url() . '/assets/js/admin/equationbuilder.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-draggable', 'jquery-ui-droppable' ), SP_VERSION, true );
 
@@ -134,8 +139,9 @@ class SP_Admin_Assets {
 
 	    // Edit venue pages
 	    if ( in_array( $screen->id, array( 'edit-sp_venue' ) ) ) {
-	    	wp_enqueue_script( 'google-maps' );
+	    	//wp_enqueue_script( 'google-maps' );
 	    	wp_enqueue_script( 'leaflet_js' );
+	    	wp_enqueue_script( 'control-geocoder' );
 	    	wp_enqueue_script( 'jquery-locationpicker' );
 	    	wp_enqueue_script( 'sportspress-admin-locationpicker' );
 		}

includes/admin/class-sp-admin-taxonomies.php

@@ -113,9 +113,9 @@ class SP_Admin_Taxonomies {
 		endif;
 		?>
 		<div class="form-field">
-			<label for="term_meta[sp_address]"><?php _e( 'Address', 'sportspress' ); ?></label>
+			<!--<label for="term_meta[sp_address]"><?php //_e( 'Address', 'sportspress' ); ?></label>
-			<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="">
+			<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="">-->
-			<p><div class="sp-location-picker"></div></p>
+			<!--<p><div class="sp-location-picker"></div></p>-->
 			<p><div id="mapDiv" style="width: 95%; height: 320px"></div></p>
 			<p><?php _e( "Drag the marker to the venue's location.", 'sportspress' ); ?></p>
 		</div>
@@ -124,15 +124,62 @@ class SP_Admin_Taxonomies {
 			var lat = <?php echo $latitude;?>;
 			var lon = <?php echo $longitude;?>;
 			// initialize map
-			map = L.map('mapDiv').setView([lat, lon], 15);
+			
+			var map = L.map('mapDiv').setView([lat, lon], 15);
 			// set map tiles source
 			L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
 			  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
 			  maxZoom: 15,
 			}).addTo(map);
+			
+			//L.Control.geocoder().addTo(map);
+			
+			var geocoder = L.Control.geocoder({
+				defaultMarkGeocode: true
+			})
+			.on('markgeocode', function(e) {
+				var center = e.geocode.center;
+				document.getElementById('term_meta[sp_latitude]').value = center.lat;
+				document.getElementById('term_meta[sp_longitude]').value = center.lng;
+			})
+			.addTo(map);
+
 			// add marker to the map
 			marker = L.marker([lat, lon],{draggable: true, autoPan: true}).addTo(map);
+			//get new coordinates and pass them to the fields
+			marker.on('dragend', function (e) {
+				document.getElementById('term_meta[sp_latitude]').value = marker.getLatLng().lat;
+				document.getElementById('term_meta[sp_longitude]').value = marker.getLatLng().lng;
+			});
 		</script>
+		<!--<script type="text/javascript">
+		var map = L.map('mapDiv').setView([0, 0], 2),
+			geocoder = L.Control.Geocoder.nominatim(),
+			control = L.Control.geocoder({
+				geocoder: geocoder
+			}).addTo(map),
+			marker;
+
+		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+		    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(map);
+
+		map.on('click', function(e) {
+			geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), function(results) {
+				var r = results[0];
+				if (r) {
+					if (marker) {
+						marker.
+							setLatLng(r.center).
+							setPopupContent(r.html || r.name).
+							openPopup();
+					} else {
+						marker = L.marker(r.center).bindPopup(r.name).addTo(map).openPopup();
+					}
+				}
+			})
+		})
+	</script>-->
 		<div class="form-field">
 			<label for="term_meta[sp_latitude]"><?php _e( 'Latitude', 'sportspress' ); ?></label>
 			<input type="text" class="sp-latitude" name="term_meta[sp_latitude]" id="term_meta[sp_latitude]" value="<?php echo esc_attr( $latitude ); ?>">