Created
January 8, 2021 14:27
-
-
Save riccardoklinger/13ee55261777c5f12e40118458fe7c19 to your computer and use it in GitHub Desktop.
DevLabs - Create a 2D map with a layer // source https://jsbin.com/takemum
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <title>DevLabs - Create a 2D map with a layer</title> | |
| <style> | |
| html, body, #viewDiv { | |
| padding: 0; | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> | |
| <script src="https://js.arcgis.com/4.7/"></script> | |
| <script> | |
| require([ | |
| "esri/Map", | |
| "esri/views/MapView", | |
| "esri/layers/FeatureLayer", | |
| "dojo/domReady!" | |
| ], function(Map, MapView, FeatureLayer) { | |
| var map = new Map({ | |
| // Challenge | |
| basemap: "satellite" | |
| }); | |
| // Challenge - Park and Open Space (Polygons) | |
| var featureLayer = new FeatureLayer({ | |
| url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer", | |
| outFields: ["*"], | |
| popupTemplate: { | |
| title: "{PARK_NAME}", | |
| content: "{*}" | |
| } | |
| }); | |
| map.add(featureLayer); | |
| // Challenge - Trails (Lines) | |
| var featureLayer2 = new FeatureLayer({ | |
| url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer", | |
| outFields: ["*"], | |
| popupTemplate: { | |
| title: "{TRL_NAME}", | |
| content: "{*}" | |
| }, | |
| //definitionExpression: "ELEV_GAIN < 250" // Challenge | |
| }); | |
| map.add(featureLayer2); | |
| // Trail Heads (Points) | |
| var featureLayer3 = new FeatureLayer({ | |
| url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer", | |
| outFields: ["TRL_NAME","CITY_JUR", "LAT", "LON"], | |
| popupTemplate: { | |
| title: "{TRL_NAME}", | |
| content: "This trail is in {CITY_JUR} and located at {LAT}, {LON}." | |
| } | |
| }); | |
| map.add(featureLayer3); | |
| var view = new MapView({ | |
| container: "viewDiv", | |
| map: map, | |
| center: [-118.60,34.05], | |
| zoom: 10 | |
| }); | |
| });</script> | |
| </head> | |
| <body> | |
| <div id="viewDiv"></div> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <title>DevLabs - Create a 2D map with a layer</title> | |
| <style> | |
| html, body, #viewDiv { | |
| padding: 0; | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> | |
| <script src="https://js.arcgis.com/4.7/"><\/script> | |
| <script> | |
| require([ | |
| "esri/Map", | |
| "esri/views/MapView", | |
| "esri/layers/FeatureLayer", | |
| "dojo/domReady!" | |
| ], function(Map, MapView, FeatureLayer) { | |
| var map = new Map({ | |
| // Challenge | |
| basemap: "satellite" | |
| }); | |
| // Challenge - Park and Open Space (Polygons) | |
| var featureLayer = new FeatureLayer({ | |
| url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer", | |
| outFields: ["*"], | |
| popupTemplate: { | |
| title: "{PARK_NAME}", | |
| content: "{*}" | |
| } | |
| }); | |
| map.add(featureLayer); | |
| // Challenge - Trails (Lines) | |
| var featureLayer2 = new FeatureLayer({ | |
| url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer", | |
| outFields: ["*"], | |
| popupTemplate: { | |
| title: "{TRL_NAME}", | |
| content: "{*}" | |
| }, | |
| //definitionExpression: "ELEV_GAIN < 250" // Challenge | |
| }); | |
| map.add(featureLayer2); | |
| // Trail Heads (Points) | |
| var featureLayer3 = new FeatureLayer({ | |
| url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer", | |
| outFields: ["TRL_NAME","CITY_JUR", "LAT", "LON"], | |
| popupTemplate: { | |
| title: "{TRL_NAME}", | |
| content: "This trail is in {CITY_JUR} and located at {LAT}, {LON}." | |
| } | |
| }); | |
| map.add(featureLayer3); | |
| var view = new MapView({ | |
| container: "viewDiv", | |
| map: map, | |
| center: [-118.60,34.05], | |
| zoom: 10 | |
| }); | |
| });<\/script> | |
| </head> | |
| <body> | |
| <div id="viewDiv"></div> | |
| </body> | |
| </html> </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment