Blame view

datalets/leafletjs-datalet/leafletjs-datalet.html 3.98 KB
73bcce88   luigser   COMPONENTS
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
  <link rel="import" href="../base-datalet/base-datalet.html">

  

  <dom-module name="leafletjs-datalet">

      <template>

  

          <style>

              #leafletjs { height: 600px; }

          </style>

  

          <div id="leafletjs"></div>

          <base-datalet data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></base-datalet>

  

      </template>

  

      <link rel="stylesheet" href="leafletsjs/leaflet.css" />

      <script src="leafletsjs/leaflet.js"></script>

  

      <script>

  

          $(document).ready(function(){

  /*            var map = L.map("leafletjs").setView([51.505, -0.09], 13);

  

              L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

                  maxZoom: 18,

                  attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'

              }).addTo(map);*/

          });

  

  

          var leafletjsBehavior = {

  

              selectData: function(){

  

                  var queries =  this._component.query.split("###");

  

                  for (i = 0; i < queries.length; i++) {

                          /*propsName = queries[i].split(".");

                          var propName = "" + propsName[propsName.length - 1];*/

                          var propName = this.getPropertyName(queries[i]);

  

                          temp = jsonPath(this.properties.json_results.value, queries[i]);

                          for (j = 0; j < temp.length; j++) {

                              if (i == 0) this.properties.data.value[j] = {};

                              currObj = {};

                              currObj[propName] = temp[j];

                              jQuery.extend(this.properties.data.value[j], currObj);

                          }

                 }

              },

  

              transformData: function(){

              	            	             

  				var coordinates = [];

  				var keys = Object.keys(this.properties.data.value[0]);

  				

                  for(var index in this.properties.data.value)

                  {

                      coordinates.push([parseFloat(this.properties.data.value[index][keys[0]]), parseFloat(this.properties.data.value[index][keys[1]])]);

                      var marker = L.marker([coordinates[index][0], coordinates[index][1]]).addTo(this._component.map);

                      var popup = L.popup().setContent('<image height="100" width="100" src="'+this.properties.data.value[index][keys[2]]+'" />');

                      marker.bindPopup(popup);

                  }

  

                  this._component.map.invalidateSize();

                  this._component.map.fitBounds(coordinates);            	

              	

              }

          };

  

  

          Polymer({

  

              is : 'leafletjs-datalet',

              ready: function(){

  

  				this.map = L.map(this.$.leafletjs).setView([0, 0], 13);

                  //this.map = L.map("leafletjs").setView([0, 0], 13);

  

                  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

                      maxZoom: 18,

                      attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'

                  }).addTo(this.map);

  

8bada91f   Luigi Serra   Controllets and D...
84
                  L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';

73bcce88   luigser   COMPONENTS
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
  

                  var leafletjsComponentBehavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonDataRequestBehavior, leafletjsBehavior);

                  leafletjsComponentBehavior.init(this);

              },

  

              attached : function(){

  

  

  

              },

  

              properties : {

  

                  map :

                  {

                      type: Object,

                      value:null

                  },

  

                  markers :

                  {

                      type : Array,

                      value : []

                  }

              },

  

              log : function(item){

                  console.log(item);

              }

  

          });

      </script>

  </dom-module>