I'm in a project that I will need to show a map of "arcgis", can not be the map of google Maps, on the site of "arcgis" there is an example to show the code with javascript, here's the link: https://developers.arcgis.com/javascript/latest/display-a-map/, in the example the code is placed in the "head" of html, placing the head code as shown in the tutorial works, but in the project the "head" is in a template, and not on the page I want to show the map. The code of arcgis is as follows: .
< html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.22/"></script> <script> require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) { // Here will come the implementation of the map }); </script> < /head> < body> <div id="viewDiv">The map will appear here</div> < /body> < /html>
If I remove that part of the code that's in the head
<script> require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) { // Here will come the implementation of the map, where I will inform the coordinates }); </script> < div id="viewDiv"></div>
And put on the page I want to show the map does not load ... No error appears in the console, simply does not load, I put several "consoles.log(" to follow the processing and everything is ok, apparently it's all loaded
There is a project that uses this map, but the implementation was done in Angular, the code is as follows:
return loadModules([ "esri/config", "esri/Map", "esri/views/MapView", ]).then(([esriConfig, Map, MapView]) => { // Starts the map implementation by picking up the coordinates ... ...
Is there any way to implement in javaScript something similar to what was implemented in Angular?
I need to click a button and make that call to JavaScript
The project is Java 7 with PrimeFaces 3.5
Hello, the code below works for me. Substitute your API KEY appropriately.
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
/>
</head>
<body>
<h1>This is an ArcGIS Map</h1>
<script src="https://js.arcgis.com/4.22/"></script>
<script>
require(["esri/config", "esri/Map", "esri/views/MapView"], function (
esriConfig,
Map,
MapView
) {
esriConfig.apiKey =
"YOUR_API_KEY";
const map = new Map({
basemap: "arcgis-topographic", // Basemap layer service
});
const view = new MapView({
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv", // Div element
});
});
</script>
<div style="height: 50%; width: 50%" id="viewDiv"></div>
</body>
</html>
Is that what you wanted?
It looks like you might be missing the CSS for the viewDiv. Here's the snippet from the sample:
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>
Or you can just add the needed style when creating the div:
<div id="viewDiv" style="height: 100%;width: 100%;"></div>