Blame view

datalets/leafletjs-datalet/leafletjs-datalet.html 8.39 KB
a508f993   isisadmin   added datalet doc...
1
  <!--

5e6ba8af   isisadmin   datalet doc update
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  @license

      The MIT License (MIT)

  

      Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy

  

      Permission is hereby granted, free of charge, to any person obtaining a copy

      of this software and associated documentation files (the "Software"), to deal

      in the Software without restriction, including without limitation the rights

      to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

      copies of the Software, and to permit persons to whom the Software is

      furnished to do so, subject to the following conditions:

  

      The above copyright notice and this permission notice shall be included in

      all copies or substantial portions of the Software.

  

      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

      IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

      FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

      AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

      LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

      OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

      THE SOFTWARE.

a508f993   isisadmin   added datalet doc...
24
25
  -->

  

ae17a8dc   Luigi Serra   Controllet and da...
26
  <!--

950d181d   Luigi Serra   license updates
27
28
  * Developed by :

  * ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu

ae17a8dc   Luigi Serra   Controllet and da...
29
30
31
  *

  -->

  

98d9d8a5   Renato De Donato   filters+groupby
32
  <link rel="import" href="../base-ajax-json-alasql-datalet/base-ajax-json-alasql-datalet.html">

73bcce88   luigser   COMPONENTS
33
  

a508f993   isisadmin   added datalet doc...
34
35
36
37
38
39
  <!--

  

  `leafletjs-datalet` is a map datalet based on open source project leafletjs <http://leafletjs.com/>

  

  Example:

  

5e6ba8af   isisadmin   datalet doc update
40
41
42
43
      <leafletjs-datalet

          data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"

          fields='["field1","field2"]'>

      </leafletjs-datalet>

a508f993   isisadmin   added datalet doc...
44
  

5e6ba8af   isisadmin   datalet doc update
45
46
47
48
  @element leafletjs-datalet

  @status v0.1

  @demo demo/index.html

  @group datalets

a508f993   isisadmin   added datalet doc...
49
50
  -->

  

73bcce88   luigser   COMPONENTS
51
52
  <dom-module name="leafletjs-datalet">

      <template>

1a83f5a1   Luigi Serra   map datalet css b...
53
          <link rel="stylesheet" href="leafletsjs/leaflet.css" />

73bcce88   luigser   COMPONENTS
54
          <style>

7e835531   Andrea Petta   generic cards con...
55
              #leafletjs {height: 600px;}

73bcce88   luigser   COMPONENTS
56
57
58
          </style>

  

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

498cdf34   Andrea Petta   leafletjs
59
          <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}" export_menu="{{export_menu}}"></base-ajax-json-alasql-datalet>

73bcce88   luigser   COMPONENTS
60
61
62
  

      </template>

  

73bcce88   luigser   COMPONENTS
63
64
65
66
      <script src="leafletsjs/leaflet.js"></script>

  

      <script>

  

