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
|
431
|
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
|
884
|
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
|
900
|
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
|
438
|
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
|
570
|
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
|
836
|
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
|
3
|
0
|
779
|
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
|
1867
|
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
|
1874
|
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
|
1897
|
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
|
1909
|
POST
|
Hi mukul chavan, I found this map through the Living Atlas: https://www.arcgis.com/home/item.html?id=d7c21ac2f29348cebf45f70515f72a42 The underlying service can be found here: https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0 At the bottom of this page you will find a link to query the service: https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0/query Here you can enter your parameters - see screen capture. BR, Egge-Jan
... View more
09-09-2020
06:17 AM
|
1
|
1
|
3232
|
POST
|
Hi mukul chavan, I think you should have a look at the ArcGIS REST API: ArcGIS REST API | ArcGIS for Developers Below you will find an example retrieving the boundary of the state of Arizona: https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0/query?where=STA… HTH, Egge-Jan
... View more
09-09-2020
04:40 AM
|
1
|
3
|
3232
|
POST
|
Hi Paul Fausey, Did you have a look at the online help? ArcGIS Pro | 2D and 3D GIS Mapping Software There you will also find information on editing: Editing in ArcGIS Pro—ArcGIS Pro | Documentation And there is Esri Academy where you can search for the training you need. Hope this helps to get you started. BR, Egge-Jan
... View more
09-09-2020
12:29 AM
|
0
|
0
|
1385
|
POST
|
Hoi Joris Bak, Hallo Content Team, Zou het mogelijk zijn om de gebiedsindeling van de Nederlandse netbeheerders voor elektriciteit, gas en water in jullie aanbod op te nemen? Zodat deze indelingen gemakkelijk vanuit ArcGIS Online en/of de Living Atlas als lagen aan kaarten en applicaties toegevoegd kunnen worden. Deze informatie kan in veel gevallen nuttig zijn, zeker nu met de hele energietransitie waar we als B.V. Nederland mee bezig zijn. De gebiedsindelingen van de netbeheerders zijn beschikbaar als open data, zie: Gebiedsindeling Netbeheerders Elektriciteit, Gas en Water | Data overheid. Deze dataset is eigendom van de stichting Mijnaansluiting.nl, maar ze zijn vrijgegeven onder de licentie CC-0 (1.0). Ze worden aangeboden als WFS service: https://opendata.polygonentool.nl/wfs?request=GetCapabilities (Let op: de service is beschermd met een gebruikersnaam en een wachtwoord. Deze credentials staan gepubliceerd op de hierboven genoemde pagina van Data overheid, op het tabblad metadata, bij de beschrijving. De gebruikersnaam en het wachtwoord zijn identiek aan elkaar, en komen overeen met het eerste deel van de url, tussen de slashes en de eerste punt - hierboven vet gemarkeerd.) Jullie weten zelf hoe lastig dit WFS formaat is, en het zou zeer handig zijn, voor meerdere organisaties en partijen in Nederland die ArcGIS gebruiken, als deze data via ArcGIS Online beschikbaar zou zijn. Ik hoor graag wat jullie van deze suggestie vinden. Groet, Egge-Jan
... View more
09-04-2020
04:32 AM
|
2
|
2
|
3734
|
Title | Kudos | Posted |
---|---|---|
1 | 04-15-2024 03:25 AM | |
2 | 03-25-2024 02:06 PM | |
1 | 01-17-2024 10:19 AM | |
1 | 03-30-2023 05:57 AM | |
2 | 02-02-2023 02:47 PM |
Online Status |
Offline
|
Date Last Visited |
05-22-2024
01:27 AM
|