Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About ChristianBischof
ChristianBischo
Esri Contributor
since
05-06-2020
06-24-2022
64
Posts created
22
Kudos given
4
Solutions
24
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by ChristianBischof
|
POST
|
So basically I guess you're looking for this. But you have to check the Search widget in API 3.32 on you own because I have as well never worked with it. Here is the link to the 3.32 Search Class: Search | API Reference | ArcGIS API for JavaScript 3.32 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Project a point</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/3.32/dijit/themes/claro/claro.css"
/>
<link
rel="stylesheet"
href="https://js.arcgis.com/3.32/esri/css/esri.css"
/>
<style>
.esriPopup .contentPane span {
display: inline-block;
padding: 0 0 0.2em 0;
width: 6em;
}
</style>
<script src="https://js.arcgis.com/3.32/"></script>
<script>
var map, gsvc, pt;
require([
"esri/map",
"esri/dijit/Search",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/GeometryService",
"esri/tasks/ProjectParameters",
"esri/SpatialReference",
"esri/InfoTemplate",
"dojo/dom",
"dojo/on",
"dojo/domReady!",
], function (
Map,
Search,
Graphic,
SimpleMarkerSymbol,
GeometryService,
ProjectParameters,
SpatialReference,
InfoTemplate,
dom,
on
) {
map = new Map("map", {
basemap: "streets",
center: [-98.445, 46.147],
zoom: 3,
});
var search = new Search({
map: map,
}, "search");
// this is API 4.* code search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
// this is API 4.* code view.ui.add(search, "top-right"); // Add to the map
gsvc = new GeometryService(
"https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
);
map.on("click", projectToWebMercator);
function projectToWebMercator(evt) {
map.graphics.clear();
var point = evt.mapPoint;
var symbol = new SimpleMarkerSymbol().setStyle("diamond");
var graphic = new Graphic(point, symbol);
var outSR = new SpatialReference(102100);
map.graphics.add(graphic);
gsvc.project([point], outSR, function (projectedPoints) {
pt = projectedPoints[0];
graphic.setInfoTemplate(
new InfoTemplate(
"Coordinates",
"<span>X:</span>" +
pt.x.toFixed() +
"<br>" +
"<span>Y:</span>" +
pt.y.toFixed() +
"<br>" +
"<input type='button' value='Convert back to LatLong' id='convert'>" +
"<div id='latlong'></div>"
)
);
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
map.infoWindow.show(
evt.screenPoint,
map.getInfoWindowAnchor(evt.screenPoint)
);
on.once(dom.byId("convert"), "click", projectToLatLong);
});
}
function projectToLatLong() {
var outSR = new SpatialReference(4326);
var params = new ProjectParameters();
params.geometries = [pt.normalize()];
params.outSR = outSR;
gsvc.project(params, function (projectedPoints) {
pt = projectedPoints[0];
dom.byId("latlong").innerHTML =
"<span>Latitude: </span> " +
pt.y.toFixed(3) +
"<br><span>Longitude:</span>" +
pt.x.toFixed(3);
});
}
});
</script>
</head>
<body class="claro">
<b>Click a location on the map to Project from LatLng -> Web Mercator:</b>
<div id="map" style="width: 600px; height: 400px; border: 1px solid #000;">
<div class="" id="search"></div>
</div>
</body>
</html>
... View more
06-09-2020
04:49 AM
|
0
|
0
|
1269
|
|
POST
|
In your code you are using ArcGIS API 3.32 and you can't require modules from the API 4.* like "esri/widgets/Search". Furthermore the order in the require statement and the function following have to match. require([
"esri/map",
"esri/dijit/Search",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/GeometryService",
"esri/tasks/ProjectParameters",
"esri/SpatialReference",
"esri/InfoTemplate",
"dojo/dom",
"dojo/on",
"dojo/domReady!",
], function (
Map,
Search,
Graphic,
SimpleMarkerSymbol,
GeometryService,
ProjectParameters,
SpatialReference,
InfoTemplate,
dom,
on
) {
//api code
});
... View more
06-09-2020
04:38 AM
|
1
|
1
|
1269
|
|
POST
|
I'd suggest as the LayerList widget is in fact a <ul> Element to change the CSS of the affected classes. <div class="row">
<div class="column">
<img src="first.jpg" style="width:100%">
</div>
<div class="second.jpg" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img src="third.jpg" style="width:100%">
</div>
<div class="column">
<img src="fourth.jpg" style="width:100%">
</div>
</div> .row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
} you can use "Flexbox CSS" (above) or "Floating CSS" (below). I'd go with Flexbox /* define width of column container */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clear floats after image containers with after pseudoclass */
.row::after {
content: "";
clear: both;
display: table;
} Finally substitute the classes row and column with the classes used by esri, look for them by inspecting the element in the browser dev tools => layerlistul.png
... View more
06-09-2020
12:13 AM
|
0
|
0
|
859
|
|
POST
|
Sorry got you wrong. Can't really help you out with 3.* right off the cuff I've never used it before.
... View more
06-08-2020
11:45 PM
|
0
|
0
|
1637
|
|
POST
|
How about if you try to calculate a median or average z value of all the features you have (if there are multiple ones) and then add this z value to the popup properties. Or if you have just this one single feature simply use the z value of the popup. (not very clean but it should prevent doing weird stuff). <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css" />
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#button {
position: absolute;
top: 20px;
left: 75px;
}
</style>
<script>
var view;
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/Viewpoint",
"esri/widgets/Popup",
"esri/PopupTemplate",
"dojo/domReady!",
], function (
Map,
SceneView,
FeatureLayer,
Viewpoint,
Popup,
PopupTemplate
) {
var map = new Map({
basemap: "satellite",
ground: "world-elevation",
});
view = new SceneView({
container: "viewDiv",
map: map,
scale: 50000,
center: [-81.8114, 36.111],
popup: {
dockEnabled: false,
},
});
var popupTemplate = new PopupTemplate({
title: "Grandfather Mountain",
content: "Deed Acres: {DEED_ACRES}",
fieldInfos: [
{
fieldName: "*",
},
],
});
var featureLayer = new FeatureLayer({
url:
"http://services6.arcgis.com/oJtkpoIEQgwrMNBU/ArcGIS/rest/services/TCF_Grandfather_Mountain/FeatureServer/0",
popupTemplate: popupTemplate,
});
map.add(featureLayer);
let button = document.getElementById("button");
button.addEventListener("click", myFunction);
let zoomLocation = new Viewpoint({
camera: {
position: [-81.8114, 36.111, 10000],
heading: 0,
tilt: 0,
},
});
//calc medianZ function
function medianZ(){
//calculate median z value of all features
//to compensate the weird behaviour as good as possible
calculatedZValue = 1524.6
return calculatedZValue
}
function myFunction() {
view.goTo(zoomLocation).then(function () {
view
.whenLayerView(featureLayer)
.then(function (lyrView) {
return lyrView.queryFeatures();
})
.then(function (graphics) {
view.popup.open({
location: {
latitude: graphics[0].geometry.centroid.latitude,
longitude: graphics[0].geometry.centroid.longitude,
z: medianZ()
//z: 1524.6 or use the single value if there is only one feature
},
features: graphics,
elevationInfo: "on-the-ground"
});
});
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<button id="button">Click Me!</button>
</body>
</html>
... View more
06-08-2020
08:31 AM
|
0
|
0
|
2386
|
|
POST
|
As far as I know these there are no more than the ones you listed. It only depends on the renderer which ones are available and which are not. For example with uniqueValueRenderer there is only count available and the type gives you the most common type of the features which are clustered together. See Styles and Configuration: FeatureReductionCluster | ArcGIS API for JavaScript 4.15
... View more
06-08-2020
08:06 AM
|
0
|
2
|
1637
|
|
POST
|
Hey guys I'm using JS API 4.15 and have some issues with the clustering / featureReduction. I am clustering a feature layer with an attribute called status. Right now every feature of the feature layer is clustered if it's inside the featureRadius. What I want to achieve is that if two features of the same layer are next to each other, but don't have the same status, that they don't get clustered together. Example: 5 features are within the clusterRadius, but only 3 of them also have the same status -> only those 3 should be clustered together and the other two ones stay as they are (if those remaining two features would have the same status obviously they'd get clustered together as well). https://developers.arcgis.com/javascript/latest/sample-code/featurereduction-cluster-filter/live/index.html In this sample we can see the same behaviour for example in the South the features are clustered together as "Hindu" although if we zoom in further, we can see that there were "Christian" features in the "Hindu" cluster. In my example this would mean that only the same religion (e.g."Hindu" features) gets clustered together. I am also using a uniqueValueRenderer for my feature layer as they do in the sample above. If anybody could provide a suggestion or sample code I'd be grateful! Thanks in advance and happy coding
... View more
06-08-2020
07:25 AM
|
0
|
1
|
1762
|
|
POST
|
Is this what you're looking for? <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-graphics sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/index.html
-->
<title>DevLabs - Search and Geocode</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
padding: 0;
margin: 0;
height: 80%;
width: 60%;
}
#instruction {
padding: 15px;
background: white;
color: black;
border: 5px solid gold;
font-family: sans-serif;
font-size: 1.2em;
}
#instruction2 {
width: 60%;
margin-top: 4px;
}
#getLocBtn {
float: left;
margin-top: 4px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/widgets/Search",
"esri/tasks/Locator",
], function (Map, MapView, Graphic, Search, Locator) {
var map = new Map({
basemap: "topo",
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-0.14718, 51.51161],
zoom: 17,
});
var search = new Search({
view: view,
});
//search.defaultSource.withinViewEnabled = false; // Limit search to visible map area only
view.ui.add(search, "top-right"); // Add to the map
// Add instruction to the map
view.ui.add("instruction", "bottom-left");
view.on("click", function (evt) {
// Create a graphic and add the geometry and symbol to it
var graphic = new Graphic({
geometry: {
type: "point",
latitude: evt.mapPoint.latitude,
longitude: evt.mapPoint.longitude,
spatialReference: view.spatialReference,
},
symbol: {
type: "simple-marker", // autocasts as new SimpleFillSymbol
color: [255, 10, 10],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2,
},
},
});
view.graphics.removeAll();
view.graphics.add(graphic);
search.search(evt.mapPoint);
search.resultGraphicEnabled = false;
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction">
Click on the map to retrieve coordinates and address
</div>
</body>
</html>
... View more
06-08-2020
06:08 AM
|
2
|
1
|
9974
|
|
POST
|
Draw polyline | ArcGIS API for JavaScript 4.15 Maybe this sample code could additionally help you achieve what you want. <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-graphics sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/index.html
-->
<title>Intro to graphics - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView", "esri/Graphic"], function (
Map,
MapView,
Graphic
) {
var map = new Map({
basemap: "hybrid",
});
var view = new MapView({
center: [-80, 35],
container: "viewDiv",
map: map,
zoom: 3,
});
view.on("click", function (evt) {
// Create a graphic and add the geometry and symbol to it
var graphic = new Graphic({
geometry: {
type: "point",
latitude: evt.mapPoint.latitude,
longitude: evt.mapPoint.longitude,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-marker", // autocasts as new SimpleFillSymbol
color: [226, 119, 40],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2,
},
}
});
view.graphics.removeAll();
view.graphics.add(graphic);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
06-08-2020
12:55 AM
|
0
|
0
|
9974
|
|
POST
|
Right off the cuff I can't come up with a ready to use solution, but I guess your suggestion is a good start. The faster one of us could simply post the solution below. I'll try it myself.
... View more
06-07-2020
11:22 PM
|
0
|
0
|
4281
|
|
POST
|
//############ point variable was missing above pointGraphic declaration ###########
var point = {
type: "point", // autocasts as new Point()
}; additionally I've commented out my first suggestion because I think you don't need it Full code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>DevLabs - Search and Geocode</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
padding: 0;
margin: 0;
height: 80%;
width: 60%;
}
#instruction {
padding: 15px;
background: white;
color: black;
border: 5px solid gold;
font-family: sans-serif;
font-size: 1.2em;
}
#instruction2 {
width: 60%;
margin-top: 4px;
}
#getLocBtn {
float: left;
margin-top: 4px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css" />
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/widgets/Locate",
"esri/Graphic",
"dojo/domReady!",
], function (Map, MapView, Search, Graphic, FeatureLayer, Locate) {
var map = new Map({
basemap: "topo",
});
// Add the layer to the map
//map.add(trailsLayer); // Optionally add layer to map
var view = new MapView({
container: "viewDiv",
map: map,
center: [-0.14718, 51.51161],
zoom: 17,
});
// Search
var search = new Search({
view: view,
});
search.defaultSource.withinViewEnabled = false; // Limit search to visible map area only
view.ui.add(search, "top-right"); // Add to the map
// Add instruction to the map
view.ui.add("instruction", "bottom-left");
// Find address
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1,
},
};
//############ point variable was missing above pointGraphic declaration ###########
var point = {
type: "point", // autocasts as new Point()
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
});
view.graphics.add(pointGraphic);
function showPopup(address, pt) {
view.popup.open({
title: "Find Address Result",
content:
address +
"<br><br> Lat: " +
Math.round(pt.latitude * 100000) / 100000 +
" Lon: " +
Math.round(pt.longitude * 100000) / 100000,
location: pt,
actions: [
{
id: "find-brewery",
image: "beer.png",
title: "get xy",
},
],
});
}
view.on("click", function (evt) {
search.clear();
view.popup.clear();
var locatorSource = search.defaultSource;
locatorSource.locator.locationToAddress(evt.mapPoint).then(
function (response) {
var address = response.address.Match_addr;
// Show the address found
showPopup(address, evt.mapPoint);
},
function (err) {
// Show no address found
showPopup("No address found for this location.", evt.mapPoint);
}
);
});
//############ my first suggestion #################
// view.on("click", function (event) {
// view.popup.fetchFeatures(event.screenPoint).then(function (response) {
// console.log(response);
// // Access the response from fetchFeatures
// response.allGraphicsPromise.then(function (graphics) {
// // Set the feature widget's graphic to the returned graphic from fetchFeatures
// console.log(graphics[0]);
// });
// });
// view.popup.open({
// location: event.mapPoint,
// });
// });
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction">
Click on the map to retrieve coordinates and address
</div>
</body>
</html>
... View more
06-07-2020
11:19 PM
|
2
|
1
|
9974
|
|
POST
|
Have you tried executing the "on load stuff code" as well only when the button is clicked? document.getElementById("yourbutton").addEventListener("click",function(){
//the onload stuff code
});
... View more
06-05-2020
07:16 AM
|
0
|
0
|
2196
|
|
POST
|
view.on("click", function (event) {
view.popup
.fetchFeatures(event.screenPoint)
.then(function (response) {
console.log(response);
// Access the response from fetchFeatures
response.allGraphicsPromise.then(function (graphics) {
// Set the feature widget's graphic to the returned graphic from fetchFeatures
console.log(graphics[0]);
});
});
view.popup.open({
location: event.mapPoint,
});
}); This code snippet gets you the data of the features (if there are any) at the event.mapPoint. Sorry I'm not sure if I got your problem right. With graphics.attributes you can get the information from the feature you clicked on.
... View more
06-05-2020
07:10 AM
|
0
|
5
|
9974
|
|
POST
|
I'd suggest John Grayson s approach as well as trying to put some parts of your code inside of a view.when() view.when(function(){
//parts of your code
});
... View more
06-05-2020
07:06 AM
|
0
|
0
|
1253
|
|
POST
|
for development purposes I like to declare the var view; outside of the require statements so I can get and set the view's properties in the browsers developer tools. Maybe this can help you out. For your particular case I'd do: view.scale = 3000 in the dev tools of the browser and see if it fits my needs.
... View more
06-05-2020
07:00 AM
|
0
|
0
|
1574
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 05-25-2020 05:06 AM | |
| 3 | 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 |
Activity Feed
- Got a Kudo for How to keep the view over a specific area (e.g. over a country)?. 11-12-2025 02:07 AM
- Got a Kudo for Re: How to update a csv item in ArcGIS Online without using arcgis methods? (REST API). 07-19-2024 01:57 PM
- Got a Kudo for Re: Can you access a portalIems tags from a WebMap before loading the item.. 10-19-2023 04:46 AM
- Got a Kudo for Re: How to update a csv item in ArcGIS Online without using arcgis methods? (REST API). 06-21-2021 01:58 PM
- Got a Kudo for Re: How to update a csv item in ArcGIS Online without using arcgis methods? (REST API). 06-21-2021 01:57 PM
- Posted Re: How to update a csv item in ArcGIS Online without using arcgis methods? (REST API) on Python Questions. 06-21-2021 01:55 PM
- Posted How to update a csv item in ArcGIS Online without using arcgis methods? (REST API) on Python Questions. 06-21-2021 01:39 PM
- Posted Re: Hoe to visualize features on map through CSV drag and drop containing XY Values? on ArcGIS JavaScript Maps SDK Questions. 06-21-2021 01:32 PM
- Kudoed Re: How to get intersecting points of MapImageLayer features, selected by Rectangle? for JohnGrayson. 06-21-2021 01:31 PM
- Kudoed Re: How to get intersecting points of MapImageLayer features, selected by Rectangle? for JohnGrayson. 01-27-2021 04:28 AM
- Kudoed Re: How to get intersecting points of MapImageLayer features, selected by Rectangle? for Anonymous User. 01-27-2021 04:28 AM
- Got a Kudo for Re: query features on a layer inside a webmap returns null. 01-26-2021 02:36 PM
- Posted Re: Consume GeoProcessing Service in JS on ArcGIS JavaScript Maps SDK Questions. 01-26-2021 02:24 AM
- Kudoed Re: Consume GeoProcessing Service in JS for BlakeTerhune. 01-26-2021 02:23 AM
- Posted Re: query features on a layer inside a webmap returns null on ArcGIS JavaScript Maps SDK Questions. 01-26-2021 02:21 AM
- Got a Kudo for Re: Consume GeoProcessing Service in JS. 01-25-2021 06:07 AM
- Got a Kudo for Re: query features on a layer inside a webmap returns null. 01-25-2021 01:12 AM
- Posted Re: query features on a layer inside a webmap returns null on ArcGIS JavaScript Maps SDK Questions. 01-24-2021 11:45 PM
- Posted Re: Consume GeoProcessing Service in JS on ArcGIS JavaScript Maps SDK Questions. 01-24-2021 06:00 AM
- Posted Re: Click Feature to Open URL on ArcGIS JavaScript Maps SDK Questions. 01-24-2021 05:45 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
06-24-2022
07:59 AM
|