POST
|
Could this be useful? Building ArcGIS API for JavaScript Apps with NextJS (esri.com). It comes with the source code for the application in this blog post on github.
... View more
01-18-2024
04:54 AM
|
0
|
3
|
390
|
POST
|
Yes, as @BlakeTerhune suggests, you should really consider, while you are already migrating from 3.x to 4.x, to also leave the legacy AMD modules, with their require() statement, behind and switch to ES Modules instead. For a quick comparison between AMD and ES, you might have a look at this blog post by @AndyGup : ArcGIS API for JavaScript – Working with frameworks and build tools just got easier – Part 2 (esri.com). And sample apps, provided by Esri, ae available here: jsapi-resources/esm-samples at main · Esri/jsapi-resources · GitHub
... View more
01-17-2024
10:19 AM
|
1
|
0
|
459
|
POST
|
Hi @vijaybadugu, Have you seen this page already? Migrating from 3.x to 4.28 | Overview | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers Here an overview is provided for developers like yourself, with knowledge of and experience with the 3.x API, looking to migrate to 4.x. Most important message here, as far as I am concerned: Consider rewriting applications instead of simply trying to update them. And if you have any more specific challenges, this community is there to help. Always. Cheers, Egge-Jan
... View more
01-17-2024
09:16 AM
|
0
|
2
|
505
|
POST
|
Hi, Search | API Reference | ArcGIS Maps SDK for JavaScript 4.26 | ArcGIS Developers includeDefaultSources: false Cheers, Egge-Jan
... View more
05-10-2023
09:21 AM
|
0
|
0
|
401
|
POST
|
You may try something like this: center: new Point({x: 500000, y: 500000, spatialReference: 27700}) For a fully working example, please have a look at the script shown in this post: ArcGIS JavaScript with UK data - URL.searchParams - Esri Community Cheers, Egge-Jan
... View more
03-30-2023
05:57 AM
|
1
|
0
|
304
|
POST
|
Hi @aggarwalarpit93, Please see screen dump attached: your data in an application without a basemap. I slightly modified your code (see below) and, next to the districts I also added the settlements, which will become visible when you zoom in. Yeah, zooming in and zooming out is working fine. And yeah, @Sage_Wall is right: you should use the scale instead of the zoom property. HTH, Egge-Jan <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Test: no background map</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.25/"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
#header {
width: 100%;
height: 70px;
background-color: #154273;
color:#FFFFFF;
margin: 0;
}
#headertext {
float: left;
font-size: 35px;
color: white;
line-height: 70px;
padding-left: 15px;
}
#viewDiv {
position: absolute;
top: 70px;
bottom: 0;
right: 0;
left: 0;
padding: 0;
margin: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"esri/widgets/Expand",
], (Map, MapView, FeatureLayer, LayerList, Expand) => {
const map = new Map();
const settlementLayer = new FeatureLayer({
url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/4",
minScale: 100000
});
const districtLayer = new FeatureLayer({
url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/22",
});
map.addMany([districtLayer, settlementLayer]);
const view = new MapView({
map: map,
center: [85.7780685, 25.8560264],
scale: 1800000,
container: "viewDiv",
});
const layerList = new LayerList({
view: view,
listItemCreatedFunction: function(event){
const item = event.item;
item.actionsSections = [
[
{
title: item.layer.title,
className: "esri-icon-description",
id: "information"
}
]
];
}
});
layerList.on("trigger-action", function(event) {
if (event.action.id === "information") {
// If the information action is triggered, then open the item details page of the service layer.
window.open(event.item.layer.url);
}
});
const layerListExpand = new Expand({
expandIconClass: "esri-icon-layers",
// expandTooltip: layerList.label,
expandTooltip: "LayerList",
view: view,
expanded: true,
content: layerList,
group: "expandable-widgets"
});
view.ui.add([layerListExpand], "top-right")
});
</script>
</head>
<body>
<div id="header">
<div id="headertext" class="stretch">Test: no background map</div>
</div>
<div id="viewDiv"></div>
</body>
</html>
... View more
02-16-2023
03:19 PM
|
0
|
1
|
623
|
POST
|
Hi, Can you add your own custom buttons to an ArcGIS JavaScript application, one with your own picture, I mean? ArcGIS Maps SDK for JavaScript example: custom button The SDK comes with a load of widgets, all with their own icons, and for your custom buttons there is a whole set of Esri Icon Fonts (Calcite theme) available. But now I want to add my own icon, is that possible? I stumbled into this post use of custom icon, where it was suggested to use calcite-action. And yeah, with this information I managed to use my own SVG image in a button - see code below. It is a huge image - 924 by 924 pixels! - but because it is a fully Scalable Vector Graphic I can squeeze it down to 25x25px. And to stick with the Esri branded theme I use a fill color of #6e6e6e. In this way it fits in nicely with the rest of the UI. What do you think? Cheers, Egge-Jan TWIAV | ArcGIS JavaScript example - custom button <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>TWIAV | ArcGIS JavaScript example - custom button</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css">
<script src="https://js.arcgis.com/4.25/"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
#header {
width: 100%;
height: 70px;
background-color: #154273;
color:#FFFFFF;
margin: 0;
}
#headertext {
float: left;
font-size: 35px;
color: white;
line-height: 70px;
padding-left: 15px;
}
#viewDiv {
position: absolute;
top: 70px;
bottom: 0;
right: 0;
left: 0;
padding: 0;
margin: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView"
], function(Map, Point, MapView) {
const map = new Map({
basemap: { portalItem: { id: "7aea6fa913a94176a1074edb40690318" } } // Topo RD --> https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318
});
const view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({ x: 145430, y: 427100, spatialReference: 28992 }),
zoom: 10
});
view.when(() => {
createZoomEntireCountryBtn();
view.ui.add(["zoomEntireCountryBtn"], "top-left")
});
/*******************************************************************************
* Start zoom to entire country
*******************************************************************************/
function createZoomEntireCountryBtn() {
const zoomEntireCountryBtnDiv = document.createElement('div');
zoomEntireCountryBtnDiv.innerHTML = `
<div id="zoomEntireCountryBtn" class="esri-component esri-widget--button esri-widget" role="button">
<span title="Zoom uit op heel Nederland"><calcite-action><img src="nederland.svg" style="width:25px;height:25px;" alt="nederland"></calcite-action></span>
</div>`;
document.body.appendChild(zoomEntireCountryBtnDiv);
document.getElementById("zoomEntireCountryBtn").addEventListener("click", zoomEntireCountry);
}
function zoomEntireCountry() {
view.goTo({
center: new Point({ x: 155000, y: 463000, spatialReference: 28992 }),
zoom: 3
});
}
/*******************************************************************************
* End zoom to entire country
*******************************************************************************/
});
</script>
</head>
<body>
<div id="header">
<div id="headertext" class="stretch">ArcGIS Maps SDK for JavaScript example: custom button</div>
</div>
<div id="viewDiv"></div>
</body>
</html>
... View more
02-02-2023
02:47 PM
|
2
|
0
|
611
|
POST
|
OK. Cool. Thanks for your swift reply 🙂 Previously (in 4.11) it worked directly, without the need to wait for the widget to be loaded. But apparently the library has grown to such a level of complexity that this additional step is needed. Thanks again. Will go and apply this new knowledge immediately.
... View more
01-27-2023
12:48 PM
|
0
|
0
|
342
|
POST
|
Hi all, I have a little question about Localization when using the Expand widget. Actually, I have asked the same question way back in 2019, and I got a satisfactory answer at the time from @KellyHutchins. The solution provided back then worked in the JS API 4.11 but stopped working a few releases later (4.17? 4.18?). But the issue remains, so I am searching for an alternative solution. Issue: I love this Localization in the JavaScript Maps SDK, with the SDK automatically using the locale of the browser. So, in my case everything is showing in Dutch. Cool. Now I have a little issue: I like my widgets to be collapsed, so I have put my Search widget within an Expand widget. The question is about localization when using the Expand widget: the expandTooltip defaults to "Expand" for English locale, whereas I want it to read "Search" or "Find address or place". I can modify the expandTooltip, but then I will loose the advantages of localization. So, is there a way to replace the hard coded "Find address or place" with a string that will be localized? expandTooltip: "Find address or place", // loss of localization :-( The solution given at the time was to use the searchWidget.label (and, as I said, this worked like a charm in 4.11) like this: expandTooltip: searchWidget.label, // "Search" in stead of the default "Expand" for English locale But not anymore... so, how would I solve this issue in 4.25? Thanks in advance for your help, Egge-Jan
... View more
01-27-2023
06:27 AM
|
0
|
2
|
474
|
POST
|
Hi, The example you are referring to on stackoverflow has been created with the legacy ArcGIS API for JavaScript 3.x. I can imagine that you would prefer to use the (new) ArcGIS Maps SDK for JavaScript 4.x. Can you please explain us a little more what it is that you want to accomplish? Are you not just looking for a Popup? The Popup widget allows users to view content from feature attributes. There are several samples available on how to use a Popup, e.g. Custom popup content. HTH, Egge-Jan
... View more
01-24-2023
04:54 AM
|
0
|
0
|
604
|
POST
|
Hi, I like to have my Previous extent and Next extent buttons in a web mapping application. Don't you? ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttonsBut as far as I know the (new) ArcGIS Maps SDK for JavaScript does not have a default widget for that. Is that correct? So, I have created an example with my own Previous and Next Buttons - see sample code below or click on the map to get to a working application. True, my version of these buttons owes a lot to work done by @RobertScheitlin__GISP (see his app with a navigation toolbar in this post.) I have updated the code for the two buttons to 4.25, removing dojo and replacing watchUtils with reactiveUtils. And I managed to group the two buttons together (like the zoom in and zoom out buttons) using esri css classes. I think it all works, more or less. Can you please test it and tell me what you think? Cheers, Egge-Jan TWIAV | ArcGIS JavaScript example - Previous and Next extent buttons <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>TWIAV | ArcGIS JavaScript example - Previous and Next extent buttons</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css">
<script src="https://js.arcgis.com/4.25/"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
#header {
width: 100%;
height: 70px;
background-color: #154273;
color:#FFFFFF;
margin: 0;
}
#headertext {
float: left;
font-size: 35px;
color: white;
line-height: 70px;
padding-left: 15px;
}
#viewDiv {
position: absolute;
top: 70px;
bottom: 0;
right: 0;
left: 0;
padding: 0;
margin: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/core/reactiveUtils"
], function(Map, MapView, reactiveUtils) {
var map = new Map({
basemap: "osm"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [0, 51.5]
});
createZoomPrevZoomNextBtns();
view.ui.add(["zoomPrevNextBtns"], "top-left");
/*******************************************************************************
* Start Zoom Previous and Zoom Next buttons
*******************************************************************************
* The solution presented here to add these 2 zoom buttons is based on work by RobertScheitlin__GISP.
* See his answer to this question:
* https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/does-the-class-quot-esri-toolbars-navigation-quot/m-p/567061
* Changes to the original RobertScheitlin__GISP solution: removed dojo and replaced watchUtils with reactiveUtils (to upgrade to 4.25)
*******************************************************************************/
_prevExtent = false;
_preExtent = null;
_currentExtent = null;
_extentHistory = [];
_extentHistoryIndx = 0;
_nextExtent = false;
reactiveUtils.when(
() => view.stationary === true,
() => {
extentChangeHandler(view.extent);
}
);
function createZoomPrevZoomNextBtns() {
const zoomPrevNextBtnsDiv = document.createElement('div');
zoomPrevNextBtnsDiv.innerHTML = `
<div id="zoomPrevNextBtns" class="esri-component esri-zoom">
<div id="zoomPrevBtn" class="esri-widget--button esri-widget esri-disabled" role="button">
<span title="Previous extent" id="zoomPrev" class="esri-icon esri-icon-left-arrow-circled"></span>
</div>
<div id="zoomNextBtn" class="esri-widget--button esri-widget esri-disabled" role="button">
<span title="Next extent" id="zoomNext" class="esri-icon esri-icon-right-arrow-circled"></span>
</div>
</div>`;
document.body.appendChild(zoomPrevNextBtnsDiv);
}
let l_zoomPrevBtn = document.getElementById("zoomPrevBtn");
l_zoomPrevBtn.addEventListener("click", zoomPreviousExtent);
let l_zoomNextBtn = document.getElementById("zoomNextBtn");
l_zoomNextBtn.addEventListener("click", zoomNextExtent);
function zoomNextExtent() {
_nextExtent = true;
_extentHistoryIndx++;
if (_extentHistoryIndx > _extentHistory.length - 1) { // this might happen if the user clicks the zoomNext button too often too fast
_extentHistoryIndx = _extentHistory.length - 1;
}
view.goTo(_extentHistory[_extentHistoryIndx].currentExtent);
}
function zoomPreviousExtent() {
if(_extentHistory[_extentHistoryIndx].preExtent){
_prevExtent = true;
view.goTo(_extentHistory[_extentHistoryIndx].preExtent);
_extentHistoryIndx--;
}
}
function extentChangeHandler(evt) {
if(_prevExtent || _nextExtent){
_currentExtent = evt;
}else{
_preExtent = _currentExtent;
_currentExtent = evt;
_extentHistory.push({
preExtent: _preExtent,
currentExtent: _currentExtent
});
_extentHistoryIndx = _extentHistory.length - 1;
}
_prevExtent = _nextExtent = false;
extentHistoryChange();
}
function extentHistoryChange() {
if(_extentHistory.length === 0 || _extentHistoryIndx === 0 ){
l_zoomPrevBtn.classList.add("esri-disabled");
} else {
l_zoomPrevBtn.classList.remove("esri-disabled");
}
if(_extentHistory.length === 0 || _extentHistoryIndx === _extentHistory.length - 1){
l_zoomNextBtn.classList.add("esri-disabled");
} else {
l_zoomNextBtn.classList.remove("esri-disabled");
}
}
/*******************************************************************************
* End Zoom Previous and Zoom Next buttons
*******************************************************************************/
});
</script>
</head>
<body>
<div id="header">
<div id="headertext" class="stretch">ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons</div>
</div>
<div id="viewDiv"></div>
</body>
</html>
... View more
01-12-2023
01:35 PM
|
2
|
0
|
559
|
POST
|
Yeah, that's what we started with: this 'cursor' property of the view is an undocumented feature. (I do not remember how I found out about it... Most probably I copied it from an example by someone else a few years ago...) But happy to see that my answer is (at least partly) true (for some cursors).
... View more
01-10-2023
01:58 PM
|
0
|
1
|
1268
|
POST
|
Hmmm... I am using Notepad++ as my favorite text editor. Can you please have a look at the code sample below? In this working example I do add a custom toggle button to the view.ui and when I click this button the cursor changes. I have tested this on my Windows machine in three major browsers (Chrome/Firefox/Edge). It might not work in IE 11, but I take that for granted... Can you please tell me whether this example works for you? Cheers, Egge-Jan <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Example: change cursor in view</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css">
<script src="https://js.arcgis.com/4.25/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView"
], function(Map, Point, MapView) {
let myCondition = false;
let map = new Map({
basemap: {
portalItem: {
id: "0bd3a4a6fd674a90a7d0a9e5f36fb59b" // OS Open Carto
}
}
});
let view = new MapView({
spatialReference: 27700,
container: "viewDiv",
map: map,
center: new Point({x: 500000, y: 500000, spatialReference: 27700}),
zoom: 7
});
createToggleBtn();
view.ui.add(["toggleBtn"], "top-right");
/*******************************************************************************
* Start Toggle button
*******************************************************************************/
function createToggleBtn() {
const toggleBtnDiv = document.createElement('div');
toggleBtnDiv.innerHTML = `
<div id="toggleBtn" class="esri-component esri-widget--button esri-widget" role="button">
<span title="Toggle button" id="toggle-button" class="esri-icon esri-icon-plus-circled"></span>
</div>`;
document.body.appendChild(toggleBtnDiv);
}
let l_toggleButton = document.getElementById("toggleBtn");
l_toggleButton.addEventListener("click", switchToggleeButton);
function switchToggleeButton(evt) {
if (myCondition === false) {
l_toggleButton.style.color = "white";
l_toggleButton.style.backgroundColor = "#8d8d8d";
view.cursor = "crosshair";
myCondition = true;
view.popup.autoOpenEnabled = false;
} else {
l_toggleButton.style.color = "#8d8d8d";
l_toggleButton.style.backgroundColor = "white";
view.cursor = "auto";
myCondition = false;
view.popup.autoOpenEnabled = true;
view.popup.close();
}
}
view.on("click", function(event){
if (myCondition) {
view.popup.open({
title: "Click",
content: "<b>You clicked on te map!</b>",
location: event.mapPoint
});
}
console.log("cursor: " + view.cursor);
});
/*******************************************************************************
* End Toggle button
*******************************************************************************/
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
01-10-2023
01:16 PM
|
1
|
1
|
1275
|
POST
|
Yes, you are right: I couldn’t find anything about this cursor-and-view in the docs either. But I can assure you that the above code snippet works for me, and it already does do so for a longtime: if myCondition is met, I get the crosshairs cursor and in all other circumstances the default cursor is showing. How come? I don’t know. It just works for me, really. Is there someone at the ArcGIS Maps SDK for JavaScript team who can explain?
... View more
01-09-2023
01:41 PM
|
0
|
1
|
1298
|
POST
|
Version 4.x is a substantial overhaul of the ArcGIS Maps SDK for JavaScript (formerly - until December 2022 - known as the ArcGIS API for JavaScript) and its mapping components. One major change is the introduction of views (MapViews for 2D and SceneViews for 3D) to separate the map and the way it is displayed: At 4.0, a Map can be displayed in 2D or 3D. Because of this, the drawing logic was revised. The Map and Layers no longer handle the drawing logic, instead it is now handled by Views. (see: Migrating from 3.x to 4.25 | ArcGIS Maps SDK for JavaScript 4.25 > Views) So, your cursor is no longer linked to the map but to the view. An example of changing the cursor when a certain condition is met would be something like this: if (myCondition) {
view.cursor = "crosshair";
} else {
view.cursor = "auto";
} HTH, Egge-Jan
... View more
01-09-2023
05:06 AM
|
0
|
1
|
1310
|
Title | Kudos | Posted |
---|---|---|
1 | 01-17-2024 10:19 AM | |
1 | 03-30-2023 05:57 AM | |
2 | 02-02-2023 02:47 PM | |
2 | 01-12-2023 01:35 PM | |
2 | 06-16-2020 01:58 PM |
Online Status |
Offline
|
Date Last Visited |
01-22-2024
05:42 PM
|