htmlMap/howTo_leaflet/sandbox.html at master · ElCep/htmlMap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
  <!-- tuto suivit : digital geography : http://goo.gl/Vqg0kn  -->
  <title>sandbox</title>
  <meta charset="utf-8" />
  <!-- chagement des librairies depuis le site leaflet et d3.js-->
  <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="patch_onetile.js"></script>
  <!-- Pour charger des données externet type geojson -->
  <script src="data/capteurs/capteurs_TERVICLIM.geojson" type="text/javascript"></script>
  <style>
  /*import css from leaflet, permet d'avoir les icones et
  les outils de leaflet*/
  @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
  </style>
</head>
<body>
  <h1 align = "center">mapServer & geojson</h1>
  <div id="map" style="width: 100%; height: 450px"></div>
  <script>
    // Centre la carte sur les coordoné [] et avec un niveau de zoom
    var map = L.map('map').setView([42.4788,3.0755], 12);
    // chargement d'un WMS OSM depuis toolserver avec le theme noir et blanc
    // var toolserver = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png');
    // // chargement d'un autre WMS
    // var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
    //   attribution: 'Add some attributes here!'}).addTo(map);
    // var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver};
    // // ajout un controleur de couche avec les deux types de serveur WMS
    // L.control.layers(baseLayers).addTo(map);
    var terviServe = L.tileLayer.wms('http://localhost/cgi-bin/mapserv?map=/var/www/html/mapfiles/cadastre/banyuls4326.map',{
      layer: 'acidity-2012',
      format: 'image/png',
      transparent: true,
      version: '1.1.0',
      attribution: 'terviclim'
    }).addTo(map);


    // map.on('click', onMapClick);

    // chargement d'une couche en geojson
     /* capteurs TERVICIM les données sont chargé dans le geader */
        // var capteurs = new L.LayerGroup();
        // // le fichier geojson creer avec Qgis en epsg 4326 est
        // // légérement modifier pour déclarer la variable capteurs_TERVICLIM
        // L.geoJson(capteurs_TERVICLIM,{
        //             onEachFeature: function (feature, layer) {
        //                 // On va naviger dans l'arbre geojson pour
        //                 // aller chercher l'atribut name avec cette fonction
        //                 // On ajouter avec '+' les elements et le html
        //                 layer.bindPopup('<b>'+feature.properties.name+'</b><br>'+
        //                                 '<i>elevation</i> '+feature.properties.ele + ' meters' );
        //             }
        //           }
        //                             ).addTo(capteurs);
        //
        // capteurs.addTo(map);

  </script>
 </body>
</html>