htmlMap/howTo_leaflet/loadPoints_geojson.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
65
66
67
68
<!DOCTYPE html>
<html>
<head>
  <!-- tuto suivit : digital geography : http://goo.gl/Vqg0kn  -->
  <title>sandbox leaflet</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>
  <!-- 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">chargement d'un 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};L.control.layers(baseLayers);
    // ajout un controleur de couche avec les deux types de serveur WMS
    L.control.layers(baseLayers).addTo(map);

    // maker et popup et autres éléments
    // un markers
    // var marker = L.marker([42.4788,3.0755]).addTo(map);
    // marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

    // une fonction qui va renvoyer dans des popup des coordonnées
    // var popup = L.popup();
    // function onMapClick(e) {
    //     popup
    //         .setLatLng(e.latlng)
    //         .setContent("You clicked the map at " + e.latlng.toString())
    //         .openOn(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>