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
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
  <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);

  

                  L.Icon.Default.imagePath = 'http://services.routetopa.eu/WebComponentsDEV/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';

  

                  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>