Search bar for map

Hi,
Is there a way to have a search bar on the map to search for a particular place?

Regards,
Alex

Traccar doesn't have such feature, so to add it, you would have to modify the source code.

Ok Thank's

It's possible to add search button with this example: http://jsfiddle.net/jonataswalker/c4qv9afb/

Work's for me.

In which file i add the code in that example?

Thanks in advance

Hi,

I would also be interested in a search facility for the traccar map. The example mentioned above is looking good. Any more details on how to implement it?

Ok, I had some time, so implemented it by myself. If anyone is interested, here what I did:

Idea "stolen" from: http://jsfiddle.net/jonataswalker/c4qv9afb/

Changes to load.js (/opt/traccar/web):

addStyleFile('//unpkg.com/ol-geocoder@3.0.1/dist/ol-geocoder.min.css');
addStyleFile('//unpkg.com/ol-popup@2.0.0/src/ol-popup.css');
    
addScriptFile('//unpkg.com/ol-popup@2.0.0/src/ol-popup.js');
addScriptFile('//unpkg.com/ol-geocoder@3.0.1/dist/ol-geocoder.js');

I modified ol-geocoder.js so that nominatim related web addresses are using https (necessary if you are running Traccar via an SSL connection)

Changes to app.min.js (/opt/traccar/web):

• "Beautify" file first (e.g. http://jsbeautifier.org/) to make it readable
• Declare variables:

popup, geocoder (in line 5622 for v3.15)

• Add (in lines 5763ff for v3.15):

    // popup
        popup = new ol.Overlay.Popup();
        this.map.addOverlay(popup);

    //Instantiate with some options and add the Control
    geocoder = new Geocoder('nominatim', {
        provider: 'osm',
        lang: 'en',
        placeholder: 'Search for ...',
        limit: 5,
        debug: false,
        autoComplete: true,
        keepOpen: true
    });
    this.map.addControl(geocoder);
  
    //Listen when an address is chosen
    geocoder.on('addresschosen', function (evt) {
        console.info(evt);
        window.setTimeout(function () {
            popup.show(evt.coordinate, evt.address.formatted);
        }, 3000);
    });

Now you should see a search symbol in the top right corner of the Traccar map which uses Nominatim to list search results for the seatrch entry and places then a marker on the map for the location found. The only problem I still need to fix is how the "flags" it is generating to show search results don't stay forever on the map (at the moment only a browser refresh deletes them).

Thank you very much for your help! I will try to implement this ASAP.

Best regards

Ok, some more optimisations (linked the latest ol libraries from github and added a line to remove the sticky "flags" on the map:

Changes to load.js (/opt/traccar/web):

addStyleFile('//cdn.rawgit.com/jonataswalker/ol-geocoder/54b23aea/dist/ol-geocoder.min.css');
addStyleFile('//cdn.rawgit.com/walkermatt/ol-popup/494a42c0/src/ol-popup.css');

addScriptFile('//cdn.rawgit.com/walkermatt/ol-popup/494a42c0/dist/ol-popup.js');
addScriptFile('//cdn.rawgit.com/jonataswalker/ol-geocoder/54b23aea/dist/ol-geocoder.js');

Changes to app.min.js (/opt/traccar/web):

"Beautify" file first (e.g. http://jsbeautifier.org/) to make it readable
Declare variables:
popup, geocoder (in line 5693 for v3.16)
Add (in lines 5841ff for v3.16):

  // popup
      popup = new ol.Overlay.Popup();
      this.map.addOverlay(popup);

  //Instantiate with some options and add the Control
  geocoder = new Geocoder('nominatim', {
      provider: 'osm',
      lang: 'en',
      placeholder: 'Search for ...',
      limit: 5,
      debug: false,
      autoComplete: true,
      keepOpen: true
  });
  this.map.addControl(geocoder);

  // prevent marker being added to map
  geocoder.getLayer().setVisible(false);

  //Listen when an address is chosen
  geocoder.on('addresschosen', function (evt) {
      console.info(evt);
      window.setTimeout(function () {
          popup.show(evt.coordinate, evt.address.formatted);
      }, 3000);
  });

cyrix2000,
I'm running Version 4.0 and am not having any luck following your code in this version.
I'm not sure where to insert the new changes to get the search bar. Thank you for any help.

I haven't installed V4.0 yet. Will have a look at it when I have some time.

Thank you for your reply. my plan was to look at your directions and follow the JS structure on the version you provided directions for and try and translate the structure/functions into the v4.0 files and insert it there. If I get to it before you and have success i'll report back here.
Thank you

Hi guys someone got how to add search bar map with Traccar v4.0

Not that i've heard of.. and here's the kicker. I followed all of the above directions on their specified versions in a test environment and I've done my best to follow them to the letter. Cannot get any of the instructions to work. I was hoping I could so that I could understand where in the javascript to place the same declares/code in version v4.0 but... not having any luck.. All I get now regardless is an undefined or uncaught type error.. I'm going to have to brush up on my coding if I hope to add things like this and integrate with other solutions.

@cyrix2000, Any chance you have had this done on v4.0? Even I'm keen to have the search feature. Not sure if there is a feature request on github, if not, I'll request one.