diff options
Diffstat (limited to 'www/wiki/extensions/Maps/resources/leaflet/jquery.leaflet.js')
-rw-r--r-- | www/wiki/extensions/Maps/resources/leaflet/jquery.leaflet.js | 434 |
1 files changed, 434 insertions, 0 deletions
diff --git a/www/wiki/extensions/Maps/resources/leaflet/jquery.leaflet.js b/www/wiki/extensions/Maps/resources/leaflet/jquery.leaflet.js new file mode 100644 index 00000000..3483ec3a --- /dev/null +++ b/www/wiki/extensions/Maps/resources/leaflet/jquery.leaflet.js @@ -0,0 +1,434 @@ +/** + * JavaScript for Leaflet in the Maps extension. + * @see https://www.mediawiki.org/wiki/Extension:Maps + * + * @author Pavel Astakhov < pastakhov@yandex.ru > + * @author Peter Grassberger < petertheone@gmail.com > + */ +(function ($, mw, L, MQ) { + $.fn.leafletmaps = function ( options ) { + var _this = this; + this.map = null; + this.options = options; + this.markers = []; + this.markercluster = null; + var apikeys = mw.config.get('egMapsLeafletLayersApiKeys') ; + + /** + * array point of all map elements (markers, lines, polygons, etc.) + * for map fit + */ + this.points = []; + + /** + * Creates a new marker with the provided data and returns it. + * @param {Object} properties Contains the fields lat, lon, title, text and icon + * @return {L.Marker} + */ + this.createMarker = function (properties) { + this.points.push( new L.LatLng(properties.lat, properties.lon) ); + + var markerOptions = { + title:properties.title + }; + + var marker = L.marker( [properties.lat, properties.lon], markerOptions ); + + if (properties.hasOwnProperty('icon') && properties.icon !== '') { + marker.setOpacity(0); + + var img = new Image(); + img.onload = function() { + var icon = new L.Icon({ + iconUrl: properties.icon, + iconSize: [ img.width, img.height ], + iconAnchor: [ img.width / 2, img.height ], + popupAnchor: [ -img.width % 2, -img.height*2/3 ] + }); + + marker.setIcon(icon); + marker.setOpacity(1); + }; + img.src = properties.icon; + } + + if( properties.hasOwnProperty('text') && properties.text.length > 0 ) { + marker.bindPopup( properties.text ); + } + + if ( options.copycoords ) { + marker.on( + 'contextmenu', + function( e ) { + prompt(mw.msg('maps-copycoords-prompt'), e.latlng.lat + ',' + e.latlng.lng); + } + ); + } + + return marker; + }; + + /** + * Creates a new marker with the provided data, adds it to the map + * and returns it. + * @param {Object} properties Contains the fields lat, lon, title, text and icon + * @return {L.Marker} + */ + this.addMarker = function (properties) { + var marker = this.createMarker(properties); + if (!this.options.markercluster) { + marker.addTo( this.map ); + } + this.markers.push( marker ); + return marker; + }; + + this.removeMarker = function (marker) { + this.map.removeLayer(marker); + this.points = []; + this.markers = this.markers.filter(function(object) { + return object !== marker; + }); + }; + + this.removeMarkers = function () { + if (this.markercluster) { + this.map.removeLayer(this.markercluster); + this.markercluster = null; + } + var map = this.map; + $.each(this.markers, function(index, marker) { + map.removeLayer(marker); + }); + + this.points = []; + this.markers = []; + }; + + this.addLine = function (properties) { + var options = { + color: properties.strokeColor, + weight:properties.strokeWeight, + opacity:properties.strokeOpacity + }; + + var latlngs = []; + for (var x = 0; x < properties.pos.length; x++) { + latlngs.push([properties.pos[x].lat, properties.pos[x].lon]); + this.points.push( new L.LatLng(properties.pos[x].lat, properties.pos[x].lon) ); + } + + var line = L.polyline(latlngs, options).addTo(this.map); + + if( properties.hasOwnProperty('text') && properties.text.trim().length > 0 ) { + line.bindPopup( properties.text ); + } + }; + + this.addPolygon = function (properties) { + properties.pos.forEach(function(position) { + _this.points.push( new L.LatLng(position.lat, position.lon) ); + }); + + var polygon = L.polygon( + properties.pos.map(function(position) { + return [position.lat, position.lon]; + }), + { + color: properties.strokeColor, + weight:properties.strokeWeight, + opacity:properties.strokeOpacity, + fillColor:properties.fillColor, + fillOpacity:properties.fillOpacity + } + ); + + polygon.addTo(this.map); + + if( properties.hasOwnProperty('text') && properties.text.trim().length > 0 ) { + console.log(properties.text); + polygon.bindPopup( properties.text ); + } + }; + + this.addCircle = function (properties) { + var circle = L.circle( + [properties.centre.lat, properties.centre.lon], + { + radius: properties.radius, + color: properties.strokeColor, + weight:properties.strokeWeight, + opacity:properties.strokeOpacity, + fillColor:properties.fillColor, + fillOpacity:properties.fillOpacity, + } + ).addTo(this.map); + + this.points.push( new L.LatLng(properties.centre.lat, properties.centre.lon) ); + + if( properties.hasOwnProperty('text') && properties.text.trim().length > 0 ) { + circle.bindPopup( properties.text ); + } + }; + + this.addRectangle = function (properties) { + this.points.push( new L.LatLng(properties.sw.lat, properties.sw.lon) ); + this.points.push( new L.LatLng(properties.ne.lat, properties.ne.lon) ); + + var options = { + color: properties.strokeColor, + weight:properties.strokeWeight, + opacity:properties.strokeOpacity, + fillColor:properties.fillColor, + fillOpacity:properties.fillOpacity + }; + + var bounds = [[properties.sw.lat, properties.sw.lon], [properties.ne.lat, properties.ne.lon]]; + + var rectangle = L.rectangle( bounds, options ).addTo(this.map); + + if( properties.hasOwnProperty('text') && properties.text.trim().length > 0 ) { + rectangle.bindPopup( properties.text ); + } + }; + + this.createMarkerCluster = function () { + if ( !options.markercluster ) { + return; + } + var markers = this.markers; + + var markercluster = new L.MarkerClusterGroup({ + maxClusterRadius: options.clustermaxradius, + disableClusteringAtZoom: options.clustermaxzoom + 1, + zoomToBoundsOnClick: options.clusterzoomonclick, + spiderfyOnMaxZoom: options.clusterspiderfy, + iconCreateFunction: function(cluster) { + var childCount = cluster.getChildCount(); + + var imagePath = mw.config.get( 'egMapsScriptPath' ) + '/resources/leaflet/cluster/'; + + var styles = [ + { + iconUrl: imagePath + 'm1.png', + iconSize: [53, 52] + }, + { + iconUrl: imagePath + 'm2.png', + iconSize: [56, 55] + }, + { + iconUrl: imagePath + 'm3.png', + iconSize: [66, 65] + }, + { + iconUrl: imagePath + 'm4.png', + iconSize: [78, 77] + }, + { + iconUrl: imagePath + 'm5.png', + iconSize: [90, 89] + } + ]; + + var index = 0; + var dv = childCount; + while (dv !== 0) { + dv = parseInt(dv / 10, 10); + index++; + } + var index = Math.min(index, styles.length); + index = Math.max(0, index - 1); + index = Math.min(styles.length - 1, index); + var style = styles[index]; + + return new L.divIcon({ + iconSize: style.iconSize, + className: '', + html: '<img style="' + + '" src="' + style.iconUrl + '" />' + + '<span style="' + + 'position: absolute; font-size: 11px; font-weight: bold; text-align: center; ' + + 'top: 0; left: 0; ' + + 'line-height: ' + style.iconSize[1] + 'px;' + + 'width: ' + style.iconSize[0] + 'px;' + + '">' + childCount + '</span>' + }); + } + }); + $.each(this.markers, function(index, marker) { + markercluster.addLayer(marker); + }); + if (this.markercluster) { + this.map.removeLayer(this.markercluster); + this.markercluster = null; + } + this.map.addLayer(markercluster); + this.markercluster = markercluster; + }; + + this.addGeoJson = function(options) { + if (options.geojson !== '') { + var geoJson = options.geojson; + var geoJsonLayer = L.geoJSON( geoJson ).addTo( this.map ); + + this.points.push( geoJsonLayer.getBounds().getNorthEast() ); + this.points.push( geoJsonLayer.getBounds().getSouthWest() ); + } + }; + + this.setup = function () { + + var mapOptions = {}; + if (options.minzoom !== false ) mapOptions.minZoom = options.minzoom; + if (options.maxzoom !== false ) mapOptions.maxZoom = options.maxzoom; + + if (options.enablefullscreen) { + mapOptions.fullscreenControl = true; + mapOptions.fullscreenControlOptions= { + position: 'topleft' + }; + } + + mapOptions.scrollWheelZoom = options.scrollwheelzoom; + + if (options.static) { + mapOptions.scrollWheelZoom = false; + mapOptions.doubleClickZoom = false; + mapOptions.touchZoom = false; + mapOptions.boxZoom = false; + mapOptions.tap = false; + mapOptions.keyboard = false; + mapOptions.zoomControl = false; + mapOptions.dragging = false; + } + + var map = L.map( this.get(0), mapOptions ).fitWorld(); + this.map = map; + + var layers = {}; + $.each(options.layers.reverse(), function(index, layerName) { + var options = {} ; + var providerName = layerName.split('.')[0] ; + if (apikeys.hasOwnProperty(providerName) && apikeys[providerName] !== '') { + options.apikey = apikeys[providerName] ; + } + if (layerName === 'MapQuestOpen') { + layers[layerName] = new MQ.TileLayer().addTo(map); + } else { + layers[layerName] = new L.tileLayer.provider(layerName,options).addTo(map); + } + }); + + var overlaylayers = {}; + $.each(options.overlaylayers, function(index, overlaylayerName) { + overlaylayers[overlaylayerName] = new L.tileLayer.provider(overlaylayerName).addTo(_this.map); + }); + + if (options.layers.length > 1) { + L.control.layers(layers, overlaylayers).addTo(map); + } + + if (options.resizable) { + //TODO: Fix moving map when resized + _this.resizable(); + } + + if (!options.locations) { + options.locations = []; + } + + // Add the markers. + for (var i = options.locations.length - 1; i >= 0; i--) { + this.addMarker(options.locations[i]); + } + + // Add markercluster + if (options.markercluster) { + this.createMarkerCluster(); + } + + // Add lines + if (options.lines) { + for (var i = 0; i < options.lines.length; i++) { + this.addLine(options.lines[i]); + } + } + + // Add polygons + if (options.polygons) { + for (var i = 0; i < options.polygons.length; i++) { + this.addPolygon(options.polygons[i]); + } + } + + // Add circles + if (options.circles) { + for (var i = 0; i < options.circles.length; i++) { + this.addCircle(options.circles[i]); + } + } + + // Add rectangles + if (options.rectangles) { + for (var i = 0; i < options.rectangles.length; i++) { + this.addRectangle(options.rectangles[i]); + } + } + + this.addGeoJson(options); + + // Set map position (centre and zoom) + var centre; + if (options.centre === false) { + switch ( this.points.length ) { + case 0: + centre = new L.LatLng(0, 0); + break; + case 1: + centre = this.points[0]; + break; + default: + var bounds = new L.LatLngBounds( this.points ); + if (options.zoom === false) { + map.fitBounds( bounds ); + centre = false; + } else { + centre = bounds.getCenter(); + } + break; + } + this.points = []; + } else { + centre = new L.LatLng(options.centre.lat, options.centre.lon); + } + if(centre) { + map.setView( centre, options.zoom !== false ? options.zoom : options.defzoom ); + } + }; + + this.getDependencies = function ( options ) { + var dependencies = []; + if (options.layers !== ['MapQuestOpen'] || options.overlaylayers.length > 0) { + dependencies.push( 'ext.maps.leaflet.providers' ); + } + if (options.enablefullscreen) { + dependencies.push( 'ext.maps.leaflet.fullscreen' ); + } + if (options.resizable) { + dependencies.push( 'ext.maps.resizable' ); + } + if (options.markercluster) { + dependencies.push( 'ext.maps.leaflet.markercluster' ); + } + return dependencies; + }; + + mw.loader.using( this.getDependencies( options ) ).then( function() { + _this.setup(); + } ); + + return this; + + }; +})(jQuery, window.mediaWiki, L, window.MQ); |