GIS and Media fusion
"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild
User Tools
geoinf18:oltuto4
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf18:oltuto4 [2018/12/06 22:44] oertz [D. Géoservice d'interrogation personnalisé] |
geoinf18:oltuto4 [2019/01/08 17:15] (current) oertz [A. Gestion événementielle cartographique] |
||
|---|---|---|---|
| Line 66: | Line 66: | ||
| </code> | </code> | ||
| - | **TODO** | + | **TODO** https://www.mediamaps.ch/oltuto/Ex8a.html |
| - Utiliser l'événement //singleclick// pour s'aider à définir un centrage de carte sur un point de votre choix (par exemple les Pierres du Niton) | - Utiliser l'événement //singleclick// pour s'aider à définir un centrage de carte sur un point de votre choix (par exemple les Pierres du Niton) | ||
| - De nombreuses propriétés des classes OpenLayers sont "observables", comme celles de la classe [[http://openlayers.org/en/v3.19.1/apidoc/ol.View.html|ol.View]]. Ajouter ce qui suit :<code> | - De nombreuses propriétés des classes OpenLayers sont "observables", comme celles de la classe [[http://openlayers.org/en/v3.19.1/apidoc/ol.View.html|ol.View]]. Ajouter ce qui suit :<code> | ||
| Line 175: | Line 175: | ||
| </code> | </code> | ||
| - | **TODO** | + | **TODO** https://www.mediamaps.ch/oltuto/Ex8b.html |
| - Un serveur WMS peut formatter la réponse de différentes manières (voir la [[https://demo.boundlessgeo.com/geoserver/opengeo/wms?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetCapabilities|configuration du serveur]]). Par exemple, modifier INFO_FORMAT comme suit :<code> | - Un serveur WMS peut formatter la réponse de différentes manières (voir la [[https://demo.boundlessgeo.com/geoserver/opengeo/wms?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetCapabilities|configuration du serveur]]). Par exemple, modifier INFO_FORMAT comme suit :<code> | ||
| INFO_FORMAT: "application/json" | INFO_FORMAT: "application/json" | ||
| Line 271: | Line 271: | ||
| </code> | </code> | ||
| - | __TODO__ | + | **TODO** https://www.mediamaps.ch/oltuto/Ex8c.html |
| - Quel événement l'[[http://openlayers.org/en/v3.20.1/apidoc/ol.events.condition.html|ol.events.condition]] utiliser pour avoir le comportement type "onmouseover" ? Sans oublier de mettre l'IHM en cohérence (voir [[http://openlayers.org/en/v3.20.1/apidoc/ol.interaction.Select.Event.html#event:select|ol.interaction.Select.Event]] select). | - Quel événement l'[[http://openlayers.org/en/v3.20.1/apidoc/ol.events.condition.html|ol.events.condition]] utiliser pour avoir le comportement type "onmouseover" ? Sans oublier de mettre l'IHM en cohérence (voir [[http://openlayers.org/en/v3.20.1/apidoc/ol.interaction.Select.Event.html#event:select|ol.interaction.Select.Event]] select). | ||
| - Configurer l'interaction de sorte que l'utilisateur puisse aussi cliquer sur la bulle d'information pour aller à la page des détails du séisme (cf propriété //url//, ex. https://earthquake.usgs.gov/earthquakes/eventpage/nc72722700){{:geoinf16:selectearthquake.png?nolink|}} | - Configurer l'interaction de sorte que l'utilisateur puisse aussi cliquer sur la bulle d'information pour aller à la page des détails du séisme (cf propriété //url//, ex. https://earthquake.usgs.gov/earthquakes/eventpage/nc72722700){{:geoinf16:selectearthquake.png?nolink|}} | ||
| Line 322: | Line 322: | ||
| console.log(tilesUrl); | console.log(tilesUrl); | ||
| - | admLyr = new ol.layer.Tile({ | + | hutLayer = new ol.layer.Tile({ |
| source: new ol.source.XYZ({ | source: new ol.source.XYZ({ | ||
| url: tilesUrl | url: tilesUrl | ||
| }) | }) | ||
| }) | }) | ||
| - | map.addLayer(admLyr); | + | map.addLayer(hutLayer); |
| }); | }); | ||
| Line 349: | Line 349: | ||
| request.done(function (data) { | request.done(function (data) { | ||
| + | // we empty the message box | ||
| $("#info").html(""); | $("#info").html(""); | ||
| - | for(var ft of data.features) { | + | |
| - | $("#info").append($("<p>").html(ft.properties.title)); | + | if (data.features.length > 0) { |
| + | // we just display the first hut in the array of features | ||
| + | var ft = data.features[0]; | ||
| + | $("#info").append($("<p>").html(ft.properties.title)); | ||
| + | } else { | ||
| + | // we display a default message in case of an empty array | ||
| + | $("#info").append($("<p>").html("No hut nearby, try elsewhere ...")); | ||
| } | } | ||
| }); | }); | ||
| Line 369: | Line 376: | ||
| #info { | #info { | ||
| position: absolute; | position: absolute; | ||
| - | top: 50; | + | top: 20px; |
| - | left: 80; | + | left: 60px; |
| background-color: white; | background-color: white; | ||
| + | border: solid gray 1px; | ||
| padding: 5px; | padding: 5px; | ||
| + | font-size: smaller; | ||
| + | z-index: 1000000000; | ||
| + | } | ||
| + | |||
| + | p { | ||
| + | margin: 0; | ||
| } | } | ||
| </style> | </style> | ||
| Line 383: | Line 397: | ||
| </code> | </code> | ||
| + | **TODO** https://www.mediamaps.ch/oltuto/Ex8d.html | ||
| + | - Ajouter un champ de saisie pour que l'utilisateur puisse contrôler le rayon de recherche (par défaut radius = 0.01° en dur dans le code ci-dessus) | ||
| + | - Plus le rayon est grand, plus la zone de recherche est vaste, trouvant ainsi plusieurs cabanes dans la zone. Adapter la solution pour que les informations de toutes les cabanes de la zone soient affichées (et pas seulement la première cabane) | ||
geoinf18/oltuto4.1544132676.txt.gz · Last modified: 2018/12/06 22:44 by oertz
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
