Hi, I’m having some issues with Toolset Maps (using OpenStreetMap).
1 – Focus on user position
I’m using the maps-focus-map button to show the user’s current position. Unfortunately, it doesn’t work correctly: the marker is placed in the middle of nowhere (see shot1.jpg).
On the same page, I also have a View that loads a list of markers on the same map.
You can see the issue on this page:
hidden link hidden link
2 – Address field zoom
On this page I also have a form where the user can save either their current location or any other address in an Address field on the map. This part works, but when a position is selected, the map doesn’t zoom in to that location (see form1.jpg).
On mobile especially, this is not very user-friendly, since the user has to manually zoom in to check and refine their selection.
Is there a way to make the map automatically zoom to the selected position when it reloads?
Hello. Thank you for contacting the Toolset support.
Can you please check now:
- hidden link
I've added the code snippet namely "get-current-user-location" to "Custom Code" section offered by Toolset and added the following code to it.
=> hidden link
function get_user_location_by_ip() {
// Get user IP address
$ip = $_SERVER['REMOTE_ADDR'];
// Optional: handle proxies/load balancers
if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
$ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ipList = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
$ip = trim($ipList[0]);
}
// API endpoint (no key needed)
$url = "<em><u>hidden link</u></em>{$ip}?fields=status,message,country,regionName,city,lat,lon,query";
// Initialize cURL
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
// Execute and decode response
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode !== 200 || !$response) {
return null;
}
$data = json_decode($response, true);
if (isset($data['status']) && $data['status'] === 'success') {
return array(
'ip' => $data['query'],
'country' => $data['country'],
'region' => $data['regionName'],
'city' => $data['city'],
'latitude' => $data['lat'],
'longitude' => $data['lon'],
);
}
return null;
}
function func_get_location_by_ip_shortcode($atts) {
// Default attribute
$atts = shortcode_atts(array(
'attribute' => ''
), $atts, 'get-location');
$location = get_user_location_by_ip();
if (empty($location)) return '';
$attribute = strtolower($atts['attribute']);
switch ($attribute) {
case 'lat':
return esc_html($location['latitude']);
case 'lon':
return esc_html($location['longitude']);
case 'city':
return esc_html($location['city']);
case 'region':
return esc_html($location['region']);
case 'country':
return esc_html($location['country']);
case 'ip':
return esc_html($ip);
default:
return ''; // Unknown attribute
}
}
add_shortcode('get-location', 'func_get_location_by_ip_shortcode');
We are using function get_user_location_by_ip() to get the current user location based on the current user IP and use the custom shortcode [get-location] to get the lat and lon associagted to current user location address.
On your page - I've modified the marker code as given under:
I tested on my laptop, and the marker is placed about 600 km away from my actual location. This might be related to my current IP.
I also tested on my mobile phone with GPS and location permissions enabled in Chrome, and the marker is still placed in the same incorrect location.
Additionally, I reset the location permission in Chrome (as a test), but now the website no longer prompts me to grant permission to use the GPS location.
I've adjusted the code added to the page as given under:
=>hidden link
[wpv-geolocation message_when_missing="We need your location to show this content"]
[wpv-map-render map_id="map-20" map_height="300px" single_zoom="16" map_type="satellite" map_type_control="off" street_view_control="off"][/wpv-map-render]
[wpv-map-marker map_id='map-20' marker_id='marker-user-focus' marker_title='Tu posición'
lat="[get-location attribute='lat']" lon="[get-location attribute='lon']" marker_icon='//stopvertidosilegales.org/wp-content/uploads/user-position.png' ]Tu posición[/wpv-map-marker]
[/wpv-geolocation]
I've also adjsuted the code snippet namely "get-current-user-location" that is added to "Custom Code" section offered by Toolset as given under.
=> hidden link
function func_get_location_by_ip_shortcode($atts) {
// Default attribute
$atts = shortcode_atts(array(
'attribute' => ''
), $atts, 'get-location');
if(isset($_COOKIE['toolset_maps_location']) and $_COOKIE['toolset_maps_location']!=''){
$location = explode(",",$_COOKIE['toolset_maps_location']);
}
if (empty($location)) return '';
$attribute = strtolower($atts['attribute']);
switch ($attribute) {
case 'lat':
return esc_html($location[0]);
case 'lon':
return esc_html($location[1]);
default:
return ''; // Unknown attribute
}
}
add_shortcode('get-location', 'func_get_location_by_ip_shortcode');
Hi Minesh, It works fine on my laptop, but not on my mobile. Instead of the map, it shows the message “We need your location to show this content” (see screenshot screen0).
Also, it doesn’t automatically prompt for location permissions. The permission request only appears when I click “Use my location” in the form map.
In addition, I sometimes run into issues with the CSS not loading properly (see screenshots screen1 and screen2).
Well - you have to compromize a bit here as you are using the OpenStreet Map and we are at early stage of open street map.
You need to add a button so user can share their location and hide the content using the if user did not share the location. I do not have any other solution/workaround, I'm afraid.
Hi, the problem on mobile is that even after I grant permissions to use my location, it still display th emessage “We need your location to show this content”.
I checked with my android mobile and I can see its working on mobile as well.
I suggest you clear cache on your mobile and then try to use private mode and try to access the page:
- hidden link
When you try to access the above page, it asks for login, I logged-in using the access details you shared and after login it asks me to share the location and as soon as I share the location I can see the map is loaded without any issue with the current location.
