Source: open-layers/ol-map.js

/**

 * @namespace WPGMZA

 * @module OLMap

 * @requires WPGMZA.Map

 * @pro-requires WPGMZA.ProMap

 */

(function($) {

	

	var Parent;

	

	WPGMZA.OLMap = function(element, options)

	{

		var self = this;

		

		Parent.call(this, element);

		

		this.setOptions(options);

		

		var viewOptions = this.settings.toOLViewOptions();

		

		$(this.element).html("");

		

		this.olMap = new ol.Map({

			target: $(element)[0],

			layers: [

				new ol.layer.Tile({

					source: new ol.source.OSM()

				})

			],

			view: new ol.View(viewOptions)

		});

		

		// TODO: Re-implement using correct setting names

		// Interactions

		this.olMap.getInteractions().forEach(function(interaction) {

			

			// NB: The true and false values are flipped because these settings represent the "disabled" state when true

			if(interaction instanceof ol.interaction.DragPan)

				interaction.setActive( (this.settings.map_draggable ? false : true) );

			else if(interaction instanceof ol.interaction.DoubleClickZoom)

				interaction.setActive( (this.settings.map_clickzoom ? false : true) );

			else if(interaction instanceof ol.interaction.MouseWheelZoom)

				interaction.setActive( (this.settings.map_scroll ? false : true) );

			

		}, this);

		

		// Controls

		this.olMap.getControls().forEach(function(control) {

			

			// NB: The true and false values are flipped because these settings represent the "disabled" state when true

			if(control instanceof ol.control.Zoom && this.settings.map_zoom)

				this.olMap.removeControl(control);

			

		}, this);

		

		if(!this.settings.map_full_screen_control)

			this.olMap.addControl(new ol.control.FullScreen());

		

		// Marker layer

		this.markerLayer = new ol.layer.Vector({

			source: new ol.source.Vector({

				features: []

			})

		});

		this.olMap.addLayer(this.markerLayer);

		

		// Listen for end of pan so we can wrap longitude if needs be

		this.olMap.on("moveend", function(event) {

			self.wrapLongitude();

			self.dispatchEvent("dragend");

			self.onIdle();

		});

		

		// Listen for zoom

		this.olMap.getView().on("change:resolution", function(event) {

			self.dispatchEvent("zoom_changed");

			self.dispatchEvent("zoomchanged");

			self.onIdle();

			

			$(self.element).trigger("zoomchanged.wpgmza");

		});

		

		// Listen for bounds changing

		this.olMap.getView().on("change", function() {

			// Wrap longitude

			self.onBoundsChanged();

		});

		self.onBoundsChanged();

		

		// Store locator center

		var marker;

		if(this.storeLocator && (marker = this.storeLocator.centerPointMarker))

		{

			this.olMap.addOverlay(marker.overlay);

			marker.setVisible(false);

		}

		

		// Cycling layer

		console.log(this.settings);

		

		// Right click listener

		$(this.element).on("click contextmenu", function(event) {

			

			var isRight;

			event = event || window.event;

			

			if("which" in event)

				isRight = event.which == 3;

			else if("button" in event)

				isRight = event.button == 2;

			

			if(!isRight)

				return;

			

			return self.onRightClick(event);

		});

		

		// Dispatch event

		if(!WPGMZA.isProVersion())

		{

			this.dispatchEvent("created");

			WPGMZA.events.dispatchEvent({type: "mapcreated", map: this});

		}

	}



	if(WPGMZA.isProVersion())

		Parent = WPGMZA.ProMap;

	else

		Parent = WPGMZA.Map;

	

	WPGMZA.OLMap.prototype = Object.create(Parent.prototype);

	WPGMZA.OLMap.prototype.constructor = WPGMZA.OLMap;

	

	WPGMZA.OLMap.prototype.wrapLongitude = function()

	{

		var center = this.getCenter();

		

		if(center.lng >= -180 && center.lng <= 180)

			return;

		

		center.lng = center.lng - 360 * Math.floor(center.lng / 360);

		

		if(center.lng > 180)

			center.lng -= 360;

		

		this.setCenter(center);

	}

	

	WPGMZA.OLMap.prototype.getCenter = function()

	{

		var lonLat = ol.proj.toLonLat(

			this.olMap.getView().getCenter()

		);

		return {

			lat: lonLat[1],

			lng: lonLat[0]

		};

	}

	

	WPGMZA.OLMap.prototype.setCenter = function(latLng)

	{

		var view = this.olMap.getView();

		

		WPGMZA.Map.prototype.setCenter.call(this, latLng);

		

		view.setCenter(ol.proj.fromLonLat([

			latLng.lng,

			latLng.lat

		]));

		

		this.wrapLongitude();



		this.onBoundsChanged();

	}

	

	WPGMZA.OLMap.prototype.getBounds = function()

	{

		var bounds = this.olMap.getView().calculateExtent(this.olMap.getSize());

		

		var topLeft = ol.proj.toLonLat([bounds[0], bounds[1]]);

		var bottomRight = ol.proj.toLonLat([bounds[2], bounds[3]]);

		

		return {

			topLeft: {

				lat: topLeft[1],

				lng: topLeft[0]

			},

			bottomRight: {

				lat: bottomRight[1],

				lng: bottomRight[0]

			}

		};

	}

	

	/**

	 * Fit to given boundaries

	 * @return void

	 */

	WPGMZA.OLMap.prototype.fitBounds = function(southWest, northEast)

	{

		this.olMap.getView().fitExtent(

			[southWest.lng, southWest.lat, northEast.lng, northEast.lat],

			this.olMap.getSize()

		);

	}

	

	WPGMZA.OLMap.prototype.panTo = function(latLng)

	{

		var view = this.olMap.getView();

		view.animate({

			center: ol.proj.fromLonLat([

				parseFloat(latLng.lng),

				parseFloat(latLng.lat),

			]),

			duration: 500

		});

	}

	

	WPGMZA.OLMap.prototype.getZoom = function()

	{

		return Math.round( this.olMap.getView().getZoom() ) + 1;

	}

	

	WPGMZA.OLMap.prototype.setZoom = function(value)

	{

		this.olMap.getView().setZoom(value);

	}

	

	WPGMZA.OLMap.prototype.getMinZoom = function()

	{

		return this.olMap.getView().getMinZoom();

	}

	

	WPGMZA.OLMap.prototype.setMinZoom = function(value)

	{

		this.olMap.getView().setMinZoom(value);

	}

	

	WPGMZA.OLMap.prototype.getMaxZoom = function()

	{

		return this.olMap.getView().getMaxZoom();

	}

	

	WPGMZA.OLMap.prototype.setMaxZoom = function(value)

	{

		this.olMap.getView().setMaxZoom(value);

	}

	

	WPGMZA.OLMap.prototype.setOptions = function(options)

	{

		Parent.prototype.setOptions.call(this, options);

		

		if(!this.olMap)

			return;

		

		this.olMap.getView().setProperties( this.settings.toOLViewOptions() );

	}

	

	/**

	 * TODO: Consider moving all these functions to their respective classes, same on google map (DO IT!!! It's very misleading having them here)

	 */

	WPGMZA.OLMap.prototype.addMarker = function(marker)

	{

		this.olMap.addOverlay(marker.overlay);

		

		Parent.prototype.addMarker.call(this, marker);

	}

	

	WPGMZA.OLMap.prototype.removeMarker = function(marker)

	{

		this.olMap.removeOverlay(marker.overlay);

		

		Parent.prototype.removeMarker.call(this, marker);

	}

	

	WPGMZA.OLMap.prototype.addPolygon = function(polygon)

	{

		this.olMap.addLayer(polygon.layer);

		

		Parent.prototype.addPolygon.call(this, polygon);

	}

	

	WPGMZA.OLMap.prototype.removePolygon = function(polygon)

	{

		this.olMap.removeLayer(polygon.layer);

		

		Parent.prototype.removePolygon.call(this, polygon);

	}

	

	WPGMZA.OLMap.prototype.addPolyline = function(polyline)

	{

		this.olMap.addLayer(polyline.layer);

		

		Parent.prototype.addPolyline.call(this, polyline);

	}

	

	WPGMZA.OLMap.prototype.removePolyline = function(polyline)

	{

		this.olMap.removeLayer(polyline.layer);

		

		Parent.prototype.removePolyline.call(this, polyline);

	}

	

	WPGMZA.OLMap.prototype.addCircle = function(circle)

	{

		this.olMap.addLayer(circle.layer);

		

		Parent.prototype.addCircle.call(this, circle);

	}

	

	WPGMZA.OLMap.prototype.removeCircle = function(circle)

	{

		this.olMap.removeLayer(circle.layer);

		

		Parent.prototype.removeCircle.call(this, circle);

	}

	

	WPGMZA.OLMap.prototype.pixelsToLatLng = function(x, y)

	{

		if(y == undefined)

		{

			if("x" in x && "y" in x)

			{

				y = x.y;

				x = x.x;

			}

			else

				console.warn("Y coordinate undefined in pixelsToLatLng (did you mean to pass 2 arguments?)");

		}

		

		var coord = this.olMap.getCoordinateFromPixel([x, y]);

		

		if(!coord)

			return {

				x: null,

				y: null

			};

		

		var lonLat = ol.proj.toLonLat(coord);

		return {

			lat: lonLat[1],

			lng: lonLat[0]

		};

	}

	

	WPGMZA.OLMap.prototype.latLngToPixels = function(latLng)

	{

		var coord = ol.proj.fromLonLat([latLng.lng, latLng.lat]);

		var pixel = this.olMap.getPixelFromCoordinate(coord);

		

		if(!pixel)

			return {

				x: null,

				y: null

			};

		

		return {

			x: pixel[0],

			y: pixel[1]

		};

	}

	

	WPGMZA.OLMap.prototype.enableBicycleLayer = function(value)

	{

		if(value)

		{

			if(!this.bicycleLayer)

				this.bicycleLayer = new ol.layer.Tile({

					source: new ol.source.OSM({

						url: "http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"

					})

				});

				

			this.olMap.addLayer(this.bicycleLayer);

		}

		else

		{

			if(!this.bicycleLayer)

				return;

			

			this.olMap.removeLayer(this.bicycleLayer);

		}

	}

	

	WPGMZA.OLMap.prototype.onElementResized = function(event)

	{

		this.olMap.updateSize();

	}

	

	WPGMZA.OLMap.prototype.onRightClick = function(event)

	{

		if($(event.target).closest(".ol-marker, .wpgmza_modern_infowindow, .wpgmza-modern-store-locator").length)

			return true;

		

		var parentOffset = $(this.element).offset();

		var relX = event.pageX - parentOffset.left;

		var relY = event.pageY - parentOffset.top;

		var latLng = this.pixelsToLatLng(relX, relY);

		

		this.trigger({type: "rightclick", latLng: latLng});

		$(this.element).trigger("rightclick.wpgmza");

		

		event.preventDefault();

		return false;

	}

	

})(jQuery);