sandbox.html

<!DOCTYPE html>
<html>
<head>
  <!-- tuto suivit : digital geography : http://goo.gl/Vqg0kn  -->
  <title>MapBox WFS</title>
  <meta charset="utf-8" />
  <!-- chagement des librairies depuis le site ol3-->
  <!-- Le CSS -->
  <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
  <!-- La librairie ol3 -->
  <script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
  <!-- La librairie jquery pour le wfs -->
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <style>

  </style>
</head>


<style>
  #popup{width:200px;height:140px;padding:5px;background-color:#ccc;}
  #popup_content{height:120px;}
  #popup{display:none;}
</style>



<body>
  <h1 align = "center">MapBox avec WFS</h1>
  <div id="map" style="width: 100%; height: 450px"></div>
  <div id="info" class="alert alert-success"> </div>
  
  
  <div id="popup">
    <div id="popup_content"></div>
    <button id="popup_close">Fermer</button>
  </div>

  
  <script>
  
  $( document ).ready(function() {
    $("#popup_close").click(function() {
      $("#popup").css("display","none");
    });   
  });


  var layers = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://api.tiles.mapbox.com/v4/delaye.jnnd2ih7/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGVsYXllIiwiYSI6IjRwM0FOOFEifQ.MiTmnZ6pIYvWZV6R7ZaqHw'
      })
    });

  var vectorSource = new ol.source.ServerVector({
    format: new ol.format.GeoJSON(),
    loader: function(extent, resolution, projection) {
      var url = 'http://164.81.15.10/cgi-bin/mapserv?map=/var/www/ms_monsatR/monastR_wfs.map&SERVICE=WFS&VERSION=1.1.0&REQUEST=getfeature&TYPENAME=monsatR_mySQL&srsname=EPSG:4326&OUTPUTFORMAT=OGRGeoJSON';
      $.ajax({
        url: url,
        dataType: "text",
        success: function (data){ //pour faire des appel
          var format = new ol.format.GeoJSON();
          var blabl = format.readFeatures(data, {
            featureProjection: 'EPSG:3857',
            dataProjection: 'EPSG:4326'
          }
          );
          console.log(blabl[0].getGeometry().getCoordinates());
          vectorSource.addFeatures(blabl);
        }
      });
    }
  });

  var vector = new ol.layer.Vector({
    source: vectorSource 
  });

  // objet de visualisation
  var map = new ol.Map({
    layers: [layers, vector],
    target: 'map',
    //overlays: [overlay],
    //echelle sur la carte
    controls: ol.control.defaults().extend([
      new ol.control.ScaleLine()
    ]),
    view: new ol.View({
      projection: 'EPSG:3857',
      //center: [0,0],
      center: [186446,5743548],
      zoom: 8
    })
  });


  

//   map.on('click', function(evt) {
//     var coordinate = evt.coordinate;
//     var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
// 	coordinate, 'EPSG:3857', 'EPSG:4326'));   
//     $("#popup_content").html('<p>You clicked here:</p><code>' + hdms +
// 	'</code>');
//     $("#popup").css("display","block");
// 
//   });
  
  var displayFeatureInfo = function(pixel) {

  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return feature;
  });

//   var info = $("#popup_content");
    if (feature) {
    alert("pan")
      $("#popup_content").html(feature.get('FID'));
    } else {
     $("#popup_content").html('&nbsp;');
    }
    $("#popup").css("display","block");

  };
  
  map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });
  </script>
 </body>
</html>