geog4046instructor

/*
 * This example shows how to use circle markers to represent GeoJSON point data
 * instead of Leaflet's default blue marker. This snippet assumes the map (map),
 * basemap (streets), and GeoJSON (myLayerData) have already been declared.
 */

// create an object with a list of options to style the circle marker
// see http://leafletjs.com/reference-1.3.0.html#path for additional options
var myLayerStyle = {
  color: 'Orange',

geog4046instructor

/*
 * This example shows how to add a layer list to a map where users can check and
 * and uncheck a box to show and hide a GeoJSON layer. This snippet assumes
 * the map (map), basemap (streets), and GeoJSON (myLayerData) have already been
 * declared.
 */

// create an operational layer that is empty for now
let myLayer = L.layerGroup().addTo(map)

geog4046instructor

/* Change the map or scene view by making the camera "fly" to a new latitude and longitude. Note the lat/lng are reversed. 
 *
 */
map.flyTo( [34.69, -117.76], 8, { animate:true, duration:1 } ) // for Leaflet maps
scene.goTo({ center: [-117.76, 34.69], zoom: 8 }) // for ArcGIS web scenes


/* To change the camera location but keep the current zoom level, you could provide flyTo and goTo with a zoom value equal
 * to the map or scene's current zoom obtained with the map.getZoom() method in Leaflet and the scene.zoom property in ArcGIS.
 */

geog4046instructor

/* This example will listen for a click on an HTML element, in this case a button with id="my-btn",
 * and show/hide a specified layer, in this case myLayer.
 *
 */

// wait for the user to click an element with id="my-btn", then run this code
jQuery( '#my-btn' ).click( function(){
  if ( map.hasLayer( myLayer ) ){  // if the specified layer is visible on the map, it needs to be removed
    map.removeLayer( myLayer )
    return

geog4046instructor

/* This example is similar to the leaflet-layer-control.js example:
 * (https://gist.github.com/geog4046instructor/65f38124e3f56f11c9461b23335c0c92)
 * but this example only adds basemaps (tileLayer) to the control.
 */

// create a street map layer and add it to the map, making it the default basemap
let streets = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' ).addTo( map )

// create a satellite imagery layer
let satellite = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' )

geog4046instructor

/*
 * This example loads a 3D globe with basemap and layers published to ArcGIS Online. To use another scene with this code,
 * change the id of the portalItem. The "container" value should match the id of the map div specified in the HTML. 
 */

require([
  "esri/views/SceneView",
  "esri/WebScene",
  "dojo/domReady!"
],

geog4046instructor

/*
 * This example shows how to add a layer list to a map where users can check and uncheck boxes to show and hide layers.
 * The code below is combined with the code to add geojson to a map, since those two things are often used together.
 * The code consists of five main parts:
 *    1. Create the basemap(s) and layer(s)
 *    2. Get geojson data and run a function to add it to a layer from step 1
 *    3. Create the function that will be run in step 2
 *    4. Create the list of layers that will appear in the control component
 *    5. Create the control component
 */

geog4046instructor

/*
 * Create a custom icon to use with a GeoJSON layer instead of the default blue
 * marker. This snippet assumes the map object (map) and GeoJSON object
 * (myLayerData) have already been declared.
 */

// replace Leaflet's default blue marker with a custom icon
function createCustomIcon (feature, latlng) {
  let myIcon = L.icon({
    iconUrl: 'my-icon.png',

geog4046instructor

/* 
 * Create a circle symbol to use with a GeoJSON layer instead of the default blue marker
 */

// This will be run when L.geoJSON creates the point layer from the GeoJSON data.
function createCircleMarker( feature, latlng ){
  // Change the values of these options to change the symbol's appearance
  let options = {
    radius: 8,
    fillColor: "lightgreen",

geog4046instructor

/* This example demonstrates how to create a popup for a GeoJSON layer
 * "YOUR_FIELD_NAME" should be the name of an attribute of the GeoJSON layer.
 * Any string can be used in bindPopup(), including HTML. 
 */
function createPopup(feature, layer) {
  // code here will run when a feature on the map is clicked.
  layer.bindPopup(feature.properties.YOUR_FIELD_NAME) // show the clicked feature's attribute value in a popup
  // some other code can go here, like adding the layer to a layer group so it can be shown on a control
}