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
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>