Latest Contributions by ChristianBischof

‎06-05-2020

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Popup for WMS - 4.15</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.15/"></script> <script> var view; require([ "esri/Map", "esri/layers/WMSLayer", "esri/views/MapView", ], function (Map, WMSLayer, MapView) { var map = new Map({ basemap: "gray", }); view = new MapView({ container: "viewDiv", map: map, center: [7, 51.5], zoom: 9, }); var layer = new WMSLayer({ url: "https://www.wms.nrw.de/wms/krankenhaus", featureInfoFormat: "text/html", featureInfoUrl: "https://www.wms.nrw.de/wms/krankenhaus?", sublayers: [ { name: "krankenhaus", popupEnabled: true, }, ], }); map.add(layer); view.when(function () { view.popup.autoOpenEnabled = false; view.on("click", function (event) { var info = layer.getFeatureInfo(); console.log(info) view.popup.open({ location: event.mapPoint }); }); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Add the lines which add the click event handler (form line 59) to your code. The popup should open at the click event's location

‎06-05-2020

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  <title>Intro to MapView - Create a 2D map - 4.15</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.15/"></script> <script> require(["esri/Map", "esri/views/MapView"], function(Map, MapView) { var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", map: map, zoom: 4, center: [15, 65] // longitude, latitude }); view.when(disableZooming); function disableZooming(view) { view.popup.dockEnabled = true; // Removes the zoom action on the popup view.popup.actions = []; // stops propagation of default behavior when an event fires function stopEvtPropagation(event) { event.stopPropagation(); } // disables pinch-zoom and panning on the view view.on("drag", stopEvtPropagation); // disable the view's zoom box to prevent the Shift + drag // and Shift + Control + drag zoom gestures. view.on("drag", ["Shift"], stopEvtPropagation); view.on("drag", ["Shift", "Control"], stopEvtPropagation); // prevents zooming with the + and - keys view.on("key-down", function (event) { var prohibitedKeys = ["+", "-", "Shift", "_", "="]; var keyPressed = event.key; if (prohibitedKeys.indexOf(keyPressed) !== -1) { event.stopPropagation(); } }); return view; } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Another suggestion is to navigate the map only by zooming functionality and prevent the paning from happening.

‎06-05-2020

