Is there any way to make the centered point to move whilst dragging the map? It seems currently its not possible to add graphics nor remove them whilst dragging happens.
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/core/watchUtils",
"dojo/domReady!"
], function(
Map,
MapView,
Graphic,
watchUtils
){
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
container: "map",
map: map,
constraints: {
rotationEnabled:false
}
});
var addPoint = function(point){
view.graphics.removeAll();
var graphicPoint = {
type: "point",
latitude: point.latitude,
longitude: point.longitude
};
var markerSymbol = {
type: "simple-marker",
color: [85,139,197],
outline: {
color: [255,255,255],
width:2
}
};
var pointGraphic = new Graphic({
geometry: graphicPoint,
symbol: markerSymbol
});
view.graphics.add(pointGraphic);
};
var centerPoint = function(){
var point = view.center;
var input = document.getElementById("myInput");
input.value = point.latitude.toFixed(5) + " " + point.longitude.toFixed(5);
addPoint(point);
};
var showCenterCoords = function(){
centerPoint();
view.on("pointer-move", function(e){
centerPoint();
});
};
view.when(function(){
showCenterCoords();
});
});
https://jsfiddle.net/wrtqn2e3/3/
Im using Esri Js API 4.8.
If you look at the INPUT window, you can see that the "pointer-move" event triggers, because coordinates do refresh even on dragging.
Is there a possible workaround for this to happen?
Thanks in advance.
Related
Here is a piece of code to add a polygon, its 'name' (PERMIT_AREA) and description to the feature layer. My problem is the drawn polygon is not applying to the layer. How we can add more details such as name and description to the layer? Can you please correct my code,
view.when(() => {
const polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [207, 34, 171, 0.5],
outline: {
// autocasts as new SimpleLineSymbol()
color: [247, 34, 101, 0.9],
}
};
const sketchViewModel = new SketchViewModel({
view: view,
layer: graphicsLayer,
polygonSymbol: polygonSymbol,
});
sketchViewModel.create("polygon", { mode: "hybrid" });
// Once user is done drawing a rectangle on the map
// use the rectangle to select features on the map and table
sketchViewModel.on("create", async (event) => {
if (event.state === "complete") {
// this polygon will be used to query features that intersect it
const geometries = graphicsLayer.graphics.map(function (graphic) {
return graphic.geometry
});
const queryGeometry = await geometryEngineAsync.union(geometries.toArray());
const query = {
geometry: queryGeometry,
outFields: ["*"],
attributes: {
PERMIT_AREA:'sample PERMIT_AREA'
}
};
console.log(query);
lyrpermitAreaUrl.queryFeatures(query).then(function (results) {
var lyr = results.features;
selectFeatures(lyr);
});
}
});
});
// This function is called when user completes drawing a rectangle
// on the map. Use the rectangle to select features in the layer and table
function selectFeatures(geometryabc) {
console.log(geometryabc);
// create a query and set its geometry parameter to the
// rectangle that was drawn on the view
lyrpermitAreaUrl.applyEdits({ addFeatures: [geometryabc] }).then((editsResult) => {
console.log(editsResult);
console.log(editsResult.addFeatureResults[0].objectId);
});
}
I have edited the code like provided below. Now I can apply user entered polygon to feature layer,
require(["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/TileLayer",
"esri/layers/VectorTileLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/widgets/Sketch/SketchViewModel",
"esri/geometry/geometryEngineAsync",
"esri/Graphic",
],
function (esriConfig, Map, MapView, FeatureLayer, TileLayer, VectorTileLayer, GraphicsLayer, Search, SketchViewModel, geometryEngineAsync, Graphic) {
esriConfig.apiKey = "AAPK3f43082c24ae493196786c8b424e9f43HJcMvP1NYaqIN4p63qJnCswIPsyHq8TQHlNtMRLWokqJIWYIJjga9wIEzpy49c9v";
const graphicsLayer = new GraphicsLayer();
const streetmapTMLayer = new TileLayer({
url: streetmapURL
});
const streetmapLTMLayer = new VectorTileLayer({
url: streetmapLebelsURL
});
const lyrwholeMeters = new FeatureLayer({
url: MetersWholeURL,
outFields: ["*"],
});
const lyrMeters = new FeatureLayer({
url: MetersURL,
outFields: ["*"],
});
const lyrpermitAreaUrl = new FeatureLayer({
url: PermitAreaURL,
outFields: ["*"],
});
console.log(lyrMeters);
const map = new Map({
basemap: "arcgis-topographic", // Basemap layer service
layers: [streetmapTMLayer, streetmapLTMLayer, lyrMeters, lyrwholeMeters, graphicsLayer]
});
const view = new MapView({
map: map,
center: [-95.9406, 41.26],
// center: [-118.80500, 34.02700], //Longitude, latitude
zoom: 16,
maxZoom: 21,
minZoom: 13,
container: "viewDiv", // Div element
});
view.when(() => {
const polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [207, 34, 171, 0.5],
outline: {
// autocasts as new SimpleLineSymbol()
color: [247, 34, 101, 0.9],
}
};
const sketchViewModel = new SketchViewModel({
view: view,
layer: graphicsLayer,
polygonSymbol: polygonSymbol,
});
sketchViewModel.create("polygon", { mode: "hybrid" });
// Once user is done drawing a rectangle on the map
// use the rectangle to select features on the map and table
sketchViewModel.on("create", async (event) => {
if (event.state === "complete") {
// this polygon will be used to query features that intersect it
const geometries = graphicsLayer.graphics.map(function (graphic) {
return graphic.geometry
});
const queryGeometry = await geometryEngineAsync.union(geometries.toArray());
var rawrings = queryGeometry.rings;
var rings = [];
console.log('rings here');
for (var i = 0; i < rawrings.length; i++) {
rings.push(rawrings[i]);
// graphics.push(graphic);
console.log(rawrings[i]);
}
console.log(rings[0]);
// Create a polygon geometry
const polygon = {
type: "polygon",
spatialReference: {
wkid: 102704, //102704,
},
rings: [rings[0]]
};
const simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // Orange, opacity 80%
outline: {
color: [255, 255, 255],
width: 1
}
};
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
});
graphicsLayer.add(polygonGraphic);
// const addEdits = {
// addFeatures: polygonGraphic
// };
console.log('here');
// console.log(addEdits);
// apply the edits to the layer
selectFeatures(polygonGraphic);
}
});
});
// This function is called when user completes drawing a rectangle
// on the map. Use the rectangle to select features in the layer and table
function selectFeatures(geometryabc) {
console.log(geometryabc);
// create a query and set its geometry parameter to the
// rectangle that was drawn on the view
lyrpermitAreaUrl.applyEdits({ addFeatures: [geometryabc] }).then((editsResult) => {
console.log(editsResult);
console.log(editsResult.addFeatureResults[0].objectId);
});
}
// search widget
const searchWidget = new Search({
view: view,
});
view.ui.add(searchWidget, {
position: "top-left",
index: 2
});
});
I have added the attributes like below,
var attr = {"NETSUITE_USERID":"test user","PERMIT_AREA":"test permit area","COMMENTS":"test comments"};
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
attributes: attr
});
If I understand then, you need a new Graphic with the sketched geometry and the attributes you query. Something like this might work,
sketchViewModel.on("create", async (event) => {
if (event.state === "complete") {
// remove the graphic from the layer. Sketch adds
// the completed graphic to the layer by default.
graphicsLayer.remove(event.graphic);
const newGeometry = event.graphic.geometry;
const query = {
geometry: newGeometry,
outFields: ["NAME", "DESCRIPTION"],
returnGeometry: false
};
lyrpermitAreaUrl.queryFeatures(query).then(function (results) {
if (!results.features) {
return;
}
const data = results.features[0].attributes;
const newGraphic = new Graphic({
geometry: newGeometry,
attributes: {
"NAME": data["NAME"],
"DESCRIPTION": data["DESCRIPTION"]
}
});
lyrpermitAreaUrl.applyEdits({ addFeatures: [newGraphic] }).then((editsResult) => {
console.log(editsResult);
});
});
}
});
NAME and DESCRIPTION are sample attributes name, you should use the ones you need.
I have a code that draws objects on the map, but I don't understand how to save them and in which part of the code to respond correctly to events
mounted(){
this.initMap()
}
methods:{
initMap(){
this.map = new mapboxgl.Map({
container: 'mapContainer', // container ID
style: 'mapbox://styles/mapbox/satellite-streets-v11', // style URL
center: this.centerCoordinates, // starting position [lng, lat]
zoom: 13 // starting zoom
});
this.draw = new MapboxDraw();
this.map.addControl(this.draw);
console.log(this.draw.getAll());
let tmp = null
this.map.on('draw.create', function (e) {
let tmp = e.features[0].geometry
console.log(tmp)
});
this.draw.add(tmp)
},
}
I need the explanation of proper implementation of Graphic and GraphicLayer into my arcgis map intergation
{ <script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/graphic",
"esri/views/MapView",
"esri/geometry/Point",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/layers/GraphicsLayer",
"esri/dijit/BasemapToggle",
"esri/dijit/HomeButton"],
function (Map, MapView, Point, Graphic, GraphicsLayer,
PictureMarkerSymbol) {
var map = new Map({
basemap: "hybrid"
});
on(map, "load",addgraphics);
var view = new MapView({
container: "viewDiv",
map: map,
center: [72.952335,19.180190],
zoom: 15
});
var marker = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 32, 32);
function addgraphics(){
var markerPoint = new Point([72.952335,19.180190]);
var storepoint = new Graphic(markerPoint,marker);
var layer = new GraphicsLayer();
layer.add(storepoint);
view.addLayer(layer);
}
});
}
I expect the output should a map with the marker on the specified Latitude and Longitude.
The Output is the blank blank, which is i think wrong.
Check this example. https://codepen.io/mcantonbul/pen/vYBdVmQ
The error is that the layers are added to the "Map" object, not "MapView" object.
view.addLayer(layer);
to
map.add(layer);
and
var markerPoint = new Point([72.952335,19.180190]);
to
var markerPoint = new Point({x:72.952335,y:19.180190});
I am new to programming and wondering if someone can help me in writing a simple global function to plot a circle based on radius and a center point (lat,long). Basically, i need function that uses variables such as x,y,r to plot a circle using ESRI javscript api 4.x.
<script src = 'https://js.arcgis.com/4.5/init.js'></script>
<link rel = "stylesheet" href
"https://js.arcgis.com/4.5/esri/css/main.css">
I tried many things including the tutorial samples available on ESRI website but nothing worked for me.
<script>
let mapview;
let map;
let layer;
let r;
let Request;
let selectedService;
let Graphic;
let Circle
const DEFAULT_BASEMAP = "streets"
const DEFAULT_PAGE_SIZE = 100;
//second commit
require (["esri/Map",
"esri/views/MapView",
"esri/request",
"esri/layers/MapImageLayer",
"esri/widgets/Legend",
"esri/widgets/Search",
"esri/Graphic",
"esri/geometry/Geometry",
"esri/geometry/Polygon",
"esri/geometry/Circle"],
function(Map,
MapView,
CircleClass,
esriRequest,
MapLayer,
Legend,
Search,
GraphicClass, Geometry, Polygon)
{
Request= esriRequest;
Graphic = GraphicClass;
Circle=CircleClass;
map = new Map({basemap:DEFAULT_BASEMAP})
let viewoptions = {container: "upright", map: map,
center: [-122.388, 37.768], scale: 10000}
mapview = new MapView(viewoptions);
});
function drawPoint (x,y) {
let p = {
type: "point",
longitude: x,
latitude: y
}
let s = {
type: "picture-marker",
url:"CMS.png",
width: "40px",
height: "80px"
}
let graphic = new Graphic({geometry: p, symbol: s})
mapview.graphics.add(graphic);
}
function drawEvent (x,y) {
let p = {
type: "point",
longitude: x,
latitude: y
}
let s = {
type: "simple-marker",
color: getRandomColor(),
size: 60
}
let graphic = new Graphic({geometry: p, symbol: s})
mapview.graphics.add(graphic);
}
/* Here is the function i want to create so i can call elsewhere*/
function drawCircle (x,y,r) {
}
</script>
The "Circle" object can be created by taking the center point and radius information in the constructor method.
Example app:
https://codepen.io/mcantonbul/pen/pozPQqe
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Circle",
"esri/geometry/Point",
"esri/Graphic"
], function(Map, MapView, Circle, Point, Graphic) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
view.on("click", function(event) {
drawCircle(event.mapPoint.x, event.mapPoint.y, 200000);
});
var fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
function drawCircle(x, y, r) {
var centerPoint = new Point({
x: x,
y: y,
spatialReference: view.spatialReference
});
var myCircle = new Circle({
center: centerPoint,
radius: r
});
var circleGraphic = new Graphic({
geometry: myCircle,
symbol: fillSymbol
});
console.log(myCircle);
// Add the graphics to the view's graphics layer
view.graphics.add(circleGraphic);
}
I want to use the basemap toggle of arcgis but when i am using this, I
am getting the error related "multidefine"
This is my function which is am using for invoking the map service
[![function handlerForVariableB (latt, longt, complaintid)
{
// execute code that is relevant when "$a" was set on the server-side.
$.ajax({
type: "GET",
url: "tools/nrega_v2.1/map.php",
data: 'complaintid='+complaintid,
success: function(data){
var data_array = JSON.parse(data);
$('.modal-info').html("");
var hrymap='<div id="hrymap"></div>';
$(".modal-info").append(hrymap);
$('#hrymap').html("");
$('#hrymap').html("<div id='map' style='width:850px;height:650px;'><div id='BasemapToggle'></div></div>");
var map;
define.amd.jQuery = true;
require(\[
"esri/map",
"esri/dijit/BasemapToggle",
"dojo/domReady!"
\], function(
Map, BasemapToggle
) {
map = new Map("map", {
center: \[-70.6508, 43.1452\],
zoom: 16,
basemap: "topo"
});
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();
});
$("#detail_content").css({'display':'block'});
}
});
}][1]][1]
Please check the attached image which show confliction.
I am using jquery plus dojo in my application
My guess is the div Id is conflicting with the BasemapToggle declaration. Have you tried removing the div? I have BasemapToggle bound to my map without specifying a separate div for it and it works great.
// execute code that is relevant when "$a" was set on the server-side.
$.ajax({
type: "GET",
url: "tools/nrega_v2.1/map.php",
data: 'complaintid='+complaintid,
success: function(data){
var data_array = JSON.parse(data);
$('.modal-info').html("");
var hrymap='<div id="hrymap"></div>';
$(".modal-info").append(hrymap);
$('#hrymap').html("");
$('#hrymap').html("<div id='map' style='width:850px;height:650px;'></div>");
var map;
define.amd.jQuery = true;
require(\[
"esri/map",
"esri/dijit/BasemapToggle",
"dojo/domReady!"
\], function(
Map, BasemapToggle
) {
map = new Map("map", {
center: \[-70.6508, 43.1452\],
zoom: 16,
basemap: "topo"
});
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
});
toggle.startup();
});
$("#detail_content").css({'display':'block'});
}
});