Commit 210f1126 authored by Jacob Kaufman's avatar Jacob Kaufman
Browse files

Added Draw control 

- added Draw.js
- added dependencies to json
- added to map
-added text box and button place holders to html file
parent 761ce075

app/package-lock.json

+10 −0
Original line number Diff line number Diff line
@@ -5247,6 +5247,11 @@ 
      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",

      "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="

    },

    "leaflet-draw": {

      "version": "1.0.4",

      "resolved": "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz",

      "integrity": "sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ=="

    },

    "leaflet-fullscreen": {

      "version": "1.0.2",

      "resolved": "https://registry.npmjs.org/leaflet-fullscreen/-/leaflet-fullscreen-1.0.2.tgz",
@@ -11275,6 +11280,11 @@ 
      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",

      "dev": true

    },

    "wicket": {

      "version": "1.3.5",

      "resolved": "https://registry.npmjs.org/wicket/-/wicket-1.3.5.tgz",

      "integrity": "sha512-DsGYwYn5ToLyqFL7oeko6y5UHsuluMyvAOQTTL0nbzWxJY/KT3sprY+BEOXkNxnqmcdjGn0YYG6DvzwKIL66ow=="

    },

    "wkt-parser": {

      "version": "1.2.3",

      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.2.3.tgz",

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

+13 −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,16 @@ export default class MapContainer extends Component { 
      numDigits: 2,

    }).addTo(map);



    let drawnItems = new L.FeatureGroup();

    map.addLayer(drawnItems);

    

    let drawControl = new Draw({

      edit: {

        featureGroup: drawnItems

      },

      targetMap: map

    }).addTo(map);



    map.on("fullscreenchange", this.handleFullScreenChange());

  }
@@ -45,6 +57,7 @@ export default class MapContainer extends Component { 
      numDigits: 2,

      targetPlanet: this.props.target

    }).addTo(map);



    new L.Control.Scale({ imperial: false }).addTo(map);

    map.on("fullscreenchange", this.handleFullScreenChange());

  }

app/src/index.html

+7 −0
Original line number Diff line number Diff line
@@ -6,8 +6,15 @@ 
  name="viewport"

  content="minimum-scale=1, initial-scale=1, width=device-width"

/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>

    <title>CartoCosmos</title>

</head>

<body>

    <div id="map"></div>

    <br><br><br>

    <br>

    Well Know 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
+91 −0
Original line number Diff line number Diff line 
import "leaflet";

import "leaflet-draw";

import Wkt from "wicket";

import { func } from "prop-types";





export default L.Control.AstroDraw = L.Control.Draw.extend({

	options: {

		position: 'topleft',

		draw: {},

    edit: false

  },



  onAdd: function (map) {

    let container = L.DomUtil.create('div', 'leaflet-draw'),

			addedTopClass = false,

			topClassName = 'leaflet-draw-toolbar-top',

      toolbarContainer;



		for (var 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.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;

  },



  shapesToWKT: function(e){

    this.myLayer.clearLayers();

    this.options.edit['featureGroup'].clearLayers();

    let wktTextBox = L.DomUtil.get("wktTextBox");

    let wkt = new Wkt.Wkt();



    this.options.edit['featureGroup'].addLayer(e.layer);

    let geoJson = e.layer.toGeoJSON();

    geoJson = geoJson['geometry'];



    wkt.read(JSON.stringify(geoJson));

    wktTextBox.value = wkt.write();

  },



  mapWKTString: function(e){

    this.myLayer.clearLayers();

    this.options.edit['featureGroup'].clearLayers();



    let wkt = new Wkt.Wkt();

    let wktTextBox = L.DomUtil.get("wktTextBox");

    let wktValue = wktTextBox.value;



    wktTextBox.value = "";



    try {

      wkt.read(wktValue);

    }

    catch (err){

      alert("Invalid Well Known Text String");

      return;

    }



    let geoJson = wkt.toJson();



    let geojsonFeature = {

      "type": "Feature",

      "geometry": geoJson

    };



    this.myLayer.addData(geojsonFeature);

  }



});