[ Index ] |
MailPress 7.2 |
[ Index ] [ Classes ] [ Functions ] [ Variables ] [ Constants ] [ Statistics ] |
[Summary view] [Print] [Text view]
1 function mp_field_type_geotag(settings) 2 { 3 this.map = null; 4 5 this.settings = settings; 6 this.prefix = 'mp_' + this.settings.form + '_' + this.settings.field; 7 this.suffix = '_' + this.settings.form + '_' + this.settings.field; 8 9 this.center_lat = jQuery('#' + this.prefix + '_center_lat'); 10 this.center_lng = jQuery('#' + this.prefix + '_center_lng'); 11 12 this.zoomlevel = jQuery('#' + this.prefix + '_zoomlevel'); 13 this.maptype = jQuery('#' + this.prefix + '_maptype'); 14 15 this.container = this.prefix + '_map'; 16 17 this.lat = jQuery('#' + this.prefix + '_lat,#' + this.prefix + '_lat_d'); 18 this.lng = jQuery('#' + this.prefix + '_lng,#' + this.prefix + '_lng_d'); 19 this.rgeocode = jQuery('#' + this.prefix + '_geocode'); 20 21 this.popup = false; 22 this.tileLayer = null; 23 24 this.init = function() { 25 26 this.center = this.getLatLng(this.setLoLa(this.settings.center_lng, this.settings.center_lat)); 27 28 var myOptions = { 29 center: this.center, 30 zoom: parseInt(this.zoomlevel.val()), 31 32 zoomControl: ( this.settings.zoom == '1' ) 33 }; 34 35 this.map = L.map(this.container, myOptions); 36 37 var layer = this.get_maptype(this.maptype.val()); 38 this.tileLayer = L.tileLayer(layer.tile, layer.opts); 39 this.tileLayer.addTo(this.map); 40 41 this.setMarker(); 42 this.setEvents(); 43 this.setControls(); 44 } 45 46 this.sanitize = function(x) { 47 x = parseFloat(x); 48 return x.toFixed(8); 49 }; 50 51 this.setLoLa = function(lng, lat) { 52 return { lo: this.sanitize(lng), la: this.sanitize(lat) }; 53 }; 54 55 this.getLoLa = function(LatLng) { 56 return { lo: this.sanitize(LatLng.lng), la: this.sanitize(LatLng.lat) }; 57 }; 58 59 this.getLatLng = function(LoLa) { 60 return L.latLng( LoLa.la, LoLa.lo ); 61 }; 62 63 this.setCenter = function() { 64 var LoLa = this.getLoLa(this.marker.getLatLng()); 65 66 this.map.setView(this.getLatLng(LoLa)); 67 this.center_lat.val(LoLa.la); 68 this.center_lng.val(LoLa.lo); 69 }; 70 71 this.setMarker = function() { 72 73 this.marker = L.marker(this.center, {draggable: true, autoPan: true}); 74 this.map.addLayer(this.marker); 75 }; 76 77 this.moveMarker = function(LoLa) { 78 this.hideMarkerInfo(); 79 this.marker.setLatLng(this.getLatLng(LoLa)); 80 this.lat.val(LoLa.la); 81 this.lng.val(LoLa.lo); 82 83 this.setCenter(); 84 }; 85 86 this.showMarkerInfo = function(LatLng, data) { 87 this.popup = true; 88 this.marker.bindPopup(data).addTo(this.map); 89 this.marker.openPopup(); 90 }; 91 92 this.hideMarkerInfo = function() { 93 if (!this.popup) return; 94 this.popup = false; 95 this.marker.closePopup(); 96 this.marker.unbindPopup(); 97 98 }; 99 100 this.get_maptype = function(maptype) { 101 var layer = {}; 102 switch(maptype) 103 { 104 case 'SATELLITE': 105 layer.tile = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'; 106 layer.opts = {attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'}; 107 break; 108 case 'HYBRID' : 109 layer.tile = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'; 110 layer.opts = {maxZoom: 17, attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a ref="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'}; 111 break; 112 case 'TERRAIN' : 113 layer.tile = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}'; 114 layer.opts = { subdomains: 'abcd', minZoom: 0, maxZoom: 18, ext: 'png', attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}; 115 break; 116 default : 117 layer.tile = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 118 layer.opts = {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}; 119 break; 120 } 121 return layer; 122 }; 123 124 this.setEvents = function() { 125 // map 126 this.map.on('dragend', function(){ 127 var LoLa = _this.getLoLa(_this.map.getCenter()); 128 _this.center_lat.val(LoLa.la); 129 _this.center_lng.val(LoLa.lo); 130 }); 131 132 this.map.on('zoom', function(){ 133 _this.zoomlevel.val(parseInt(_this.map.getZoom())); 134 }); 135 136 // marker 137 this.marker.on('drag', function(e){ var marker = e.target; 138 _this.hideMarkerInfo(); 139 var LatLng = marker.getLatLng(); 140 var LoLa = _this.getLoLa(LatLng); 141 _this.lat.val(LoLa.la); 142 _this.lng.val(LoLa.lo); 143 marker.setLatLng(LatLng,{draggable: true, autoPan: true}); 144 }); 145 146 this.marker.on('dragend', function(e){ var marker = e.target; 147 var LatLng = marker.getLatLng(); 148 var LoLa = _this.getLoLa(LatLng); 149 _this.lat.val(LoLa.la); 150 _this.lng.val(LoLa.lo); 151 marker.setLatLng(LatLng,{draggable: true, autoPan: true}); 152 }); 153 154 // geocoder 155 jQuery('#' + this.prefix + '_geocode_button').click( function() { 156 var address = jQuery('#' + _this.prefix + '_geocode').val(); 157 158 var data = {}; 159 data['action'] = 'mp_ajax'; 160 data['mp_action'] = 'geocoding'; 161 data['map_provider'] = 'o'; 162 data['addr'] = address; 163 164 jQuery.ajax({ 165 data: data, 166 beforeSend: null, 167 type: "POST", 168 url: mp_mapL10n.url, 169 success: _this.geocoding 170 }); 171 }); 172 173 }; 174 175 this.setControls = function() { 176 177 if ( 0 == this.settings.changemap+this.settings.center+this.settings.rgeocode ) return; 178 179 L.Control.Ctrls = L.Control.extend({ 180 onAdd: function(map) { 181 var suffix = map.mailpress.suffix; 182 var div = L.DomUtil.create('div', 'leaflet-ctrl leaflet-ctrl-group'); 183 div.innerHTML = ''; 184 if ( 1 == map.mailpress.changemap ) div.innerHTML += '<button type="button" id="map_control'+suffix+'" class="leaflet-ctrl-icon map_control" alt="'+mp_mapL10n.changemap+'" title="'+mp_mapL10n.changemap+'"></button>'; 185 if ( 1 == map.mailpress.center ) div.innerHTML += '<button type="button" id="map_center' +suffix+'" class="leaflet-ctrl-icon map_center" alt="'+mp_mapL10n.center +'" title="'+mp_mapL10n.center+'" ></button>'; 186 if ( 1 == map.mailpress.rgeocode ) div.innerHTML += '<button type="button" id="map_geocode'+suffix+'" class="leaflet-ctrl-icon map_geocode" alt="'+mp_mapL10n.rgeocode +'" title="'+mp_mapL10n.rgeocode+'" ></button>'; 187 return div; 188 }, 189 onRemove: function(map) { 190 } 191 }); 192 193 L.control.ctrls = function(opts) { 194 return new L.Control.Ctrls(opts); 195 } 196 this.map.mailpress = {changemap : this.settings.changemap , center : this.settings.center , rgeocode : this.settings.rgeocode, suffix: this.suffix}; 197 L.control.ctrls({ position: 'topright' }).addTo(this.map); 198 199 if ( 1 == this.settings.changemap ) { 200 jQuery('#map_control'+this.suffix).click(function(){ 201 switch (_this.maptype.val()) 202 { 203 case 'ROADMAP' : _this.maptype.val('SATELLITE'); break; 204 case 'SATELLITE' : _this.maptype.val('HYBRID'); break; 205 case 'HYBRID' : _this.maptype.val('TERRAIN'); break; 206 default: _this.maptype.val('ROADMAP'); break; 207 } 208 _this.tileLayer.remove(_this.map); 209 var layer = _this.get_maptype(_this.maptype.val()); 210 _this.tileLayer = L.tileLayer(layer.tile, layer.opts); 211 _this.tileLayer.addTo(_this.map); 212 return false; 213 }); 214 } 215 216 if ( 1 == this.settings.center ) { 217 jQuery('#map_center'+this.suffix).click(function(){ 218 _this.setCenter(); 219 return false; 220 }); 221 } 222 223 224 if ( 1 == this.settings.rgeocode ) { 225 jQuery('#map_geocode'+this.suffix).click(function(){ 226 var data = {}; 227 data['action'] = 'mp_ajax'; 228 data['mp_action'] = 'rgeocoding'; 229 data['map_provider'] = 'o'; 230 data['lng'] = _this.lng.val(); 231 data['lat'] = _this.lat.val(); 232 233 jQuery.ajax({ 234 data: data, 235 beforeSend: null, 236 type: "POST", 237 url: mp_mapL10n.url, 238 success: _this.rgeocoding 239 }); 240 241 return false; 242 }); 243 } 244 }; 245 246 this.geocoding = function(data) { 247 if (data.success) { 248 data = data.data; 249 var lng = data.lng; 250 var lat = data.lat; 251 _this.moveMarker(_this.setLoLa(lng, lat)); 252 } 253 else { 254 alert("Geocoder failed"); 255 } 256 }; 257 258 this.rgeocoding= function(data) { 259 if (data.success) { 260 data = data.data; 261 _this.showMarkerInfo(_this.getLatLng(_this.setLoLa(_this.lng.val(), _this.lat.val())), data); 262 _this.setCenter(); 263 264 } 265 else { 266 alert("No result found"); 267 } 268 }; 269 270 var _this = this; 271 272 this.init(); 273 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Tue May 19 15:55:14 2020 | Cross-referenced by PHPXref 0.7.1 |