Can anyone help me out in which files (in an exported qgis2web project with OpenLayers3) the zoom buttons are specified? Or directly, the geolocation button? I do a project for school with qgis2web, and for the layout and data presentation i had to edit lots of javascript files after the export, so re-exporting the project is not an option, unfortunately. I did a seperate export, compared the files and managed to add the geolocation function after the export, it does work if i do hit the button. But the button has no mark, and its location in the window isn't lined up with the zoom in and out buttons.

enter image description here

Now i'm unable to find the right file in which i could line up the button better, or exchange it with another symbol/grafic.

  • 1
    Zoom in/Zoom out buttons are added by openlayers. You can customize them throw a CSS file. Similar question: stackoverflow.com/questions/32111631/… – Zoltan Nov 1 '16 at 19:02
  • Thanks Zoltan! I found something independently of that stackoverflow thread, i could change the position of the button in directly in the main file index.html by adding a new line for the value for left alignement. Next step, design... ^^ thx again – Cl. Nov 1 '16 at 20:27

The position is set by some CSS in index.html:

.geolocate {
    top: 65px;
    left: .5em;

The icon, I'm afraid, is embedded into the geolocation plugin's CSS (https://github.com/jonataswalker/ol3-geocoder/blob/master/build/ol3-geocoder.css):

.ol3-geocoder-btn-search {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 2px;
    left: 2px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQoU41SwXHCQAzUHh58eoUOIBWEDkI6oAToIKkg7iAuwakgpAIowXRACcnrzp6BzchjMx4wE/S6kW5XK60gvQghzJIkmVoqSZI9gJ9+/fINS5Cc1HX9QXIlIr/tpwcRyb33b7cIGnAIYQdg4pxbjcfj0nJ1Xc+Px+PGObdN03Q9RIAQwgpAnqbp7FKmjQGgJLlU1d2V7BjjRkQO3vvXIXarkyxVNbsCm2QR2Q0V7XOMMReRmfd+OQQubN6hYgs22ZtbnRcAtiRfLueqqmpJ8ovko6oeBq0KIWQA3gFkzrlmMafTaUEyI/mpqmbhVTRWWbRdbClPbeobQNES5KPRqOxs7DBn8K1DsAOKMZYApiTXqlrcDe4d0XN7jWeCfzt351tVle2iGalTcBd4gGDvvZ/fDe4RmCOFLe8Pr7mvEP2N9PQAAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: center center; }
  • Many thanks Tom! Actually, the value that worked to reposition the geolocator button was in the second part of the css code, .o l-touch .geolocate { top: 6.5px; left: 3.5em; } And yeah i gave up with the icon, i use an arrowed lagend in the title bar instead.... ^^ – Cl. Nov 2 '16 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.