#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