pre-merge (a43d0674) · Commits · aflab / astrogeology / Asc Geostac

app/package-lock.json

deleted100644 → 0

+0 −11437

File deleted.

Preview size limit exceeded, changes collapsed.

app/package.json

+3 −1

Original line number	Diff line number	Diff line
		@@ -77,6 +77,8 @@
		"proj4leaflet": "^1.0.2",
		"react": "^16.12.0",
		"react-dom": "^16.12.0",
		"typeface-roboto": "0.0.75"
		"typeface-roboto": "0.0.75",
		"leaflet-draw": "1.0.4",
		"wicket": "1.3.5"
		}
		}

app/src/components/container/MapContainer.jsx

+34 −0

Original line number	Diff line number	Diff line
		@@ -2,8 +2,10 @@ import React, { Component } from "react";
		import AstroMap from "../../js/AstroMap";
		import Projection from "../../js/Projection";
		import MousePosition from "../../js/MousePosition";
		import Draw from "../../js/Draw";
		import "leaflet";


		export default class MapContainer extends Component {
		constructor(props) {
		super(props);
		@@ -19,6 +21,22 @@ export default class MapContainer extends Component {
		numDigits: 2
		}).addTo(map);

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

		let drawControl = new Draw({
		draw: {
		circle: false,
		marker: false,
		circlemarker: false
		},
		edit: {
		featureGroup: drawnItems
		},
		targetMap: map
		}).addTo(map);

		new L.Control.Scale({ imperial: false }).addTo(map);
		map.on("fullscreenchange", this.handleFullScreenChange());
		}

		@@ -45,6 +63,22 @@ export default class MapContainer extends Component {
		numDigits: 2,
		targetPlanet: this.props.target
		}).addTo(map);

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

		let drawControl = new Draw({
		draw: {
		circle: false,
		marker: false,
		circlemarker: false
		},
		edit: {
		featureGroup: drawnItems
		},
		targetMap: map
		}).addTo(map);

		new L.Control.Scale({ imperial: false }).addTo(map);
		map.on("fullscreenchange", this.handleFullScreenChange());
		}

app/src/index.html

+6 −0

Original line number	Diff line number	Diff line
		@@ -10,4 +10,10 @@
		</head>
		<body>
		<div id="map"></div>
		<br><br><br>
		<br>
		Well-known Text Box
		<br>
		<input type="text" id= "wktTextBox" name="fname"><br>
		<button id= "wktButton" type="button">Map Me!</button>
		</body>

app/src/js/Draw.js

0 → 100644

+129 −0

Original line number	Diff line number	Diff line
		import "leaflet";
		import "leaflet-draw";
		import Wkt from "wicket";
		import { func } from "prop-types";

		/**
		* @class AstroDraw
		* @aka L.Control.AstroDraw
		* @extends L.Control
		* Class that extends from the class L.Control.Draw and handles the back-end when a user draws on the leaflet map.
		* Since this class inherits L.Control, it is added to the AstroMap in the same way as other controls, like the zoom control.
		*
		* * @example
		*
		* ```js
		* // add a feature group to the map
		* let drawnItems = new L.FeatureGroup();
		* map.addLayer(drawnItems);
		*
		* // add draw control to map
		* let drawControl = new Draw({
		* edit: {
		* featureGroup: drawnItems
		* },
		* targetMap: map
		* }).addTo(map);
		* ```
		*/
		export default L.Control.AstroDraw = L.Control.Draw.extend({
		options: {
		position: 'topleft',
		draw: {},
		edit: false
		},

		/**
		* Adds the draw control to the map provided. Creates an on-draw and on-click event
		* that allows users to draw polygons onto the leaflet map.
		* @param {AstroMap} map - The AstroMap to add the control to.
		* @return {Object} The div-container the control is in.
		*/
		onAdd: function (map) {
		let container = L.DomUtil.create('div', 'leaflet-draw'),
		addedTopClass = false,
		topClassName = 'leaflet-draw-toolbar-top',
		toolbarContainer;

		for (let toolbarId in this._toolbars) {
		if (this._toolbars.hasOwnProperty(toolbarId)) {
		toolbarContainer = this._toolbars[toolbarId].addToolbar(map);

		if (toolbarContainer) {
		if (!addedTopClass) {
		if (!L.DomUtil.hasClass(toolbarContainer, topClassName)) {
		L.DomUtil.addClass(toolbarContainer.childNodes[0], topClassName);
		}
		addedTopClass = true;
		}

		container.appendChild(toolbarContainer);
		}
		}
		}

		this.wktTextBox = L.DomUtil.get("wktTextBox");
		this.wkt = new Wkt.Wkt();
		this.myLayer = L.geoJSON().addTo(map);

		this.wktButton = L.DomUtil.get("wktButton");
		L.DomEvent.on(this.wktButton, "click", this.mapWKTString, this);

		map.on("draw:created", this.shapesToWKT, this);

		return container;
		},


		/**
		* Is called when a user draws a shape using the on map drawing features.
		* Converts the shaped drawn into a Well-Known text string and inserts it into the
		* Well-Known text box.
		* @param {DomEvent} e - On draw.
		*/
		shapesToWKT: function(e){
		this.myLayer.clearLayers();
		this.options.edit['featureGroup'].clearLayers();

		this.options.edit['featureGroup'].addLayer(e.layer);
		let geoJson = e.layer.toGeoJSON();
		geoJson = geoJson['geometry'];

		this.wkt.read(JSON.stringify(geoJson));
		this.wktTextBox.value = this.wkt.write();
		},

		/**
		* Is called when a user clicks the draw button below the AstroMap.
		* Will take the Well-Known text string and draw the shape onto the map.
		* If the Well-Known text string is invalid an error will show in the text box.
		* @param {DomEvent} e - On Click of Well-Known text button.
		*/
		mapWKTString: function(e){
		this.myLayer.clearLayers();
		this.options.edit['featureGroup'].clearLayers();

		let wktValue = this.wktTextBox.value;

		this.wktTextBox.value = "";

		try {
		this.wkt.read(wktValue);
		}
		catch (err){
		alert("Invalid Well Known Text String");
		return;
		}

		let geoJson = this.wkt.toJson();

		let geojsonFeature = {
		"type": "Feature",
		"geometry": geoJson
		};

		this.myLayer.addData(geojsonFeature);
		}

		});