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

Suite à un problème technique intervenu entre le 22 et le 23 mars, nous avons du procéder dans la soirée du 25 mars, à la restauration de la base de données du 24 mars (matinée).

En clair, nous avons perdu vos contributions et inscriptions du dimanche 24 et du lundi 25 mars.
Nous vous prions de nous excuser.

#1 Thu 15 September 2016 15:40

Gayake
Participant occasionnel
Date d'inscription: 13 Sep 2014
Messages: 26

integrer un graphique dans une pop up

Bonjour à tous!

J'essaie de réaliser une carte où quand je clique sur une zone, une fenêtre pop up s'afficherait avec un graphique donnant des infos.
Les données du graphique varieraient selon la zone cliquée (à l'instar de ce qui se fait pour le site de la météo).
Auriez-vous des pistes pour les codes. J'utilise OpenLayers.
Faut-il utiliser du python ou autres et l'intégrer ensuite .Si oui, comment les intégrer ?

Merci

Hors ligne

 

#2 Thu 15 September 2016 16:01

Francois Gueydon
Participant actif
Lieu: Castelnaud la Chapelle
Date d'inscription: 17 Jun 2015
Messages: 68

Re: integrer un graphique dans une pop up

A chaud je dirais que le plus simple c'est d'intégrer un iframe dans ton popup openlayers, de cette façon tu peux faire ton graphique interactif a part sur une autre page web et l'intégrer a ta carte web une fois que tu a fini.

Dernière modification par Francois Gueydon (Thu 15 September 2016 16:01)


La cartographie sans SIG existe encore: http://www.cartographersguild.com/content.php
Site perso: http://francoisgueydon.jimdo.com/

Hors ligne

 

#3 Tue 20 September 2016 10:46

Gayake
Participant occasionnel
Date d'inscription: 13 Sep 2014
Messages: 26

Re: integrer un graphique dans une pop up

Bonjour à tous!

Pour le moment je ne m'en sort pas avec mes graphiques, alors j'ai décidé temporairement de faire apparaître mes données dans une popup quand je survole mes zones.
Mes données sont lues en localhost. Dans l'ensemble le code fonctionne mais quand je veux faire apparaître deux données différentes (par exemple vitesse max et vitesse min), il n'y a qu'une seule information qui s'affiche.
Pourtant tout est correct dans la table attributaire et la variable ALL_FIELDS=1. J'ai essayé d'ajouté "Vmin" dans la ligne popupLayers = ["Vmax"]; mais rien ne fonctionne!
Ai-je oublié quelquechose?
Merci

Code:

 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  
    <link rel="stylesheet" href="./resources/ol.css">
    <link rel="stylesheet" href="./resources/ol3-layerswitcher.css">


    <style>
      html, body {
          height: 100%;
          padding: 0;
          margin: 0;
          font-family: sans-serif;
          font-size: small;
        }
        #map {
          width: 75%;
          height: 60%;
        }

      .ol-popup {
        display: none;
        position: absolute;
        background-color: white;
        -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;   
        height: auto;
        width: auto;
        min-width: 100px;     
      }
      
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "X";
      }
    </style>
    <script src="./resources/ol.js"></script>
    <script src="./resources/ol3-layerswitcher.js"></script>

    <script src="layers/monfichier.js"></script>
    <script src="styles/monfichier_style.js"></script>
  <script src="./layers/layers.js" type="text/javascript"></script> 
    <title></title>
  </head>
  <body>
    <div id="map">
        <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
          <div id="popup-content"></div>
        </div>  
    </div>
    <script src="./resources/jquery.min.js"></script>
    <script>
      var container = document.getElementById('popup');
      var content = document.getElementById('popup-content');
      var closer = document.getElementById('popup-closer');
      closer.onclick = function() {
        container.style.display = 'none';
        closer.blur();
        return false;
      };
      var overlayPopup = new ol.Overlay({
        element: container
      });

      var map = new ol.Map({
        controls: ol.control.defaults().extend([
          new ol.control.ScaleLine({})
        ]),
        target: document.getElementById('map'),
        renderer: 'canvas',
        overlays: [overlayPopup],
        layers: layersList,
        view: new ol.View({
          extent: [22300.100966, 5355000.728592, 118000.687938, 5425000.014547], maxZoom: 14, minZoom: 1
        })
      });
      map.getView().fitExtent([22300.100966, 5355000.728592, 118000.687938, 5425000.014547], map.getSize());

      var NO_POPUP = 0
      var ALL_FIELDS = 1

      popupLayers = ["Vmax"];

      var featureOverlay = new ol.FeatureOverlay({
        map: map,
        style: [new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: '#f00',
                width: 1
              }),
              fill: new ol.style.Fill({
                color: 'rgba(255,0,0,0.1)'
              }),
              })]          
      });


      var doHighlight = true;
      var doHover = true;

      var highlight;
      var onPointerMove = function(evt) {
        if (!doHover && !doHighlight){
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var coord = evt.coordinate;
        var popupField;
        var popupText = '';
        var currentFeature;
        var currentFeatureKeys;
        map.forEachFeatureAtPixel(pixel, function(feature, layer) {
          currentFeature = feature;
          currentFeatureKeys = currentFeature.getKeys();
          var field = popupLayers[layersList.indexOf(layer) - 1];
          if (field == NO_POPUP){          
          }
          else if (field == ALL_FIELDS){
            for ( var i=0; i<currentFeatureKeys.length;i++) {
                if (currentFeatureKeys[i] != 'geometry') {
                    popupField = currentFeatureKeys[i] + ': '+ currentFeature.get(currentFeatureKeys[i]);
                    popupText = popupText + popupField+'<br>';
                }
            }
          }
          else{
            var value = feature.get(field);
            if (value){
              popupText = field + ': ' + value;
            }  
          }          
        });

        if (doHighlight){
          if (currentFeature !== highlight) {
            if (highlight) {
              featureOverlay.removeFeature(highlight);
            }
            if (currentFeature) {
              featureOverlay.addFeature(currentFeature);
            }
            highlight = currentFeature;
          }
        }

        if (doHover){
          if (popupText) {
            overlayPopup.setPosition(coord);
            content.innerHTML = popupText;
            container.style.display = 'block';        
          } else {
            container.style.display = 'none';
            closer.blur();
          }
        }
      };

      var onSingleClick = function(evt) {
        if (doHover){
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var coord = evt.coordinate;
        var popupField;
        var popupText = '';
        var currentFeature;
        var currentFeatureKeys;
        map.forEachFeatureAtPixel(pixel, function(feature, layer) {
          currentFeature = feature;
          currentFeatureKeys = currentFeature.getKeys();
          var field = popupLayers[layersList.indexOf(layer) - 1];
          if (field == NO_POPUP){          
          }
          else if (field == ALL_FIELDS){
            for ( var i=0; i<currentFeatureKeys.length;i++) {
                if (currentFeatureKeys[i] != 'geometry') {
                    popupField = currentFeatureKeys[i] + ': '+ currentFeature.get(currentFeatureKeys[i]);
                    popupText = popupText + popupField+'<br>';
                }
            }
          }
          else{
            var value = feature.get(field);
            if (value){
              popupText = field + ': '+ value;
            }  
          }          
        });

        if (popupText) {
            overlayPopup.setPosition(coord);
            content.innerHTML = popupText;
            container.style.display = 'block';        
        } else {
          container.style.display = 'none';
          closer.blur();
        }
      };

      map.on('pointermove', function(evt) {
        onPointerMove(evt);
      });
      map.on('singleclick', function(evt) {
        onSingleClick(evt);
      });
      </script>
  </body>
</html>

Hors ligne

 

Pied de page des forums

Powered by FluxBB