asc/sportspress
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add search function to OpenStreetMap

Browse Source
This commit is contained in:
savvasha
2019-02-16 19:45:56 +02:00
parent edd09a60ce
commit 1d533fa5a7
6 changed files with 1535 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
assets/css/Control.Geocoder.css Normal file
View File

@@ -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;
}

BIN
assets/css/images/geocoder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
assets/css/images/throbber.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

1348
assets/js/Control.Geocoder.js Normal file
View File

File diff suppressed because it is too large Load Diff

14
includes/admin/class-sp-admin-assets.php
View File

@@ -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' );
}

55
includes/admin/class-sp-admin-taxonomies.php
View File

@@ -113,9 +113,9 @@ class SP_Admin_Taxonomies {
endif;
?>
<div class="form-field">
<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="">
<p><div class="sp-location-picker"></div></p>
<!--<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="">-->
<!--<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 ); ?>">