user location AND serch box

Dear @wilmart, thank you for the feedback ??

Yes, you can do that, but you will have to edit some files in your theme. I’ve decided to keep my plugin as lightweight as it is, without loading a lot of leaflet plugins and slow down loading.
However, luckily for you, I’ve written a tutorial in the developper documentation to add Leaflet.Locate, which is exactly what you want:
https://camilles-travels.com/get-started-with-travelers-map-wordpress-plugin/#dev-documentation

As for the markers’ search box, it’s not possible and it’s not in my todo list at the moment. I’m planning something to add a map on the WordPress search results page at the moment.

Have a nice day,
Camille

Thank you dear Camille for your reply.

I tried unsiccessfull to add the Leaflet.Locate pluguin:

1. I copied the L.Control.Locate.css and L.Control.Locate.mapbox.css files to the css folder in the wordpress theme I’m using (OnePress). (I changed the file extension from .scss to .css)

2. I copied the L.Control.Locate.js file to the js folder in the wordpress theme.

3. I copied and pasted this code in the head tag of the header.php from the wordpress theme:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@[VERSION]/dist/L.Control.Locate.min.css" />

<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@[VERSION]/dist/L.Control.Locate.min.js" charset="utf-8"></script>

(But I removed the @[VERSION]

4. I copied and pasted this code in a <script> tag just before the end of the html </body> tag in the footer.php file of my theme:

<script>
// Listen for the event.
document.addEventListener('cttm_map_loaded', function (e) {
  // cttm_map is an array of all the maps included in the page, so we loop through each.
  for (var i = 0; i < cttm_map.length; i++) {
    //We add a locate control (button) on each of our maps in the page.
    L.control.locate({keepCurrentZoomLevel:true}).addTo(cttm_map[i]);
  }
}, false);
</script>

And it is not working, I can’t even see the icon in the map

ALSO:
This is not related with the locate functin: The zoom controls (+/-) are at the “very top” of my theme, even overlaping other elements like popup window and even the header of my site.

Please, can you help me with this things? Thank you so much!!!

I think you are almost there.

You can forget and remove your step 1. and 2., we will do the altenative way (3. and 3.)

3. You shouldn’t remove [VERSION], you should replace it with the current version:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.css" />

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.js" charset="utf-8"></script>

“4.” is ok.

If it’s still not working, do you have an error in your browser console? Right click on the page, “Inspect element” or “Inspect”, and you should see a console tab. Click on it and see if you have a red error (related to travelers’ map)

For the zoom controls, this is leaflet CSS, I’m not responsible of it. They add a z-index of 1000 to the control elements. The map is z-index 400, so if the map is not showing over your popups, you could change the CSS of control elements to 401 like this in your theme css:

.leaflet-top, .leaflet-bottom {
    z-index: 401 !important;
 }

Hi dear Camille, again thank you so much for your help..

I tried your suggestions, but still don’t working.
I use the “console” function in my brownser and got this:

YELLOW:
2(índice):1 Tracking Prevention blocked access to storage for https://secure.gravatar.com/avatar/8882b98a224f867d0880ac5d592e7070?s=26&d=mm&r=g.
2(índice):1 Tracking Prevention blocked access to storage for https://secure.gravatar.com/avatar/8882b98a224f867d0880ac5d592e7070?s=64&d=mm&r=g.

RED

(índice):255 Uncaught TypeError: L.control.locate is not a function
    at HTMLDocument.<anonymous> ((índice):255)
    at initTravelersMap (travelersmap.js?ver=5.4.2:361)
    at HTMLDocument.<anonymous> (travelersmap.js?ver=5.4.2:366)

Again, thank you so much for your kindly reply, I really appreciate any help you can share with me.

Regards,

Wilmar T.

Well, this error means the file L.Control.Locate.min.js is not loaded correctly.
This can mean several things:

1. The function is triggered before the file is loaded.
In that case, you did something wrong somewhere, because Travelers’ Map is inited only after page is fully loaded, and the script you copied from my blog (this line: document.addEventListener('cttm_map_loaded', function (e){...}) is waiting for Travelers’ Map to be inited.

2. You should double check you inserted the <script> and <link>s tags in your header.php. Maybe your theme have another (or several) php files named header-something.php, you should add the code there too. (inside the <head>HERE</head> tag)

3. If this is still not working, I would need to access your website to see it for myself because I don’t know what else could be wrong.

As for the overlapping element, I will fix for everyone in the next update of the plugin.

Hi Camille,

1. I’m searching for the file L.Control.Locate.min.js in my derectory but It seems that isn’t there. So I tried to copy from the plugin files and leaflet.locate files but It isn’t there.

2. I think that header.php is the only file with “header” in the file name.

3. I tried your suggestions, but I have no success. I really will appreciate any help. I’m just starting this site, so the first that I an trying to configure is the map plugin (Traveler’s Map). I made a clean installation with just 1 post with location. The map is loading at pagus.co/map.
Traveler’s Map was installed “as is provided” so I cleaned all the customizations suggested before.
I can share with you the access data (please send me a mail to wilmar.stm [at] gmail dot com, (or in telegram wilmar_toro) Map is loading at pagus.co/map

Thank you very much.

Wilmar T.

It’s all working now!

For future readers, the problem was the CDN script import, for an unknown reason, the link in the documentation is wrong. I used this instead:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/L.Control.Locate.min.js" charset="utf-8"></script>

I used an older version of the plugin, but it’s working now.

Thank you so much Camille for your awesome help!

Now this great plugin is working as I wanted with the “user current location” and without needing google API′s