POST
|
<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
... View more
06-05-2020
06:46 AM
|
0
|
3
|
2631
|
POST
|
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the intro-mapview sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html
-->
<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.
... View more
06-05-2020
06:22 AM
|
0
|
0
|
1927
|
POST
|
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?
... View more
06-05-2020
05:54 AM
|
0
|
0
|
1927
|
POST
|
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
... View more
06-03-2020
06:44 AM
|
0
|
1
|
1280
|
POST
|
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
... View more
06-03-2020
06:04 AM
|
0
|
1
|
812
|
POST
|
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
... View more
06-03-2020
05:17 AM
|
0
|
1
|
1754
|
POST
|
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
... View more
06-03-2020
03:09 AM
|
0
|
2
|
1378
|
POST
|
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
... View more
06-02-2020
05:45 AM
|
0
|
3
|
857
|
POST
|
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
... View more
05-29-2020
03:02 AM
|
1
|
0
|
1581
|
POST
|
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
... View more
05-29-2020
02:38 AM
|
1
|
2
|
1581
|
POST
|
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.
... View more
05-28-2020
04:16 AM
|
0
|
0
|
1581
|
POST
|
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.
... View more
05-28-2020
01:28 AM
|
0
|
5
|
1581
|
POST
|
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!
... View more
05-27-2020
06:36 AM
|
0
|
7
|
1697
|
POST
|
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
... View more
05-26-2020
12:48 AM
|
1
|
0
|
1726
|
POST
|
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!
... View more
05-25-2020
05:06 AM
|
0
|
2
|
1784
|
Title | Kudos | Posted |
---|---|---|
2 | 06-21-2021 01:55 PM | |
1 | 01-26-2021 02:21 AM | |
1 | 01-24-2021 06:00 AM | |
1 | 01-24-2021 11:45 PM | |
1 | 12-22-2020 12:30 AM |
Online Status |
Offline
|
Date Last Visited |
06-24-2022
07:59 AM
|