Blame view

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

a1f0799c   isisadmin   datalet global re...
59
          <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}"></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);

  

04b21afb   Luigi Serra   leafletjs-datlet ...
89
                      if(this.data.length > 1)

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
111
  

              properties : {

  

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

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

                   * @attribute map

                   * @type Object

                   */

73bcce88   luigser   COMPONENTS
117
118
119
120
121
122
                  map :

                  {

                      type: Object,

                      value:null

                  },

  

a508f993   isisadmin   added datalet doc...
123
124
125
126
127
                  /**

                   * An Array with all the markers extracted from the dataset

                   * @attribute markers

                   * @type Array

                   */

73bcce88   luigser   COMPONENTS
128
129
130
131
132
133
134
                  markers :

                  {

                      type : Array,

                      value : []

                  }

              },

  

a508f993   isisadmin   added datalet doc...
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
              /**

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

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

  

a1f0799c   isisadmin   datalet global re...
153
                  var leafletjsComponentBehavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, leafletjsBehavior);

a508f993   isisadmin   added datalet doc...
154
155
                  leafletjsComponentBehavior.init(this);

              }

73bcce88   luigser   COMPONENTS
156
157
158
159
          });

      </script>

  </dom-module>