htmlMap/noMap/leaflet_no_map.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>
  <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 onload="createMap();">
  <h1 align = "center">image non geographique et non tuillé</h1>
  <div align="center"><br>
    <input type="radio" name="myRadios" onclick="createMap(this);" value="orig/barbe.jpg"/>
    <input type="radio" name="myRadios" onclick="createMap(this);" value="orig/barbe2.jpg"/>
  </div>
  <div id="image-map" style="width: 100%; height: 450px"></div>
  <script>


      //var currentValue = "orig/barbe2.jpg";
      //var  = document.getElementByName("myRadios");
      function createMap (myRadios) {
        if(myRadios == undefined){
          currentUrl = "orig/barbe.jpg"
        }else{
          currentUrl = myRadios.value;
        }
        var map = L.map('image-map', {
                    minZoom: 1,
                    maxZoom: 4,
                    center: [0, 0],
                    zoom: 1,
                    crs: L.CRS.Simple,
                  });


        // dimensions de l'image
        var w = 4032,
            h = 3024,
            url = currentUrl

        // calculer ou sont les angles de l'images dans l'espace
        var southWest = map.unproject([0, h], map.getMaxZoom()-1);
        var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
        var bounds = new L.LatLngBounds(southWest, northEast);

        // add the image overlay,
        // so that it covers the entire map
        var myImage = L.imageOverlay(url, bounds);
        map.addLayer(myImage);

        if(myImage == undefined){
          var myImage = L.imageOverlay(url, bounds);
          map.addLayer(myImage);
        }else{
          map.removeLayer(myImage)
          var myImage = L.imageOverlay(url, bounds);
          map.addLayer(myImage);
        }
        //myImage.addTo(map);
        // tell leaflet that the map is exactly as big as the image
        map.setMaxBounds(bounds);
      }

      function changeLayer(myRadios,map){
        document.getElementById('image-map').innerHTML = "<div id='map' style='width: 100%; height: 450px'></div>";
        var map = new L.Map('image-map');
        currentUrl = myRadios.value;
        console.log(currentUrl);

        url = currentUrl
        var southWest = map.unproject([0, h], map.getMaxZoom()-1);
        var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
        var bounds = new L.LatLngBounds(southWest, northEast);

        // add the image overlay,
        // so that it covers the entire map
        var myImage = L.imageOverlay(url, bounds);
        myImage.addTo(map);


        console.log(map);
        // tell leaflet that the map is exactly as big as the image
        map.setMaxBounds(bounds);

      }


    /*  function handleClick(myRadio) {
          //map.remove();
          var map = L.map('image-map', {
                      minZoom: 1,
                      maxZoom: 4,
                      center: [0, 0],
                      zoom: 1,
                      crs: L.CRS.Simple,
                    });

          currentUrl = myRadio.value;
          // dimensions de l'image
          var w = 4032,
              h = 3024,
              url = currentUrl

          // calculer ou sont les angles de l'images dans l'espace
          var southWest = map.unproject([0, h], map.getMaxZoom()-1);
          var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
          var bounds = new L.LatLngBounds(southWest, northEast);

          // add the image overlay,
          // so that it covers the entire map
          var myImage = L.imageOverlay(url, bounds);
          myImage.addTo(map);
          // tell leaflet that the map is exactly as big as the image
          map.setMaxBounds(bounds);
      }*/


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