Skip to content

Instantly share code, notes, and snippets.

@riccardoklinger
Created January 8, 2021 14:27
Show Gist options
  • Save riccardoklinger/13ee55261777c5f12e40118458fe7c19 to your computer and use it in GitHub Desktop.
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
<!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