Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#1 Tue 17 November 2015 16:32
- katana
- Participant occasionnel
- Date d'inscription: 21 Aug 2014
- Messages: 32
Probème avec Openlayers et jquery
Bonjour à toute la communauté des géomaticiens,
je suis passionné par les multiples composantes de la géomatique ce qui m'a conduit vers le webmapping, bon voilà mon problème : j'ai récupéré ce code sur un site il permet de faire du webmapping avec les bibliothèque openlayers et Jquery. La plupart des tutoriels que je suis recommande de séparer les fichiers html, javascript et le fichier css. alors jai voulu séparer ce code suivant les 3 trois fichiers. et mon code fonctionne sauf lorsqu'on selectionne les boutons l'interaction ne marche pas, je suppose que j'ai du commettre une erreur surtout sur l'intégration du jquery car c'est celui que je maitrise le moins. quelqu'un pourrait il m'aidé avec un peu de commentaire si possible
merci d'avance
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OpenLayers 3 Layer Switcher Example</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
html { width:100%; height:100%; margin:0; }
body { width:100%; height:100%; margin:0; font-family:sans-serif; }
#map { width:100%; height:100%; margin:0; }
#toolbox { position:absolute; top:8px; right:8px; padding:3px; border-radius:4px; color:#fff; background: rgba(255, 255, 255, 0.4); z-index:100; }
#layerswitcher { margin:0; padding:10px; border-radius:4px; background:rgba(0, 60, 136, 0.5); list-style-type:none; }
</style>
</head>
<body>
<div id="map"></div>
<div id="toolbox">
<ul id="layerswitcher">
<li><label><input type="radio" name="layer" value="0" checked> MapQuest Satellite</label></li>
<li><label><input type="radio" name="layer" value="1"> MapQuest Hybrid</label></li>
<li><label><input type="radio" name="layer" value="2"> MapQuest OSM</label></li>
<li><label><input type="radio" name="layer" value="3"> OSM</label></li>
</ul>
</div>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function switchLayer()
{
var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
}
$(function() { switchLayer() } );
$("#layerswitcher input[name=layer]").change(function() { switchLayer() } );
var layers = [];
layers[0] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) });
layers[1] = new ol.layer.Group({ layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }), new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'hyb'}) }) ] });
layers[2] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) });
layers[3] = new ol.layer.Tile({ source: new ol.source.OSM() });
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults().extend([ new ol.control.ScaleLine({ units:'metric' }) ]),
layers: layers,
view: new ol.View({
center: ol.proj.transform([0, 10], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
</script>
</body>
</html>Hors ligne
#2 Wed 18 November 2015 18:20
- katana
- Participant occasionnel
- Date d'inscription: 21 Aug 2014
- Messages: 32
Re: Probème avec Openlayers et jquery
Problème resolu
l'erreur etait du au fait que j'ai inséré mon fichiers javascipt dans l'entête au lieu de le faire dans le corps de la page.
Hors ligne
#3 Fri 20 November 2015 09:08
Re: Probème avec Openlayers et jquery
Bonjour,
Ta réponse n'est pas cohérente avec ce que tu as décrit plus haut. Il n'y a que des insertions dans le body et aucun dans le header. D'autre part je pense que le problème est ailleurs car l'emplacement de code JavaScript n'a jamais été problématique dans l'un ou l'autre ou niveau purement fonctionnel.
Y.
Yves Jacolin, bénévole de l'association GeoRezo.net, agit au nom et pour le compte de l'association - Partageons ce qui nous départage !! - GeoRezo vous aide ? Aidez GeoRezo !
Hors ligne
#4 Sat 28 November 2015 11:08
Re: Probème avec Openlayers et jquery
Le positionnement du code Javascript peut être problématique s'il est placé après un appel de fonction contenu dans le code.
Jean-François Behm, formateur SIG, jf.behm@idgeo.fr, formations@idgeo.fr
IDGEO, www.idgeo.fr
Institut de Développement de la Géomatique 42, avenue de Général de Croutte - 31100 toulouse
Hors ligne
