geog4046instructor

/* Create a simple map with the ArcGIS JavaScript API.
 * example: http://developers.arcgis.com/javascript/samples/map_simple/
 */
require([
  "esri/map", // modules need to be added to this list before dojo/domReady, separated by a comma and enclosed in quotation marks
  "dojo/domReady!" 
], function (
  Map // the names of functions corresponding to the modules need to be added to this list, separated by a comma
) {
  let map = new Map("map", {

geog4046instructor

/* Add layer(s) from an ArcGIS web service
 *
 * function name: ArcGISDynamicMapServiceLayer
 * module name: "esri/layers/ArcGISDynamicMapServiceLayer"
 * documentation: https://developers.arcgis.com/javascript/jssamples/map_dynamic.html
 * example: http://developers.arcgis.com/javascript/samples/map_dynamic/
 */

// Create a layer object from an ArcGIS Server web service, with no options
let layer1 = new ArcGISDynamicMapServiceLayer( "http://example.com/arcgis/rest/services/Layer1/MapServer" );

geog4046instructor

/* Adds a map control to select a basemap. Requires a div with id="basemap-toggle" inside the map div.
 *
 * function name: BasemapToggle
 * module name: "esri/dijit/BasemapToggle"
 * documentation: https://developers.arcgis.com/javascript/jssamples/widget_toggle.html
 * example: http://developers.arcgis.com/javascript/samples/widget_toggle/
 */
 
let toggle = new BasemapToggle({
  map: map,

geog4046instructor

/* Create a basic map with the Google Maps JavaScript API.
 * documentation: https://developers.google.com/maps/documentation/javascript/examples/map-simple
 */

var map;
function initMap() {
  map = new google.maps.Map( document.getElementById( 'map' ), {
    center: { lat: 30, lng: -90 },
    zoom: 4
  });

geog4046instructor

/* Add layer(s) from an online KML or KMZ file
 *
 * function: google.maps.KmlLayer
 * documentation: https://developers.google.com/maps/documentation/javascript/examples/layer-kml
 */
 
let kml = new google.maps.KmlLayer({
  url: 'http://example.com/layer1.kmz',
  preserveViewport: true // setting to true will prevent the map from zooming to this layer
});

geog4046instructor

/* Get GeoJSON data from an external website using jQuery's getJSON function.
 *
 * function: getJSON
 * documentation: http://api.jquery.com/jquery.getjson/
 *
 * See the Leaflet documentation on using GeoJSON
 * http://leafletjs.com/examples/geojson/
 */
 
jQuery.getJSON( "http://example.com/layer1.geojson", function( geojsonFeature ) {

geog4046instructor

/* Resize and position the basemap control on an ArcGIS map. Requires a #basemap-toggle div inside of the #map div */
#basemap-toggle {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 50;
}

geog4046instructor

/* For Bootstrap 3. Create a full-page background image on the Bootstrap "Cover" template 
 * Cover template: https://getbootstrap.com/examples/cover
 * CSS code credit: http://stackoverflow.com/questions/25556622/bootstrap-cover-template-where-to-place-image
 */
body {
  background: url(../img/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

geog4046instructor

/* This example demonstrates how to create a popup, or an "infowindow", from
 * GeoJSON data (USGS earthquake feed). "place" and "mag" are the names of properties in the GeoJSON file. 
 * This code can be placed before or after other code for adding layers.
 */
map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson');

// Create an infowindow object to use later
var infowindow = new google.maps.InfoWindow();

/* Create a "listener" that will wait for the user to click an earthquake point,

geog4046instructor

/* Print the year in the format YYYY between any HTML tags with class="current-year"
 */
var currentYear = new Date().getFullYear()
jQuery( ".current-year" ).text( currentYear )