I am trying to draw a cross at London in a map.
The code works if I specify the coordinates of the point in either geographic or web mercator.
However it does not work if I specify the coordinates in ED50 / UTM zone 31N.
According to the documentation the Point constructor takes the spatial reference as the last argument. I would think that this would mean that the point would be transformed to the coordinate system of the map (web mercator)? However the point now appears somewhere in the middle of France. Not sure what is happening here?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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>London Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
require(["esri/map", "esri/geometry/Point", "esri/SpatialReference", "esri/graphic", "dojo/domReady!"], function (Map, Point, SpatialReference, Graphic) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [0.1, 51.5], // longitude, latitude
zoom: 8
});
map.on("load", function () {
//var P = new Point({ "x": 0.1, "y": 51.5, "spatialReference": { "wkid": 4326 } }); // geographic: works!
//var P = new Point({ "x": -10978, "y": 6708911, "spatialReference": { "wkid": 102100 } }); // web mercator: works!
//var P = new Point({ "x": 284879, "y": 5711864, "spatialReference": { "wkid": 23031 } }); // somewhere in the middle of France !!??
var P = new Point([284879, 5711864], new SpatialReference({ wkid: 23031 })); // somewhere in the middle of France !!??
var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 2), new dojo.Color([0, 255, 0, 0.25]));
var mapPointGraphic = new Graphic(P, pointSymbol);
map.graphics.add(mapPointGraphic);
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
ESRI JavaScript API, does not have any client side projection api, except between WebMercator(102100,102113,3875) and WGS84(4326). For these it uses esri/geometry/webMercatorUtils module for convert the spatial reference. For all other projection systems you need to use GeometryService to project. Below is a sample code for the same.
require(["dojo/_base/array", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/SpatialReference"], function(GeometryService, ProjectParameters, array) {
var gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var P = new Point([284879, 5711864], new SpatialReference({ wkid: 23031 }));
var outSR = new SpatialReference({wkid:102110});
var params = new ProjectParameters();
params.geometries = [P];
params.outSR = outSR;
params.transformation = transformation;
gsvc.project(params, function(projectedGeometries){
P = projectedGeometries[0];
});
});
Related
I have the following code that is currently working. I have been looking all over and cannot find how to change the icon way from the tiny dot that defaults on the location. The code below is set to a specific address on page load.
I have tried PictureMarkerSymbol as you'll see I have that loaded into the function, but I'm not getting the right logic.
I figured this would be the easy part of using arcgis, but it's proving to be difficult.
thanks!
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>ArcGIS API for JavaScript</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
'esri/config',
'esri/Map',
'esri/views/MapView',
'esri/symbols/PictureMarkerSymbol',
'esri/widgets/Search',
'esri/layers/FeatureLayer',
], function (
esriConfig,
Map,
MapView,
PictureMarkerSymbol,
Search,
FeatureLayer
) {
esriConfig.apiKey =
'API-KEY';
const map = new Map({
basemap: 'arcgis-navigation',
});
const view = new MapView({
container: 'viewDiv',
map: map,
center: [-77.050636, 38.889248],
zoom: 13,
});
const search = new Search({
//Add Search widget
view: view,
});
view.ui.add(search, 'top-right'); //Add to the map
searchWidget = new Search({
view: view,
searchTerm: '43 Valley Oak Ct',
popupEnabled: false,
});
view.ui.add(searchWidget, 'bottom-right');
view.when(() => {
searchWidget.search();
});
});
</script>
It looks as the search widget resultGraphic is readonly, but it looks like you can specify a collection of SearchSource and provide it a symbol. You can almost use the default setting provided in an example under sources in documentation. Below is an example. You can use this tool for creating symbols.
<!--
To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.
Sign up for a free account and get an API key.
https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search widget with multiple sources | Sample | ArcGIS API for JavaScript 4.20</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/tasks/Locator", "esri/symbols/SimpleMarkerSymbol"], (
Map,
MapView,
FeatureLayer,
Search,
Locator,
SimpleMarkerSymbol,
) => {
const map = new Map({
basemap: "dark-gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-97, 38], // lon, lat
scale: 10000000
});
var marker = new SimpleMarkerSymbol({ color: [203, 52, 52, 0.93] });
const searchWidget = new Search({
view: view,
searchTerm: '43 Valley Oak Ct',
popupEnabled: false,
sources: [
{
locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
singleLineFieldName: "SingleLine",
outFields: ["Addr_type", "Match_addr", "StAddr", "City"],
name: "ArcGIS World Geocoding Service",
placeholder: "Find address or place",
resultSymbol: marker,
}
]
});
searchWidget.viewModel.includeDefaultSources = false;
// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
view.when(() => {
searchWidget.search();
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I have to change the default icon on the Locate widget on arcGIS 4.18. The default icon class is, esri-icon-locate how can I change it to the class, 'esri-icon-navigation'?
I am going through the documentation,
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html#iconClass
I have tried to use the property, 'iconClass'. But not reflecting in the map icon. Please find the code below,
var locateBtn = new Locate({
view: view,
// iconClass: '\ue666'
iconClass: 'esri-icon-navigation'
});
view.ui.add(locateBtn, {
position: "manual",
});
KER,
You actually right, does not work as expected. Setting iconClass should be the solution.
Funny fact if you check the default iconClass is actually esri-icon-north-navigation, which obviously in not.
Anyway, I am gonna give a dirty solution, just overlap the class you want,
view.when(_ => {
const n = document.getElementsByClassName("esri-icon-locate");
if (n && n.length === 1) {
n[0].classList += " esri-icon-navigation"
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Locate button | Sample | ArcGIS API for JavaScript 4.18</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Locate"
], function (Map, MapView, Locate) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-56.049, 38.485, 78],
zoom: 3
});
var locateBtn = new Locate({
view: view
});
// Add the locate widget to the top left corner of the view
view.ui.add(locateBtn, {
position: "top-left"
});
view.when(_ => {
const n = document.getElementsByClassName("esri-icon-locate");
if (n && n.length === 1) {
n[0].classList += " esri-icon-navigation"
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I am referring an example provided in, https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons for drawing a polygon and move the map to that location. The example is working fine. But when I use my custom details such as the rings values and WKID, the polygon is drawing in the location but the map appears completely zoom out such that all the continents are appearing (Please check the image attached). It is required to zoom to the location by click on the '+' widget. Please find the code below.
enter image description here
I have commented the example wkid and ring values.
<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.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#mapDiv,
.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/Polygon",
"esri/Graphic",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/support/webMercatorUtils",
"dojo/domReady!"
], function(
Map,
MapView,
FeatureLayer,
Polygon,
Graphic,
SimpleFillSymbol,
webMercatorUtils
) {
var map = new Map({
basemap: "streets-navigation-vector"
});
// 102704 - Custom WKID
// 4326 - Example WKID
var poly = new Polygon({
spatialReference: {
wkid: 102704
},
rings: [
// [
// [-118.38516, 34.0127],
// [-118.38827, 34.01489],
// [-118.38813, 34.01602],
// [-118.38797, 34.01648],
// [-118.3876, 34.01712],
// [-118.38733, 34.01696],
// [-118.38696, 34.01749],
// [-118.38662, 34.01789],
// [-118.38689, 34.01805],
// [-118.38683, 34.01812],
// [-118.38295, 34.01592],
// [-118.38516, 34.0127]
// ],
// [
// [-118.38661, 34.01486],
// [-118.38634, 34.01498],
// [-118.38652, 34.01563],
// [-118.3867, 34.01559],
// [-118.38679, 34.01595],
// [-118.38699, 34.01591],
// [-118.38707, 34.01507],
// [-118.38661, 34.01486]
// ]
[
[
2744913.4668447226,
541568.06113781035
],
[
2744917.4038447142,
541499.65215389431
],
[
2744864.2454864681,
541496.82210706174
],
[
2744813.6648789644,
541494.12952713668
],
[
2744810.2104895562,
541563.64283956587
],
[
2744860.4905727208,
541565.79441006482
],
[
2744913.4668447226,
541568.06113781035
]
]
]
});
var view = new MapView({
container: "mapDiv",
map: map,
// zoom: 18,
// minZoom: 13,
basemap: "satellite",
// extent: webMercatorUtils.geographicToWebMercator(poly.extent.expand(3))
});
var symbol = new SimpleFillSymbol({
style: "solid",
color: [4, 121, 193, 0.5],
outline: {
width: 2,
color: [2, 94, 149, 1]
}
});
var graphic = new Graphic({
geometry: poly,
symbol: symbol
});
view.on("mouse-wheel", function(event) {
event.stopPropagation();
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
window.scroll(0, top + event.deltaY);
});
view.graphics.add(graphic);
});
</script>
<div style="" id="mapDiv"></div>
<mat-button-toggle-group [multiple]="true" name="fontStyle" aria-label="Font Style">
<button id="parcels" value="bold">Parcels</button>
<button id="housenumbers" value="italic">House Numbers</button>
<button id="said" value="underline">Sample Area IDs</button>
</mat-button-toggle-group>
</body>
</html>
The problem is that you need to reproject your custom coordinates (assume we call custom to other coordinate rather than WebMercator 3857 or 102100 and Geographics 4326). In order to do so,
you can use the GeometryService to interact with a geometry service of an ArcGIS Server,
or you could try pojection module to do it in the client.
Here you have a working example base on your code, that uses GeometryService.
<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.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#mapDiv,
.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"esri/Graphic",
"esri/tasks/GeometryService",
"esri/tasks/support/ProjectParameters",
"dojo/domReady!"
], function (
Map,
MapView,
Polygon,
SpatialReference,
Graphic,
GeometryService,
ProjectParameters
) {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "mapDiv",
map: map
});
// 102704 - Custom WKID
const originalPoly = new Polygon({
spatialReference: {
wkid: 102704
},
rings: [
[
[
2744913.4668447226,
541568.06113781035
],
[
2744917.4038447142,
541499.65215389431
],
[
2744864.2454864681,
541496.82210706174
],
[
2744813.6648789644,
541494.12952713668
],
[
2744810.2104895562,
541563.64283956587
],
[
2744860.4905727208,
541565.79441006482
],
[
2744913.4668447226,
541568.06113781035
]
]
]
});
console.log(`Original Polygon: ${JSON.stringify(originalPoly.toJSON())}`);
const geomSer = new GeometryService(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
);
const outSpatialReference = new SpatialReference({ wkid: 102100 });
const params = new ProjectParameters({
geometries: [originalPoly],
outSpatialReference
});
geomSer.project(params).then(function(result) {
const projectedPoly = result[0];
if (!projectedPoly) {
return;
}
console.log(`Projected Polygon: ${JSON.stringify(projectedPoly.toJSON())}`);
view.graphics.add(new Graphic({
geometry: projectedPoly,
symbol: {
type: "simple-fill",
style: "solid",
color: [255, 0, 0, 0.1],
outline: {
width: 2,
color: [255, 0, 0, 1]
}
}
}));
view.extent = projectedPoly.extent.clone().expand(3);
});
});
</script>
<div id="mapDiv"></div>
</body>
</html>
ArcGIS API - GeometryService
ArcGIS API - projection
We use Vue.js and OpenLayers (4.6.5) in our web project. We have a lot of features on the map and some of them are polygons. When I select some particular polygon, its style turns to another color, which means it's highlighted (selected). Of course, I can get the coordinates of selected polygon. But, how can I get the coordinates of point inside that polygon where I clicked?
The code look as following:
markObject (mark) {
if (!mark) {
this.map.un('select', this.onMarkObject)
if (this.markSelection) {
this.markSelection.getFeatures().remove(this.lastSelectedFeature)
this.map.removeInteraction(this.markSelection)
}
return
}
if (!this.markSelection) {
this.markSelection = new Select({
condition: condition.click,
layers: [this.vectorLayer]
})
this.markSelection.on('select', this.onMarkObject)
}
this.map.addInteraction(this.markSelection)
},
onMarkObject (event) {
if (event.selected && event.selected.length > 0) {
const coordinates = event.selected[0].getGeometry().getCoordinates()
}
}
Actually, I've found the solution:
onMarkObject (event) {
const clickCoordinates = event.mapBrowserEvent.coordinate
...
}
Thank you anyway.
What you need is to capture the click event on the map, and then transform pixel to map coordinates, take a look at this example I made for you,
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
#a { display: none; }
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js"></script>
<title>Click Pixel Coord</title>
</head>
<body>
<h2>Click on Map to get pixel and coord values</h2>
<p id="p"></p>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
map.on('click', function(evt) {
const coord = map.getCoordinateFromPixel(evt.pixel);
document.getElementById('p').innerHTML =
`Pixel:${evt.pixel[0]} ${evt.pixel[0]}` + '<br>' +
`Coord:${coord[0].toFixed(2)} ${coord[1].toFixed(2)}`;
});
</script>
</body>
</html>
I add some markers on Esri map and want to show map at zoom level where all markers are visible. I calculated minimum and maximum lat-lng and set the extent. But its not working.
Given Coordinates
lat, lon:41.984440, -87.827278
lat, lon:41.874489, -87.705772
calculated min-max:
xMax:"-87.827278"
xMin:"-87.705772"
yMax:"41.984440"
yMin:"41.874489"
expected result:
> EsriSetMapExtent:function(obj)
> {
> var extent = new esri.geometry.Extent(obj.xMin, obj.yMin, obj.xMax, obj.yMax);
> m.esriMap.setExtent(extent);
> },
The values of xMin and xMax are reversed., Only the X-axis, please check the function which performs the calculations. If you change them it will work. Below is the working sample
<!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>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
require(["esri/map","esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
"esri/Color", "esri/graphic", "dojo/domReady!"], function(Map, Extent, SpatialReference, Point, SimpleMarkerSymbol, Color, Graphic) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-87.705772, 41.874489], // longitude, latitude
zoom: 13
});
map.on('load', function(evt){
var pt = new Point(-87.705772, 41.874489, new SpatialReference({wkid:4326}))
var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new Color([255,0,0,0.5]));
var graphic = new Graphic(pt,sms);
map.graphics.add(graphic);
pt = new Point(-87.827278, 41.984440, new SpatialReference({wkid:4326}))
sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new Color([0,255,0,0.5]));
graphic = new Graphic(pt,sms);
map.graphics.add(graphic);
})
var extent = new Extent(-87.827278, 41.874489, -87.705772, 41.984440, new SpatialReference({ wkid:4326 }));
map.setExtent(extent, true);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
The solution that worked for me was:
const geoPoint = new Point(Longitude, Latitude);
if (!map.extent.contains(geoPoint)) {
// point not in view
}