Full integration of OpenStreetMaps, removal of Google Maps code
This commit is contained in:
savvasha
@@ -1,16 +0,0 @@
|
||||
jQuery(document).ready(function($){
|
||||
$(".sp-location-picker").locationpicker({
|
||||
location: {
|
||||
latitude: Number($(".sp-latitude").val()),
|
||||
longitude: Number($(".sp-longitude").val())
|
||||
},
|
||||
radius: 0,
|
||||
inputBinding: {
|
||||
latitudeInput: $(".sp-latitude"),
|
||||
longitudeInput: $(".sp-longitude"),
|
||||
locationNameInput: $(".sp-address")
|
||||
},
|
||||
addressFormat: null,
|
||||
enableAutocomplete: true
|
||||
});
|
||||
});
|
||||
@@ -1,400 +0,0 @@
|
||||
/*! jquery-locationpicker - v0.1.16 - 2017-10-02 */
|
||||
(function($) {
|
||||
function GMapContext(domElement, options) {
|
||||
var _map = new google.maps.Map(domElement, options);
|
||||
var _marker = new google.maps.Marker({
|
||||
position: new google.maps.LatLng(54.19335, -3.92695),
|
||||
map: _map,
|
||||
title: "Drag Me",
|
||||
visible: options.markerVisible,
|
||||
draggable: options.markerDraggable,
|
||||
icon: options.markerIcon !== undefined ? options.markerIcon : undefined
|
||||
});
|
||||
return {
|
||||
map: _map,
|
||||
marker: _marker,
|
||||
circle: null,
|
||||
location: _marker.position,
|
||||
radius: options.radius,
|
||||
locationName: options.locationName,
|
||||
addressComponents: {
|
||||
formatted_address: null,
|
||||
addressLine1: null,
|
||||
addressLine2: null,
|
||||
streetName: null,
|
||||
streetNumber: null,
|
||||
city: null,
|
||||
district: null,
|
||||
state: null,
|
||||
stateOrProvince: null
|
||||
},
|
||||
settings: options.settings,
|
||||
domContainer: domElement,
|
||||
geodecoder: new google.maps.Geocoder()
|
||||
};
|
||||
}
|
||||
var GmUtility = {
|
||||
drawCircle: function(gmapContext, center, radius, options) {
|
||||
if (gmapContext.circle != null) {
|
||||
gmapContext.circle.setMap(null);
|
||||
}
|
||||
if (radius > 0) {
|
||||
radius *= 1;
|
||||
options = $.extend({
|
||||
strokeColor: "#0000FF",
|
||||
strokeOpacity: .35,
|
||||
strokeWeight: 2,
|
||||
fillColor: "#0000FF",
|
||||
fillOpacity: .2
|
||||
}, options);
|
||||
options.map = gmapContext.map;
|
||||
options.radius = radius;
|
||||
options.center = center;
|
||||
gmapContext.circle = new google.maps.Circle(options);
|
||||
return gmapContext.circle;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
setPosition: function(gMapContext, location, callback) {
|
||||
gMapContext.location = location;
|
||||
gMapContext.marker.setPosition(location);
|
||||
gMapContext.map.panTo(location);
|
||||
this.drawCircle(gMapContext, location, gMapContext.radius, {});
|
||||
if (gMapContext.settings.enableReverseGeocode) {
|
||||
this.updateLocationName(gMapContext, callback);
|
||||
} else {
|
||||
if (callback) {
|
||||
callback.call(this, gMapContext);
|
||||
}
|
||||
}
|
||||
},
|
||||
locationFromLatLng: function(lnlg) {
|
||||
return {
|
||||
latitude: lnlg.lat(),
|
||||
longitude: lnlg.lng()
|
||||
};
|
||||
},
|
||||
addressByFormat: function(addresses, format) {
|
||||
var result = null;
|
||||
for (var i = addresses.length - 1; i >= 0; i--) {
|
||||
if (addresses[i].types.indexOf(format) >= 0) {
|
||||
result = addresses[i];
|
||||
}
|
||||
}
|
||||
return result || addresses[0];
|
||||
},
|
||||
updateLocationName: function(gmapContext, callback) {
|
||||
gmapContext.geodecoder.geocode({
|
||||
latLng: gmapContext.marker.position
|
||||
}, function(results, status) {
|
||||
if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
|
||||
var address = GmUtility.addressByFormat(results, gmapContext.settings.addressFormat);
|
||||
gmapContext.locationName = address.formatted_address;
|
||||
gmapContext.addressComponents = GmUtility.address_component_from_google_geocode(address.address_components);
|
||||
} else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
|
||||
return setTimeout(function() {
|
||||
GmUtility.updateLocationName(gmapContext, callback);
|
||||
}, 1e3);
|
||||
}
|
||||
if (callback) {
|
||||
callback.call(this, gmapContext);
|
||||
}
|
||||
});
|
||||
},
|
||||
address_component_from_google_geocode: function(address_components) {
|
||||
var result = {};
|
||||
for (var i = address_components.length - 1; i >= 0; i--) {
|
||||
var component = address_components[i];
|
||||
if (component.types.indexOf("postal_code") >= 0) {
|
||||
result.postalCode = component.short_name;
|
||||
} else if (component.types.indexOf("street_number") >= 0) {
|
||||
result.streetNumber = component.short_name;
|
||||
} else if (component.types.indexOf("route") >= 0) {
|
||||
result.streetName = component.short_name;
|
||||
} else if (component.types.indexOf("locality") >= 0) {
|
||||
result.city = component.short_name;
|
||||
} else if (component.types.indexOf("sublocality") >= 0) {
|
||||
result.district = component.short_name;
|
||||
} else if (component.types.indexOf("administrative_area_level_1") >= 0) {
|
||||
result.stateOrProvince = component.short_name;
|
||||
} else if (component.types.indexOf("country") >= 0) {
|
||||
result.country = component.short_name;
|
||||
}
|
||||
}
|
||||
result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
|
||||
result.addressLine2 = "";
|
||||
return result;
|
||||
}
|
||||
};
|
||||
function isPluginApplied(domObj) {
|
||||
return getContextForElement(domObj) != undefined;
|
||||
}
|
||||
function getContextForElement(domObj) {
|
||||
return $(domObj).data("locationpicker");
|
||||
}
|
||||
function updateInputValues(inputBinding, gmapContext) {
|
||||
if (!inputBinding) return;
|
||||
var currentLocation = GmUtility.locationFromLatLng(gmapContext.marker.position);
|
||||
if (inputBinding.latitudeInput) {
|
||||
inputBinding.latitudeInput.val(currentLocation.latitude).change();
|
||||
}
|
||||
if (inputBinding.longitudeInput) {
|
||||
inputBinding.longitudeInput.val(currentLocation.longitude).change();
|
||||
}
|
||||
if (inputBinding.radiusInput) {
|
||||
inputBinding.radiusInput.val(gmapContext.radius).change();
|
||||
}
|
||||
if (inputBinding.locationNameInput) {
|
||||
inputBinding.locationNameInput.val(gmapContext.locationName).change();
|
||||
}
|
||||
}
|
||||
function setupInputListenersInput(inputBinding, gmapContext) {
|
||||
if (inputBinding) {
|
||||
if (inputBinding.radiusInput) {
|
||||
inputBinding.radiusInput.on("change", function(e) {
|
||||
var radiusInputValue = $(this).val();
|
||||
if (!e.originalEvent || isNaN(radiusInputValue)) {
|
||||
return;
|
||||
}
|
||||
gmapContext.radius = radiusInputValue;
|
||||
GmUtility.setPosition(gmapContext, gmapContext.location, function(context) {
|
||||
context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
|
||||
});
|
||||
});
|
||||
}
|
||||
if (inputBinding.locationNameInput && gmapContext.settings.enableAutocomplete) {
|
||||
var blur = false;
|
||||
gmapContext.autocomplete = new google.maps.places.Autocomplete(inputBinding.locationNameInput.get(0), gmapContext.settings.autocompleteOptions);
|
||||
google.maps.event.addListener(gmapContext.autocomplete, "place_changed", function() {
|
||||
blur = false;
|
||||
var place = gmapContext.autocomplete.getPlace();
|
||||
if (!place.geometry) {
|
||||
gmapContext.settings.onlocationnotfound(place.name);
|
||||
return;
|
||||
}
|
||||
GmUtility.setPosition(gmapContext, place.geometry.location, function(context) {
|
||||
updateInputValues(inputBinding, context);
|
||||
context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
|
||||
});
|
||||
});
|
||||
if (gmapContext.settings.enableAutocompleteBlur) {
|
||||
inputBinding.locationNameInput.on("change", function(e) {
|
||||
if (!e.originalEvent) {
|
||||
return;
|
||||
}
|
||||
blur = true;
|
||||
});
|
||||
inputBinding.locationNameInput.on("blur", function(e) {
|
||||
if (!e.originalEvent) {
|
||||
return;
|
||||
}
|
||||
setTimeout(function() {
|
||||
var address = $(inputBinding.locationNameInput).val();
|
||||
if (address.length > 5 && blur) {
|
||||
blur = false;
|
||||
gmapContext.geodecoder.geocode({
|
||||
address: address
|
||||
}, function(results, status) {
|
||||
if (status == google.maps.GeocoderStatus.OK && results && results.length) {
|
||||
GmUtility.setPosition(gmapContext, results[0].geometry.location, function(context) {
|
||||
updateInputValues(inputBinding, context);
|
||||
context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1e3);
|
||||
});
|
||||
}
|
||||
}
|
||||
if (inputBinding.latitudeInput) {
|
||||
inputBinding.latitudeInput.on("change", function(e) {
|
||||
var latitudeInputValue = $(this).val();
|
||||
if (!e.originalEvent || isNaN(latitudeInputValue)) {
|
||||
return;
|
||||
}
|
||||
GmUtility.setPosition(gmapContext, new google.maps.LatLng(latitudeInputValue, gmapContext.location.lng()), function(context) {
|
||||
context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
|
||||
updateInputValues(gmapContext.settings.inputBinding, gmapContext);
|
||||
});
|
||||
});
|
||||
}
|
||||
if (inputBinding.longitudeInput) {
|
||||
inputBinding.longitudeInput.on("change", function(e) {
|
||||
var longitudeInputValue = $(this).val();
|
||||
if (!e.originalEvent || isNaN(longitudeInputValue)) {
|
||||
return;
|
||||
}
|
||||
GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.location.lat(), longitudeInputValue), function(context) {
|
||||
context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
|
||||
updateInputValues(gmapContext.settings.inputBinding, gmapContext);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
function autosize(gmapContext) {
|
||||
google.maps.event.trigger(gmapContext.map, "resize");
|
||||
setTimeout(function() {
|
||||
gmapContext.map.setCenter(gmapContext.marker.position);
|
||||
}, 300);
|
||||
}
|
||||
function updateMap(gmapContext, $target, options) {
|
||||
var settings = $.extend({}, $.fn.locationpicker.defaults, options), latNew = settings.location.latitude, lngNew = settings.location.longitude, radiusNew = settings.radius, latOld = gmapContext.settings.location.latitude, lngOld = gmapContext.settings.location.longitude, radiusOld = gmapContext.settings.radius;
|
||||
if (latNew == latOld && lngNew == lngOld && radiusNew == radiusOld) return;
|
||||
gmapContext.settings.location.latitude = latNew;
|
||||
gmapContext.settings.location.longitude = lngNew;
|
||||
gmapContext.radius = radiusNew;
|
||||
GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.settings.location.latitude, gmapContext.settings.location.longitude), function(context) {
|
||||
setupInputListenersInput(gmapContext.settings.inputBinding, gmapContext);
|
||||
context.settings.oninitialized($target);
|
||||
});
|
||||
}
|
||||
$.fn.locationpicker = function(options, params) {
|
||||
if (typeof options == "string") {
|
||||
var _targetDomElement = this.get(0);
|
||||
if (!isPluginApplied(_targetDomElement)) return;
|
||||
var gmapContext = getContextForElement(_targetDomElement);
|
||||
switch (options) {
|
||||
case "location":
|
||||
if (params == undefined) {
|
||||
var location = GmUtility.locationFromLatLng(gmapContext.location);
|
||||
location.radius = gmapContext.radius;
|
||||
location.name = gmapContext.locationName;
|
||||
return location;
|
||||
} else {
|
||||
if (params.radius) {
|
||||
gmapContext.radius = params.radius;
|
||||
}
|
||||
GmUtility.setPosition(gmapContext, new google.maps.LatLng(params.latitude, params.longitude), function(gmapContext) {
|
||||
updateInputValues(gmapContext.settings.inputBinding, gmapContext);
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case "subscribe":
|
||||
if (params == undefined) {
|
||||
return null;
|
||||
} else {
|
||||
var event = params.event;
|
||||
var callback = params.callback;
|
||||
if (!event || !callback) {
|
||||
console.error('LocationPicker: Invalid arguments for method "subscribe"');
|
||||
return null;
|
||||
}
|
||||
google.maps.event.addListener(gmapContext.map, event, callback);
|
||||
}
|
||||
break;
|
||||
|
||||
case "map":
|
||||
if (params == undefined) {
|
||||
var locationObj = GmUtility.locationFromLatLng(gmapContext.location);
|
||||
locationObj.formattedAddress = gmapContext.locationName;
|
||||
locationObj.addressComponents = gmapContext.addressComponents;
|
||||
return {
|
||||
map: gmapContext.map,
|
||||
marker: gmapContext.marker,
|
||||
location: locationObj
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
case "autosize":
|
||||
autosize(gmapContext);
|
||||
return this;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return this.each(function() {
|
||||
var $target = $(this);
|
||||
if (isPluginApplied(this)) {
|
||||
updateMap(getContextForElement(this), $(this), options);
|
||||
return;
|
||||
}
|
||||
var settings = $.extend({}, $.fn.locationpicker.defaults, options);
|
||||
var gmapContext = new GMapContext(this, $.extend({}, {
|
||||
zoom: settings.zoom,
|
||||
center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude),
|
||||
mapTypeId: settings.mapTypeId,
|
||||
mapTypeControl: false,
|
||||
styles: settings.styles,
|
||||
disableDoubleClickZoom: false,
|
||||
scrollwheel: settings.scrollwheel,
|
||||
streetViewControl: false,
|
||||
radius: settings.radius,
|
||||
locationName: settings.locationName,
|
||||
settings: settings,
|
||||
autocompleteOptions: settings.autocompleteOptions,
|
||||
addressFormat: settings.addressFormat,
|
||||
draggable: settings.draggable,
|
||||
markerIcon: settings.markerIcon,
|
||||
markerDraggable: settings.markerDraggable,
|
||||
markerVisible: settings.markerVisible
|
||||
}, settings.mapOptions));
|
||||
$target.data("locationpicker", gmapContext);
|
||||
function displayMarkerWithSelectedArea() {
|
||||
GmUtility.setPosition(gmapContext, gmapContext.marker.position, function(context) {
|
||||
var currentLocation = GmUtility.locationFromLatLng(gmapContext.location);
|
||||
updateInputValues(gmapContext.settings.inputBinding, gmapContext);
|
||||
context.settings.onchanged.apply(gmapContext.domContainer, [ currentLocation, context.radius, true ]);
|
||||
});
|
||||
}
|
||||
if (settings.markerInCenter) {
|
||||
gmapContext.map.addListener("bounds_changed", function() {
|
||||
if (!gmapContext.marker.dragging) {
|
||||
gmapContext.marker.setPosition(gmapContext.map.center);
|
||||
updateInputValues(gmapContext.settings.inputBinding, gmapContext);
|
||||
}
|
||||
});
|
||||
gmapContext.map.addListener("idle", function() {
|
||||
if (!gmapContext.marker.dragging) {
|
||||
displayMarkerWithSelectedArea();
|
||||
}
|
||||
});
|
||||
}
|
||||
google.maps.event.addListener(gmapContext.marker, "drag", function(event) {
|
||||
updateInputValues(gmapContext.settings.inputBinding, gmapContext);
|
||||
});
|
||||
google.maps.event.addListener(gmapContext.marker, "dragend", function(event) {
|
||||
displayMarkerWithSelectedArea();
|
||||
});
|
||||
GmUtility.setPosition(gmapContext, new google.maps.LatLng(settings.location.latitude, settings.location.longitude), function(context) {
|
||||
updateInputValues(settings.inputBinding, gmapContext);
|
||||
setupInputListenersInput(settings.inputBinding, gmapContext);
|
||||
context.settings.oninitialized($target);
|
||||
});
|
||||
});
|
||||
};
|
||||
$.fn.locationpicker.defaults = {
|
||||
location: {
|
||||
latitude: 40.7324319,
|
||||
longitude: -73.82480777777776
|
||||
},
|
||||
locationName: "",
|
||||
radius: 500,
|
||||
zoom: 15,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
styles: [],
|
||||
mapOptions: {},
|
||||
scrollwheel: true,
|
||||
inputBinding: {
|
||||
latitudeInput: null,
|
||||
longitudeInput: null,
|
||||
radiusInput: null,
|
||||
locationNameInput: null
|
||||
},
|
||||
enableAutocomplete: false,
|
||||
enableAutocompleteBlur: false,
|
||||
autocompleteOptions: null,
|
||||
addressFormat: "postal_code",
|
||||
enableReverseGeocode: true,
|
||||
draggable: true,
|
||||
onchanged: function(currentLocation, radius, isMarkerDropped) {},
|
||||
onlocationnotfound: function(locationName) {},
|
||||
oninitialized: function(component) {},
|
||||
markerIcon: undefined,
|
||||
markerDraggable: true,
|
||||
markerVisible: true
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -87,16 +87,10 @@ 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' );
|
||||
|
||||
//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( '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 );
|
||||
|
||||
wp_register_script( 'sportspress-admin-colorpicker', SP()->plugin_url() . '/assets/js/admin/colorpicker.js', array( 'jquery', 'wp-color-picker', 'iris' ), SP_VERSION, true );
|
||||
@@ -139,7 +133,6 @@ class SP_Admin_Assets {
|
||||
|
||||
// Edit venue pages
|
||||
if ( in_array( $screen->id, array( 'edit-sp_venue' ) ) ) {
|
||||
//wp_enqueue_script( 'google-maps' );
|
||||
wp_enqueue_script( 'leaflet_js' );
|
||||
wp_enqueue_script( 'control-geocoder' );
|
||||
wp_enqueue_script( 'jquery-locationpicker' );
|
||||
|
||||
@@ -105,6 +105,7 @@ class SP_Admin_Taxonomies {
|
||||
$term_meta = get_option( "taxonomy_$t_id" );
|
||||
$latitude = sp_array_value( $term_meta, 'sp_latitude', '40.7324319' );
|
||||
$longitude = sp_array_value( $term_meta, 'sp_longitude', '-73.82480799999996' );
|
||||
$address = sp_array_value( $term_meta, 'sp_address', '' );
|
||||
endif;
|
||||
// Sanitize latitude and longitude, fallback to default.
|
||||
if( ! is_numeric( $latitude) || ! is_numeric( $longitude) ):
|
||||
@@ -113,73 +114,65 @@ 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>-->
|
||||
<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>
|
||||
<script>
|
||||
// position we will use later
|
||||
var lat = <?php echo $latitude;?>;
|
||||
var lon = <?php echo $longitude;?>;
|
||||
// initialize map
|
||||
|
||||
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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
|
||||
maxZoom: 15,
|
||||
//Initialize the map and add the Search control box
|
||||
var map = L.map('mapDiv').setView([<?php echo $latitude;?>, <?php echo $longitude;?>], 15),
|
||||
geocoder = L.Control.Geocoder.nominatim(),
|
||||
control = L.Control.geocoder({
|
||||
geocoder: geocoder,
|
||||
collapsed: false,
|
||||
defaultMarkGeocode: false
|
||||
}).addTo(map),
|
||||
//Add a marker to use from the begining
|
||||
marker = L.marker([<?php echo $latitude;?>, <?php echo $longitude;?>],{draggable: true, autoPan: true}).addTo(map);
|
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
//L.Control.geocoder().addTo(map);
|
||||
//Pass the values to the fields after dragging
|
||||
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;
|
||||
geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
|
||||
var r = results[0];
|
||||
if (r) {
|
||||
document.getElementById('term_meta[sp_address]').value = r.name;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
var geocoder = L.Control.geocoder({
|
||||
defaultMarkGeocode: true
|
||||
})
|
||||
.on('markgeocode', function(e) {
|
||||
//After searching
|
||||
control.on('markgeocode', function(e) {
|
||||
var center = e.geocode.center;
|
||||
var address = e.geocode.name;
|
||||
map.setView([center.lat, center.lng], 15); //Center map to the new place
|
||||
map.removeLayer(marker); //Remove previous marker
|
||||
marker = L.marker([center.lat, center.lng],{draggable: true, autoPan: true}).addTo(map); //Add new marker to use
|
||||
//Pass the values to the fields after searching
|
||||
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;
|
||||
});
|
||||
document.getElementById('term_meta[sp_address]').value = address;
|
||||
//Pass the values to the fields after dragging
|
||||
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;
|
||||
geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
|
||||
var r = results[0];
|
||||
if (r) {
|
||||
document.getElementById('term_meta[sp_address]').value = r.name;
|
||||
}
|
||||
})
|
||||
});
|
||||
}).addTo(map);
|
||||
</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: '© <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_address]"><?php _e( 'Address', 'sportspress' ); ?></label>
|
||||
<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="<?php echo esc_attr( $address ); ?>">
|
||||
</div>
|
||||
<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 ); ?>">
|
||||
@@ -199,27 +192,87 @@ class SP_Admin_Taxonomies {
|
||||
*/
|
||||
public function edit_venue_fields( $term ) {
|
||||
$t_id = $term->term_id;
|
||||
$term_meta = get_option( "taxonomy_$t_id" ); ?>
|
||||
$term_meta = get_option( "taxonomy_$t_id" );
|
||||
$latitude = is_numeric( esc_attr( $term_meta['sp_latitude'] ) ) ? esc_attr( $term_meta['sp_latitude'] ) : '';
|
||||
$longitude = is_numeric( esc_attr( $term_meta['sp_longitude'] ) ) ? esc_attr( $term_meta['sp_longitude'] ) : '';
|
||||
$address = esc_attr( $term_meta['sp_address'] ) ? esc_attr( $term_meta['sp_address'] ) : '';
|
||||
?>
|
||||
<tr class="form-field">
|
||||
<td colspan="2">
|
||||
<p><div id="mapDiv" style="width: 95%; height: 320px"></div></p>
|
||||
<p class="description"><?php _e( "Drag the marker to the venue's location.", 'sportspress' ); ?></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form-field">
|
||||
<th scope="row" valign="top"><label for="term_meta[sp_address]"><?php _e( 'Address', 'sportspress' ); ?></label></th>
|
||||
<td>
|
||||
<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="<?php echo esc_attr( $term_meta['sp_address'] ) ? esc_attr( $term_meta['sp_address'] ) : ''; ?>">
|
||||
<p><div class="sp-location-picker"></div></p>
|
||||
<p class="description"><?php _e( "Drag the marker to the venue's location.", 'sportspress' ); ?></p>
|
||||
<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="<?php echo $address; ?>">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form-field">
|
||||
<th scope="row" valign="top"><label for="term_meta[sp_latitude]"><?php _e( 'Latitude', 'sportspress' ); ?></label></th>
|
||||
<td>
|
||||
<input type="text" class="sp-latitude" name="term_meta[sp_latitude]" id="term_meta[sp_latitude]" value="<?php echo is_numeric( esc_attr( $term_meta['sp_latitude'] ) ) ? esc_attr( $term_meta['sp_latitude'] ) : ''; ?>">
|
||||
<input type="text" class="sp-latitude" name="term_meta[sp_latitude]" id="term_meta[sp_latitude]" value="<?php echo $latitude; ?>">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form-field">
|
||||
<th scope="row" valign="top"><label for="term_meta[sp_longitude]"><?php _e( 'Longitude', 'sportspress' ); ?></label></th>
|
||||
<td>
|
||||
<input type="text" class="sp-longitude" name="term_meta[sp_longitude]" id="term_meta[sp_longitude]" value="<?php echo is_numeric( esc_attr( $term_meta['sp_longitude'] ) ) ? esc_attr( $term_meta['sp_longitude'] ) : ''; ?>">
|
||||
<input type="text" class="sp-longitude" name="term_meta[sp_longitude]" id="term_meta[sp_longitude]" value="<?php echo $longitude; ?>">
|
||||
</td>
|
||||
</tr>
|
||||
<script>
|
||||
//Initialize the map and add the Search control box
|
||||
var map = L.map('mapDiv').setView([<?php echo $latitude;?>, <?php echo $longitude;?>], 15),
|
||||
geocoder = L.Control.Geocoder.nominatim(),
|
||||
control = L.Control.geocoder({
|
||||
geocoder: geocoder,
|
||||
collapsed: false,
|
||||
defaultMarkGeocode: false
|
||||
}).addTo(map),
|
||||
//Add a marker to use from the begining
|
||||
marker = L.marker([<?php echo $latitude;?>, <?php echo $longitude;?>],{draggable: true, autoPan: true}).addTo(map);
|
||||
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
//Pass the values to the fields after dragging
|
||||
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;
|
||||
geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
|
||||
var r = results[0];
|
||||
if (r) {
|
||||
document.getElementById('term_meta[sp_address]').value = r.name;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//After searching
|
||||
control.on('markgeocode', function(e) {
|
||||
var center = e.geocode.center;
|
||||
var address = e.geocode.name;
|
||||
map.setView([center.lat, center.lng], 15); //Center map to the new place
|
||||
map.removeLayer(marker); //Remove previous marker
|
||||
marker = L.marker([center.lat, center.lng],{draggable: true, autoPan: true}).addTo(map); //Add new marker to use
|
||||
//Pass the values to the fields after searching
|
||||
document.getElementById('term_meta[sp_latitude]').value = center.lat;
|
||||
document.getElementById('term_meta[sp_longitude]').value = center.lng;
|
||||
document.getElementById('term_meta[sp_address]').value = address;
|
||||
//Pass the values to the fields after dragging
|
||||
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;
|
||||
geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
|
||||
var r = results[0];
|
||||
if (r) {
|
||||
document.getElementById('term_meta[sp_address]').value = r.name;
|
||||
}
|
||||
})
|
||||
});
|
||||
}).addTo(map);
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
@@ -181,7 +181,7 @@ class SP_Settings_Events extends SP_Settings_Page {
|
||||
),
|
||||
|
||||
array(
|
||||
'title' => __( 'Google Maps', 'sportspress' ),
|
||||
'title' => __( 'OpenStreetMaps', 'sportspress' ),
|
||||
'desc' => __( 'Display maps', 'sportspress' ),
|
||||
'id' => 'sportspress_event_show_maps',
|
||||
'default' => 'yes',
|
||||
|
||||
@@ -73,6 +73,10 @@ class SP_Frontend_Scripts {
|
||||
wp_enqueue_script( 'jquery' );
|
||||
wp_enqueue_script( 'jquery-datatables', plugin_dir_url( SP_PLUGIN_FILE ) .'assets/js/jquery.dataTables.min.js', array( 'jquery' ), '1.10.4', true );
|
||||
wp_enqueue_script( 'sportspress', plugin_dir_url( SP_PLUGIN_FILE ) .'assets/js/sportspress.js', array( 'jquery' ), SP()->version, true );
|
||||
|
||||
if( is_single() && get_post_type()=='sp_event' ){
|
||||
wp_enqueue_script( 'leaflet_js', SP()->plugin_url() . '/assets/js/leaflet.js', array(), '1.4.0' );
|
||||
}
|
||||
|
||||
// Localize scripts
|
||||
wp_localize_script( 'sportspress', 'localized_strings', array( 'days' => __( 'days', 'sportspress' ), 'hrs' => __( 'hrs', 'sportspress' ), 'mins' => __( 'mins', 'sportspress' ), 'secs' => __( 'secs', 'sportspress' ), 'previous' => __( 'Previous', 'sportspress' ), 'next' => __( 'Next', 'sportspress' ) ) );
|
||||
@@ -100,6 +104,10 @@ class SP_Frontend_Scripts {
|
||||
foreach ( $enqueue_styles as $handle => $args )
|
||||
wp_enqueue_style( $handle, $args['src'], $args['deps'], $args['version'], $args['media'] );
|
||||
endif;
|
||||
|
||||
if( is_single() && get_post_type()=='sp_event' ){
|
||||
wp_enqueue_style( 'leaflet_stylesheet', SP()->plugin_url() . '/assets/css/leaflet.css', array(), '1.4.0' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -25,15 +25,31 @@ if ( 'satellite' !== $maptype ) $maptype = 'roadmap';
|
||||
|
||||
if ( $latitude != null && $longitude != null ):
|
||||
?>
|
||||
<div class="sp-google-map-container">
|
||||
<iframe
|
||||
class="sp-google-map<?php if ( is_tax( 'sp_venue' ) ): ?> sp-venue-map<?php endif; ?>"
|
||||
width="600"
|
||||
height="320"
|
||||
frameborder="0" style="border:0"
|
||||
src="//tboy.co/maps_embed?q=<?php echo $address; ?>&center=<?php echo $latitude; ?>,<?php echo $longitude; ?>&zoom=<?php echo $zoom; ?>&maptype=<?php echo $maptype; ?>" allowfullscreen>
|
||||
</iframe>
|
||||
<a href="https://www.google.com.au/maps/place/<?php echo $address; ?>/@<?php echo $latitude; ?>,<?php echo $longitude; ?>,<?php echo $zoom; ?>z" target="_blank" class="sp-google-map-link"></a>
|
||||
</div>
|
||||
<a href="https://www.openstreetmap.org/?mlat=<?php echo $latitude; ?>&mlon=<?php echo $longitude; ?>#map=<?php echo $zoom; ?>/<?php echo $latitude; ?>/<?php echo $longitude; ?>" target="_blank"><div id="sp_openstreetmaps_container" style="width: 100%; height: 320px"></div></a>
|
||||
<script>
|
||||
// position we will use later
|
||||
var lat = <?php echo $latitude; ?>;
|
||||
var lon = <?php echo $longitude; ?>;
|
||||
// initialize map
|
||||
map = L.map('sp_openstreetmaps_container', { zoomControl:false }).setView([lat, lon], <?php echo $zoom; ?>);
|
||||
// set map tiles source
|
||||
<?php if ( 'satellite' === $maptype ) { ?>
|
||||
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
|
||||
maxZoom: 18,
|
||||
}).addTo(map);
|
||||
<?php }else{ ?>
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
|
||||
maxZoom: 18,
|
||||
}).addTo(map);
|
||||
<?php } ?>
|
||||
// add marker to the map
|
||||
marker = L.marker([lat, lon]).addTo(map);
|
||||
map.dragging.disable();
|
||||
map.touchZoom.disable();
|
||||
map.doubleClickZoom.disable();
|
||||
map.scrollWheelZoom.disable();
|
||||
</script>
|
||||
<?php
|
||||
endif;
|
||||
|
||||
Reference in New Issue
Block a user