2

I would like to get a dynamic zoom linked to a drop-down menu. For example I have a list connected to my database with all the regions and I would like that when the user choose a region that a zoom is done on the selected region.

This is the beginning of my function (in my JS) which would allow me to zoom in on a region:

// Zoom sur un pays avec une surbrillance
  function zoomToRegion(geom){

var format = new ol.format.WKT();

var region = format.readFeature(geom, {
       dataProjection: 'EPSG:4326',
       featureProjection: 'EPSG:3857'
       });

var cadre = region.getGeometry().getExtent();
var map = $('#map').data('map');
map.getView().fit(cadre, map.getSize()); 

And here my drop-down menu linked to my database:

<!DOCTYPE html>

<html>
<body>
<div class="dropdown">
    <ul>
        <li>
        <label for="region"> Régions </label>
        <input list="region" type="text" placeholder=" -- Toutes -- " >
        <datalist id="region">

                    <select name="region" id="region" >
                    <?php
                    try{
                        //Tentative de connexion à la bdd
                        $bdd = new PDO('pgsql:host=localhost; dbname=TEST','postgres','');
                    }
                    catch(Exception $e){
                        // En cas d'erreur on affiche un message et on stop tout
                        die('Erreur : '.$e->getMessage());
                    }
                    $requete ='SELECT nom_reg, St_astext(geom) as geom from "GEOMETRIES"."REGION_GEOFLA_2016" order by "nom_reg" ASC';

                    $listRegion = $bdd -> query($requete);

                    foreach($listRegion as $row){
                        //echo '<option value="'.$row[0].'">'.$row[0].'</option>'; 
                        echo '<option value="'.$row['nom_reg'].'" onclick="zoomToRegion(\''.$row['geom'].'\')">'.$row[0].'</option>'; 
                    }

                    ?>
                    </select>
        </datalist>
        </li>

</body>

Would you have any ideas of what is missing to achieve this feature?

  • Why don't you use a PHP page to read your database and echo back a list of regions and their extent, Then using JS populate your select with this directly, then onchange grab the value which is the extent and use this to zoom to it? Having your database connection string in your HTML page may cause problems. – Bill Chappell Oct 5 '17 at 16:29

Your Answer

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

Browse other questions tagged or ask your own question.