73bcce88   luigser   COMPONENTS
67
68
          var leafletjsBehavior = {

  

a508f993   isisadmin   added datalet doc...
69
              /**

a508f993   isisadmin   added datalet doc...
70
               * Read markers coordinates from the data object and add the marker to the map.

59e45d36   Luigi Serra   treemap and leafl...
71
               * Call a method for the map redraw and set the viewport in order to fit all the markers in the viewport..

a508f993   isisadmin   added datalet doc...
72
73
74
               *

               * @method transformData

               */

5bc002a2   isisadmin   datalet refactoring
75
              presentData: function(){

a1f0799c   isisadmin   datalet global re...
76
  

7e835531   Andrea Petta   generic cards con...
77
                  var t = this;

0a86ccc8   Luigi Serra   graph and datalet...
78
79
80
81
                  try{

                      this._component.map = L.map(this._component.$.leafletjs).setView([0, 0], 13, {reset:true});

                  }catch(e){}

  

7e835531   Andrea Petta   generic cards con...
82
83
84
85
86
87
  

                  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._component.map);

  

35c4a6d8   Luigi Serra   Datasets provider...
88
  

e99be101   Andrea Petta   leafletjs
89
                  L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';

a1f0799c   isisadmin   datalet global re...
90
  

e99be101   Andrea Petta   leafletjs
91
                  var coordinates = [];

95300cf9   Andrea Petta   plugin update
92
                  var coordinates_index  = 0;

e99be101   Andrea Petta   leafletjs
93
                  var isArray = t.data[0].data[0].constructor === Array;

7e835531   Andrea Petta   generic cards con...
94
  

e99be101   Andrea Petta   leafletjs
95
96
97
                  for(var i=0; i<t.data[0].data.length; i++)

                  {

                      if(isArray)

95300cf9   Andrea Petta   plugin update
98
99
100
101
                      {

                          if(!isNaN(t.data[0].data[i][0]) && !isNaN(t.data[0].data[i][1]))

                              coordinates.push([parseFloat(t.data[0].data[i][0]), parseFloat(t.data[0].data[i][1])]);

                          else

0242ec8c   Andrea Petta   plugin update
102
                               continue;

95300cf9   Andrea Petta   plugin update
103
                      }

0242ec8c   Andrea Petta   plugin update
104
                      else if(typeof t.data[0].data[i] != 'undefined' && t.data[0].data[i].indexOf(","))

518a34ca   Andrea Petta   plugin update
105
                      {

f965cc59   Luigi Serra   updates: coords i...
106
                          var coords = t.data[0].data[i].split(",");

518a34ca   Andrea Petta   plugin update
107
108
109
110
111
                          if(!isNaN(coords[0]) && !isNaN(coords[1]))

                              coordinates.push([parseFloat(coords[0]), parseFloat(coords[1])]);

                          else

                              continue;

                      }

e99be101   Andrea Petta   leafletjs
112
                      else

95300cf9   Andrea Petta   plugin update
113
114
115
116
117
118
119
120
121
                      {

                          if(!isNaN(t.data[0].data[i]) && !isNaN(t.data[1].data[i]))

                              coordinates.push([parseFloat(t.data[0].data[i]), parseFloat(t.data[1].data[i])]);

                          else

                              continue;

                      }

  

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

                      coordinates_index++;

7e835531   Andrea Petta   generic cards con...
122
  

e99be101   Andrea Petta   leafletjs
123
124
125
126
                      if(t.data.length > 2)

                      {

                          var popupText = "";

                          for(var j=2; j<t.data.length; j++)

7e835531   Andrea Petta   generic cards con...
127
                          {

f7f73c85   Andrea Petta   plugin update
128
129
130
                              if(typeof t.data[j] != 'undefined' && typeof t.data[j].data[i] != 'undefined')

                              {

                                  if (t.data[j].data[i].toString().match(new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?")))

e99be101   Andrea Petta   leafletjs
131
                                      popupText += '<image height="100" width="100" src="' + t.data[j].data[i] + '" /><br/>';

f7f73c85   Andrea Petta   plugin update
132
133
134
                                  else

                                      popupText += '<span>' + t.data[j].name + ' : ' + t.data[j].data[i] + '</span><br/>'

                              }

7e835531   Andrea Petta   generic cards con...
135
                          }

e99be101   Andrea Petta   leafletjs
136
137
138
  

                          var popup = L.popup().setContent(popupText);

                          marker.bindPopup(popup);

a1f0799c   isisadmin   datalet global re...
139
                      }

e99be101   Andrea Petta   leafletjs
140
141
142
143
144
                  }

  

                  t._component.map._onResize();

                  t._component.map.invalidateSize(false);

                  t._component.map.fitBounds(coordinates);

73bcce88   luigser   COMPONENTS
145
  

73bcce88   luigser   COMPONENTS
146
147
148
149
150
151
152
              }

          };

  

  

          Polymer({

  

              is : 'leafletjs-datalet',

73bcce88   luigser   COMPONENTS
153
154
  

              properties : {

413bc541   Renato De Donato   data cache
155
156
157
158
                  data: {

                      type: Array,

                      value: undefined

                  },

a508f993   isisadmin   added datalet doc...
159
160
161
162
163
                  /**

                   * Store a reference to the leafletjs map object created in 'ready' callback

                   * @attribute map

                   * @type Object

                   */

73bcce88   luigser   COMPONENTS
164
165
166
167
168
                  map :

                  {

                      type: Object,

                      value:null

                  },

a508f993   isisadmin   added datalet doc...
169
170
171
172
173
                  /**

                   * An Array with all the markers extracted from the dataset

                   * @attribute markers

                   * @type Array

                   */

73bcce88   luigser   COMPONENTS
174
175
176
177
                  markers :

                  {

                      type : Array,

                      value : []

e5b73e81   isisadmin   addded behavior p...
178
179
180
181
182
183
184
185
186
187
188
                  },

                  /**

                   * It's the component behavior

                   *

                   * @attribute behavior

                   * @type Object

                   * @default {}

                   */

                  behavior : {

                      type : Object,

                      value : {}

498cdf34   Andrea Petta   leafletjs
189
190
191
192
193
194
195
196
197
198
199
200
                  },

                  /**

                   * Control the export menu

                   * xxxx BITMASK. FROM RIGHT : HTML, PNG, RTF, MY SPACE (eg. 1111 show all, 0000 hide all)

                   *

                   * @attribute export_menu

                   * @type Number

                   * @default 15

                   */

                  export_menu : {

                      type  : Number,

                      value : 9 // xxxx BITMASK. FROM RIGHT : HTML, PNG, RTF, MY SPACE (eg. 1111 show all, 0000 hide all)

73bcce88   luigser   COMPONENTS
201
202
203
                  }

              },

  

a508f993   isisadmin   added datalet doc...
204
205
206
207
208
209
210
              /**

               * 'ready' callback create the map object, set the tileLayer to openstreetmap and the default icon image path.

               * Moreover extend the leafletjsComponentBehavior with BaseDataletBehavior, WorkcycleBehavior and leafletjsBehavior

               * and run the Datalet workcycle.

               *

               * @method ready

               */

4f3cbd94   Renato De Donato   map bug
211
              ready: function(){

98d9d8a5   Renato De Donato   filters+groupby
212
                  this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, leafletjsBehavior);

e99be101   Andrea Petta   leafletjs
213
                  this.async(function(){this.behavior.init(this)},100);

a508f993   isisadmin   added datalet doc...
214
              }

73bcce88   luigser   COMPONENTS
215
          });

0242ec8c   Andrea Petta   plugin update
216
      </scri