Merge pull request #106 from scottaames/center-map (dfe562a4) · Commits · aflab / astrogeology / Asc Geostac

app/src/js/AstroControlManager.js

+4 −0

Original line number	Diff line number	Diff line
		@@ -5,6 +5,7 @@ import ProjectionControl from "./ProjectionControl";
		import MousePositionControl from "./MousePositionControl";
		import AstroDrawControl from "./AstroDrawControl";
		import AstroSidebarControl from "./SidebarControl";
		import ViewCenterControl from "./ViewCenterControl";

		/**
		* @class AstroControlManager
		@@ -37,6 +38,9 @@ export default L.AstroControlManager = L.Class.extend({
		this._fullscreenControl = new L.Control.Fullscreen();
		this._controls.push(this._fullscreenControl);

		this._viewCenterControl = new ViewCenterControl();
		this._controls.push(this._viewCenterControl);

		let drawnItems = new L.FeatureGroup();
		map.addLayer(drawnItems);

app/src/js/AstroMap.js

+11 −1

Original line number	Diff line number	Diff line
		@@ -172,7 +172,7 @@ export default L.Map.AstroMap = L.Map.extend({
		// at such a high zoom level.
		this.setView(center, 1, true);
		}

		this.options.center = center;
		let newCRS = null;
		if (name == "cylindrical") {
		newCRS = this._defaultProj;
		@@ -266,5 +266,15 @@ export default L.Map.AstroMap = L.Map.extend({
		*/
		radii: function() {
		return this._radii;
		},

		/**
		* @function AstroMap.prototype.getCenter
		* @description getter method to access the center of the map.
		*
		* @return {LatLng} The center coordinates of the map.
		*/
		getCenter: function() {
		return this.options.center;
		}
		});

app/src/js/ViewCenterControl.js

0 → 100644

+54 −0

Original line number	Diff line number	Diff line
		import L from "leaflet";

		/**
		* @class ViewCenterControl
		* @aka L.Control.ViewCenterControl
		* @inherits L.Control
		*
		* @classdesc Control that allows users to reposition the map to the center while maintaining current zoom level.
		*/
		export default L.Control.ViewCenter = L.Control.extend({
		options: {
		position: "topleft"
		},

		/**
		* @function ViewCenterControl.prototype.onAdd
		* @description Creates new container holding the ViewCenter button
		* @param {AstroMap} map - The map to add the control to.
		* @return {Div} Container containing the ViewCenter button.
		*/
		onAdd: function(map) {
		let container = L.DomUtil.create("div", "leaflet-bar");
		let className = "leaflet-control-view-center";

		this._createButton(className, container, map);

		return container;
		},

		/**
		* @function ViewCenterControl.prototype._createButton
		* @description Creates new link element inside the ViewCenter container and provides onclick functionality to reposition the map view to the map's center based on its current projection.
		* @param {String} className - The name of the element's class.
		* @param {Div} container - The container object to put the element into.
		* @param {AstroMap} map - The map to add the control to.
		* @return {Link} Element containing the ViewCenter link.
		*/
		_createButton: function(className, container, map) {
		let link = L.DomUtil.create("a", className, container);
		link.href = "#";
		link.title = "Center map";
		L.DomEvent.on(link, "click", L.DomEvent.stopPropagation)
		.on(link, "click", L.DomEvent.preventDefault)
		.on(
		link,
		"click",
		function() {
		map.setView(map.getCenter(), map.getZoom());
		},
		map
		);
		return link;
		}
		});

app/src/styles.css

+46 −7

Original line number	Diff line number	Diff line
		@@ -20,32 +20,71 @@ Controls the CSS for projection buttons when there is no available projection
		opacity: 40%;
		}

		.leaflet-control-view-center {
		background-image: url("https://raw.github.com/pwldp/leaflet.viewcenter/master/icon-viewcenter.png");
		}
		.sidebar {
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
		background: #fff;
		border-radius: 5px;
		display: grid;
		grid-template-columns: auto 15px;
		box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
		0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
		}

		.sidebar-collapsed {
		width: 200px;
		height: 48px;
		background: #f8f9fa;
		border-radius: 5px;
		padding-left: 5px;
		padding-bottom: 2px;
		display: grid;
		grid-template-columns: auto 20px;
		}

		.sidebar-expanded {
		width: 820px;
		width: 800px;
		height: 98px;
		background: #f8f9fa;
		display: grid;
		grid-template-columns: auto 20px;
		border-radius: 5px;
		}

		.sidebar-button {
		font: bold 18px "Lucida Console", Monaco, monospace;
		text-indent: 1px;
		cursor: pointer;
		text-align: center;
		display: flex;
		align-items: center;
		}

		.sidebar-expanded .sidebar-button {
		padding: 2px;
		cursor: pointer;
		text-align: center;
		display: flex;
		align-items: center;
		border: none;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		border-left: thin solid #ccc;
		background-color: #fff;
		}

		.sidebar-collapsed .sidebar-button {
		font: bold 18px "Lucida Console", Monaco, monospace;
		margin-left: 5px;
		margin-bottom: -2px;
		padding: 2px;
		cursor: pointer;
		text-align: center;
		display: flex;
		align-items: center;
		border: none;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		border-left: thin solid #ccc;
		background-color: #fff;
		}

		.sidebar-button:hover {
		background-color: #ccc;
		}