Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

#1 Wed 30 June 2010 10:16

seb.49
Participant occasionnel
Date d'inscription: 5 Jun 2009
Messages: 19

Ajouter des bouton de controles sous forme de texte dans Openlayers

Bonjour,

Je suis en train de refaire une appli utilisant GMap pour qu'elle utilise OpenLayers et je dois dire que si les débuts on été un peu rude, au bout de 3 jours, je suis maintenant à l'aise avec OpenLayers et je trouve ce produit vraiment top.

Pour l'instant j'ai réussi à faire tout ce que je veux sauf une chose et je n'ai rien trouvé sur le net.

OpenLayers permet d'afficher des boutons de controle sous forme d'image, je souhaiterais pour ma part avoir des bouton contenant du texte ou bien de simple texte cliquable comme ce que j'ai actuellement sur l'image jointe

Je n'ai rien trouvé pour faire ca, j'ai bien essayer en ajoutant dans le DOM des div cliquable mais le résultat ne me convient guère je préférait une solution full Openlayers.

Merci d'avance pour votre aide


Fichier(s) joint(s) :
Pour accéder aux fichiers vous devez vous inscrire.

Hors ligne

 

#2 Mon 05 July 2010 11:58

seb.49
Participant occasionnel
Date d'inscription: 5 Jun 2009
Messages: 19

Re: Ajouter des bouton de controles sous forme de texte dans Openlayers

Je me répond à moi même et j'en profite pour partager. Pas trouver de moyen 100% OL donc voici le code JS

Code:

 //Méthode par ajout de controle en javascript
    var ClearPolygonDiv = document.createElement('div');
    ClearPolygonDiv.setAttribute('id', 'newSpan');
    ClearPolygonDiv.appendChild(document.createTextNode('Nouvelle zone'));
    ClearPolygonDiv.onclick = function() { clearPolygon('test'); };
    
    document.getElementById('map').appendChild(ClearPolygonDiv);
    
    //function SetButtonStyle(button) {
        $("#" + ClearPolygonDiv.id).css('textDecoration', 'underline');
        $("#" + ClearPolygonDiv.id).css('color', '#0000cc');
        $("#" + ClearPolygonDiv.id).css('backgroundColor', 'white');
        $("#" + ClearPolygonDiv.id).css('font', 'small Arial');
        $("#" + ClearPolygonDiv.id).css('border', '1px solid black');
        $("#" + ClearPolygonDiv.id).css('padding', '2px');
        $("#" + ClearPolygonDiv.id).css('marginBottom', '3px');
        $("#" + ClearPolygonDiv.id).css('textAlign', 'center');
        $("#" + ClearPolygonDiv.id).css('width', '12em');
        $("#" + ClearPolygonDiv.id).css('cursor', 'pointer');
        $("#" + ClearPolygonDiv.id).css('position', 'relative');
        $("#" + ClearPolygonDiv.id).css('z-index', '1003');
        $("#" + ClearPolygonDiv.id).css('left', '220px');
        $("#" + ClearPolygonDiv.id).css('top', '-390px');
        //}

Attention quand meme car un clic sur cette zone se propage sur la carte. J'ai donc ajouté à mon code un flag qui me permet de savoir si j'ai cliquer sur la zone et donc ne pas exécuter le code correspondant à un clic sur la carte

Hors ligne

 

Pied de page des forums

Powered by FluxBB