Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (99 sloc) 2.9 KB
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the layers-csv sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/layers-csv/index.html
-->
<title>CSVLayer - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/layers/CSVLayer",
"esri/views/SceneView"
], function(Map, CSVLayer, SceneView) {
// If CSV files are not on the same domain as your website, a CORS enabled server
// or a proxy is required.
var url =
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
// Paste the url into a browser's address bar to download and view the attributes
// in the CSV file. These attributes include:
// * mag - magnitude
// * type - earthquake or other event such as nuclear test
// * place - location of the event
// * time - the time of the event
const template = {
title: "Info séisme",
content: "Magnitude {mag} {type} a frappé {place} le {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
]
};
var csvLayer = new CSVLayer({
url: url,
copyright: "USGS Earthquakes",
popupTemplate: template,
elevationInfo: {
// drapes icons on the surface of the globe
mode: "on-the-ground"
}
});
csvLayer.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: { color: [238, 69, 0, 0.75] },
outline: {
width: 0.5,
color: "white"
},
size: "12px"
}
]
}
};
var map = new Map({
basemap: "oceans",
layers: [csvLayer]
});
var view = new SceneView({
container: "viewDiv",
center: [138, 35],
zoom: 4,
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
You can’t perform that action at this time.