view.when(function () { limitMapView(view); }); function limitMapView(view) { var initialExtent = view.extent; var initialLon = view.extent.center.longitude; var initialLat = view.extent.center.latitude; var initialZoom = view.zoom; view.watch("stationary", function (event) { if (!event) { return; } // If the center of the map has moved outside the initial extent, // then move back to the initial map position (i.e. initial zoom and extent var currentCenter = view.extent.center; var currentLon = view.extent.center.longitude; var currentLat = view.extent.center.latitude; if (!initialExtent.contains(currentCenter)) { view.goTo({ target: initialExtent, zoom: initialZoom, }); } }); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ I don't know what the exact usecase of your app is but this code snippet should "bring you back" to the inital extent. Maybe it's helpful, maybe it's not. Or should your map be kinda "blocked" when it comes to it's west/east end?

‎06-03-2020

view .when() .then(function () { return flStreckenausbau.when(); }) .then(function (layer) { return view.whenLayerView(layer); }) .then(function (layerView) { view.on("pointer-move", handlerClick); function handlerClick(event) { view.popup .fetchFeatures({ x: event.x, y: event.y }) .then(function (response) { // Access the response from fetchFeatures response.allGraphicsPromise.then(function (graphics) { controlTooltip(graphics[0], event); }); }); } var currentName; function controlTooltip(graphic, e) { var tooltip = document.getElementById("nametooltip"); if (graphic !== undefined) { var name = graphic.attributes.Namen; //prevent tooltip from "wiggling" around by only changing the x and y values whenever a new feature is hovered if (currentName !== name) { tooltip.style.top = "" + e.y + "px"; tooltip.style.left = "" + e.x + "px"; } tooltip.style.display = "inline-block"; tooltip.style.visibility = "visible"; tooltip.style.position = "absolute"; tooltip.style.backgroundColor = "#fff"; tooltip.style.padding = "10px"; tooltip.style.borderRadius = "5px"; tooltip.style.fontFamily = "sans-serif"; tooltip.style.fontWeight = "bold"; tooltip.style.boxShadow = "2px 2px 1px #88888888"; tooltip.innerHTML = name; currentName = name; } else if (graphic == undefined) { tooltip.style.display = "none"; tooltip.style.visibility = "hidden"; } } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ <body> <div id="viewDiv"></div> <div id="statetooltip"> <div id="name"></div> </div> </body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍ This is what I came up with. For some reason I had to use the view.popup.fetchFeatures method because the view.hitTest method didn't get me all the attributes (and I knew there had to be more than two). If anybody can tell me why this is/was happening or give a suggestion on how to improve my code feel free to contribute

‎06-03-2020

I was thinking about that too and also tried to change the font-size of .esri-popup__header-title to reduce the "placeholder space" for the title

‎06-03-2020

I'd like to highlight a feature whenever the pointer is hovering over it, (by changing the features color). Currently the features are grey filled out areas and they should become red whenever a feature is hovored. Thanks in advance for your help

‎06-03-2020

Hey I'm struggling with fetching feature data from a feature layer on pointer-move event. I'd like to fetch the feature data over which the mouse pointer is currently hovering. I have a country and a feature layer which represents its states. The goal is to give the state over which the mouse pointer is hovering a striking fill colour eg. red and display its name on some kind of label/tooltip. I'm grateful for any suggestions and code snippets. Thanks in advance

‎06-02-2020

Hey guys I guess for an experienced ArcGIS JS API Developer this is an easy question I have to ask. Is it possible to leave the title of a popupTemplate completely empty, not assign any value to the property "title" without having the whitespace which would be the placeholder for the titel if I had specified any. Example given this sample code from ArcGIS JS API Reference: Intro to PopupTemplate | ArcGIS API for JavaScript 4.15 If i comment out the line in the sample with the title property the popup on the map comes without a title, but the "placeholder whitespace" where the title would have been displayed is still there. var template = { // autocasts as new PopupTemplate() //title: "{NAME} in {COUNTY}" Is there any possibility to change this behaviour so that the complete title section would be somehow deleted? Using API version 4.15 Thanks in advance

‎05-29-2020

Egge-Jan Pollé‌ that's as well my opinion but it was a wish from a customer. Those moments when I ask myself "why am I doing this" haha

‎05-29-2020

hi Egge-Jan Pollé‌ your suggestion was helpful and I was able to implement it, but it didn't fix my issue because the popup opens generally not only at an exact click on the feature/it's marker, but also if the click event happens "somewhere very close to it". Eventually I wasn't able to achieve what I wanted: define a certain area which is clickable to trigger the popup. Anyway I guess if the markers would be bigger than this approach could work for others

‎05-28-2020

thanks Egge-Jan Pollé‌ I am currently trying to make exactly this approach work haha I'll share my code snippet when I'm done - if anybody else's faster, feel free to contribute Additoinally maybe it's worth mentioning that the webmap is a portalItem and already comes with some feature layers added to it.

‎05-28-2020

Thanks Egge-Jan Pollé‌ this was helpful, but I am still a bit stuck with this "clickable are thing". Let's say I wanted to make only the white man in the image of the trailheadslayer to be the trigger for the popup as demonstrated in the clickablearea.png file I added to the question. So basically if the area outside of the red box is clicked nothing happens, but if the click is inside of it the popup opens.

‎05-27-2020

Using JS API 4.15 I have a portalItem which comes with already rendered markers for its features (3 feature layers). Those markers have shadows which shouldn't be "clickable" to trigger the popup. So the idea is to put our own markers (for which we have renderer.json files) exactly on all of those provided markers of the portalItem so that we have access to all those markers and make the provided markers not clickable. So basically we want to put our own markers with the according renderer.json on top of the given markers from the portalItem. If anybody could provide some sample code, instructions or suggestions I'd be glad! Thanks in advance!

‎05-26-2020

Thanks alot Egge-Jan Pollé‌! This is what I'm looking for - I'll see if I can implement it in my project. Have a nice day

‎05-25-2020

I am using ArcGIS JS API 4.15 and want to achieve that if the user scrolls/zooms/pans out of a specific area that the visible area of the map will jump back to its initial value (just as if I would click the Home Widget button). An example for this could be the user sees a map with Austria in its center. As soon as the user pans out of Austria, Austria will be centered again, as it has been initially. Another satisfying solution would be that simply not allow to pan beyond the country but not jumping back to the initial state - although we'd prefer that. See in the pictures: when "austriatoofar.png" is reached it should either prevent the user from panning further or jump to the inital "austria.png" state I hope someone can provide me some code snippet. Thanks in advance!

Online Status	Offline
Date Last Visited	‎06-24-2022 07:59 AM

My Ideas

Latest Contributions by ChristianBischof

Re: How to show popup for WMS layer in JS API 4.15?

Re: Prevent continious warp v4.15

Re: Prevent continious warp v4.15

Re: Fetch feature data on pointer-move event to label on hover?

Re: Popup without a title and its whitespace?

How to highlight a feature on mouseover/hover in JS API 4.15?

Fetch feature data on pointer-move event to label on hover?

Popup without a title and its whitespace?

Re: How to add a custom marker with given renderer for features on portalitem?

Re: How to add a custom marker with given renderer for features on portalitem?

Re: How to add a custom marker with given renderer for features on portalitem?

Re: How to add a custom marker with given renderer for features on portalitem?

How to add a custom marker with given renderer for features on portalitem?

Re: How to keep the view over a specific area (e.g. over a country)?

How to keep the view over a specific area (e.g. over a country)?

How to keep the view over a specific area (e.g. ov...

Re: How to update a csv item in ArcGIS Online with...

Re: query features on a layer inside a webmap retu...

Re: Consume GeoProcessing Service in JS

Re: query features on a layer inside a webmap retu...