LilyPerr/ember.markdown

## ember.markdown

      
    Raw
  

              ember.markdown
            
          
    Ember

A Pen by Lily Perry on CodePen.
License.

  
## index.html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Ember</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    require([
      //for my webmap
      "esri/WebMap",
      "esri/views/MapView",

      //for finding user's location
      "esri/widgets/Locate",

      //for creating a route
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet",
      "esri/Graphic",

      //for everything -.-
      "dojo/domReady!"
    ], function(WebMap, MapView, Locate, RouteTask, RouteParameters, FeatureSet, Graphic) {

      //show my webmap, which is made with ArcGIS for Developers
      var webmap = new WebMap({
        portalItem: {
         id: "06e54aad6a27425188c3186b3bb4a52c"
        },
         basemap: "streets-navigation-vector"
      });

      //display the webmap I created
      var view = new MapView({
        container: "viewDiv",
        map: webmap,
        center: [-120.71511,38.09042],
        //sacramento:38.5816° N, 121.4944° W
        //huang: 37.4277° N, 122.1742° W
        zoom: 8
      });

      //show the user's location
      var locate = new Locate({
        view: view,
        useHeadingEnabled: false,
        goToOverride: function(view, options) {
         options.target.scale = 1500;
         return view.goTo(options.target);
        }
      });
      view.ui.add(locate, "top-left");

      //set-up for finding a route
      var routeTask = new RouteTask({
         url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
      });

      //for creating start/end points
      view.on("click", function(event){
        if (view.graphics.length === 0) {
          addGraphic("start", event.mapPoint);
        } else if (view.graphics.length === 1) {
          addGraphic("finish", event.mapPoint);
          // Call the route service
          getRoute();
        } else {
          view.graphics.removeAll();
          addGraphic("start",event.mapPoint);
        }
      });

      //adding points when location routing chosen
      function addGraphic(type, point) {
        var graphic = new Graphic({
          symbol: {
            type: "simple-marker",
            color: (type === "start") ? "white" : "black",
            size: "8px"
          },
          geometry: point
        });
        view.graphics.add(graphic);
      }

      //execute routing task
      function getRoute() {
        // Setup the route parameters
        var routeParams = new RouteParameters({
          stops: new FeatureSet({
            features: view.graphics
          }),
          returnDirections: true
        });
        // Get the route
        routeTask.solve(routeParams).then(function(data) {
          // Display the route
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });
        });
      }

      //for debugging
      //console.log(view.center)
    });
  </script>
</head>
<body>
  <!-- comments -->

  <!-- making an entry field -->
  <form>
    Phone Number:<br>
    <input type="text" name="phonenumber"><br>

    <!-- making a button -->
    <input type="submit" value="Submit">
  </form>

  <div id="viewDiv"></div>
</body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Ember</title>
	<style>
	html, body, #viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	</style>

	<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
	<script src="https://js.arcgis.com/4.10/"></script>

	<script>
	require([
	//for my webmap
	"esri/WebMap",
	"esri/views/MapView",

	//for finding user's location
	"esri/widgets/Locate",

	//for creating a route
	"esri/tasks/RouteTask",
	"esri/tasks/support/RouteParameters",
	"esri/tasks/support/FeatureSet",
	"esri/Graphic",

	//for everything -.-
	"dojo/domReady!"
	], function(WebMap, MapView, Locate, RouteTask, RouteParameters, FeatureSet, Graphic) {

	//show my webmap, which is made with ArcGIS for Developers
	var webmap = new WebMap({
	portalItem: {
	id: "06e54aad6a27425188c3186b3bb4a52c"
	},
	basemap: "streets-navigation-vector"
	});

	//display the webmap I created
	var view = new MapView({
	container: "viewDiv",
	map: webmap,
	center: [-120.71511,38.09042],
	//sacramento:38.5816° N, 121.4944° W
	//huang: 37.4277° N, 122.1742° W
	zoom: 8
	});

	//show the user's location
	var locate = new Locate({
	view: view,
	useHeadingEnabled: false,
	goToOverride: function(view, options) {
	options.target.scale = 1500;
	return view.goTo(options.target);
	}
	});
	view.ui.add(locate, "top-left");

	//set-up for finding a route
	var routeTask = new RouteTask({
	url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
	});

	//for creating start/end points
	view.on("click", function(event){
	if (view.graphics.length === 0) {
	addGraphic("start", event.mapPoint);
	} else if (view.graphics.length === 1) {
	addGraphic("finish", event.mapPoint);
	// Call the route service
	getRoute();
	} else {
	view.graphics.removeAll();
	addGraphic("start",event.mapPoint);
	}
	});

	//adding points when location routing chosen
	function addGraphic(type, point) {
	var graphic = new Graphic({
	symbol: {
	type: "simple-marker",
	color: (type === "start") ? "white" : "black",
	size: "8px"
	},
	geometry: point
	});
	view.graphics.add(graphic);
	}

	//execute routing task
	function getRoute() {
	// Setup the route parameters
	var routeParams = new RouteParameters({
	stops: new FeatureSet({
	features: view.graphics
	}),
	returnDirections: true
	});
	// Get the route
	routeTask.solve(routeParams).then(function(data) {
	// Display the route
	data.routeResults.forEach(function(result) {
	result.route.symbol = {
	type: "simple-line",
	color: [5, 150, 255],
	width: 3
	};
	view.graphics.add(result.route);
	});
	});
	}

	//for debugging
	//console.log(view.center)
	});
	</script>
	</head>
	<body>
	<!-- comments -->

	<!-- making an entry field -->
	<form>
	Phone Number:<br>
	<input type="text" name="phonenumber"><br>

	<!-- making a button -->
	<input type="submit" value="Submit">
	</form>

	<div id="viewDiv"></div>
	</body>
	</html>