Blame view

datalets/leafletjs-datalet/leafletjs-datalet.html 6.29 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
  *

  -->

  

a1f0799c   isisadmin   datalet global re...
32
  <link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-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
55
56
57
58
          <style>

              #leafletjs { height: 600px; }

          </style>

  

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

ec5b0925   isisadmin   datalet chaching ...
59
          <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-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
71
72
73
74
               * Read markers coordinates from the data object and add the marker to the map.

               * Call a method for the map redraw and set the viewport in order to fit all the markers in the viewport.

               *

               * @method transformData

               */

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

73bcce88   luigser   COMPONENTS
76
77
              	            	             

  				var coordinates = [];

35c4a6d8   Luigi Serra   Datasets provider...
78
                  var isArray = (this.data[0].data[0].constructor === Array) ? true : false;

a1f0799c   isisadmin   datalet global re...
79
80
  

                  for(var i=0; i<this.data[0].data.length; i++)

73bcce88   luigser   COMPONENTS
81
                  {

35c4a6d8   Luigi Serra   Datasets provider...
82
83
84
85
86
                      if(isArray)

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

                      else

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

  

a1f0799c   isisadmin   datalet global re...
87
88
                      var marker = L.marker([coordinates[i][0], coordinates[i][1]]).addTo(this._component.map);

  

ec5b0925   isisadmin   datalet chaching ...
89
                      if(this.data.length > 2)

a1f0799c   isisadmin   datalet global re...
90
                      {

04b21afb   Luigi Serra   leafletjs-datlet ...
91
92
93
94
                          if(this.data[this.data.length - 1].data[i].match(new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?")))

                             var popup = L.popup().setContent('<image height="100" width="100" src="' + this.data[this.data.length - 1].data[i] + '" />');

                          else

                              var popup = L.popup().setContent('<span>' + this.data[this.data.length - 1].data[i] + '</span>');

a1f0799c   isisadmin   datalet global re...
95
96
                          marker.bindPopup(popup);

                      }

73bcce88   luigser   COMPONENTS
97
98
99
100
101
102
103
104
105
106
107
108
                  }

  

                  this._component.map.invalidateSize();

                  this._component.map.fitBounds(coordinates);            	

              	

              }

          };

  

  

          Polymer({

  

              is : 'leafletjs-datalet',

73bcce88   luigser   COMPONENTS
109
110
  

              properties : {

a508f993   isisadmin   added datalet doc...
111
112
113
114
115
                  /**

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

                   * @attribute map

                   * @type Object

                   */

73bcce88   luigser   COMPONENTS
116
117
118
119
120
                  map :

                  {

                      type: Object,

                      value:null

                  },

a508f993   isisadmin   added datalet doc...
121
122
123
124
125
                  /**

                   * An Array with all the markers extracted from the dataset

                   * @attribute markers

                   * @type Array

                   */

73bcce88   luigser   COMPONENTS
126
127
128
129
                  markers :

                  {

                      type : Array,

                      value : []

e5b73e81   isisadmin   addded behavior p...
130
131
132
133
134
135
136
137
138
139
140
                  },

                  /**

                   * It's the component behavior

                   *

                   * @attribute behavior

                   * @type Object

                   * @default {}

                   */

                  behavior : {

                      type : Object,

                      value : {}

73bcce88   luigser   COMPONENTS
141
142
143
                  }

              },

  

a508f993   isisadmin   added datalet doc...
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
              /**

               * '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

               */

              ready: function(){

  

  				this.map = L.map(this.$.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);

73bcce88   luigser   COMPONENTS
159
  

a508f993   isisadmin   added datalet doc...
160
161
                  L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';

  

e5b73e81   isisadmin   addded behavior p...
162
                  this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, leafletjsBehavior);

5e31b047   isisadmin   datalet chaching ...
163
                  this.async(function(){this.behavior.init(this)},1);

a508f993   isisadmin   added datalet doc...
164
              }

73bcce88   luigser   COMPONENTS
165
166
167
168
          });

      </script>

  </dom-module>