Related
I am using geographicToWebMercator to draw a specific area on my map. The Polygon should draw as soon as the map loads. But the polygon is appearing only after click on the zoom buttons. either zoom in or zoom out. The code was working fine in arcgis 4.16 I have the upgraded version 4.16 to ArcGIS version 4.18.
Please find the code below,
import {
Component,
OnInit,
ViewChild,
ElementRef,
Input,
Output,
EventEmitter,
OnDestroy,
NgZone
} from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { GisService } from '../search/gis.service';
import { ActivatedRoute, Router } from '#angular/router';
import { map } from 'rxjs/operators';
import { loadScript, loadModules } from 'esri-loader';
import esri = __esri; // Esri TypeScript Types
import { empty } from 'rxjs';
import { AppConfig } from '../config/app.config';
#Component({
selector: 'app-esri-map',
templateUrl: './esri-map.component.html',
styleUrls: ['./esri-map.component.css'],
})
export class EsriMapComponent implements OnInit, OnDestroy {
#Output() mapLoadedEvent = new EventEmitter<boolean>();
#ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef;
view: any;
dynamicRings: any;
wkid: any;
addr: any;
loadingmap = true;
// to keep loaded esri modules
esriModules = {
graphic: null,
geometry: {
Polygon: null,
SpatialReference: null,
support: { webMercatorUtils: null },
},
tasks: {
GeometryService: null,
support: { ProjectParameters: null },
},
};
private _zoom = 20;
private _center: Array<number> = [-95.937187, 41.258652];
private _basemap = 'gray-vector';
private _loaded = false;
private _view: esri.MapView = null;
private _nextBasemap = 'streets';
public _selectedLayer: Array<string>;
public layersMapIdxArray: string[] = ['0', '1', '2'];
public mapalllayerview: boolean;
public layersDic = {};
private readonly esriMapUri: string;
private readonly gisGeometryServer: string;
get mapLoaded(): boolean {
return this._loaded;
}
#Input()
set zoom(zoom: number) {
this._zoom = zoom;
}
get zoom(): number {
return this._zoom;
}
#Input()
set center(center: Array<number>) {
this._center = center;
}
get center(): Array<number> {
return this._center;
}
#Input()
set basemap(basemap: string) {
this._basemap = basemap;
}
get basemap(): string {
return this._basemap;
}
#Input()
set nextBasemap(nextBasemap: string) {
this._nextBasemap = nextBasemap;
}
get nextBasemap(): string {
return this._nextBasemap;
}
public onLayerChange(val: Array<string>) {
// hide all the layers before showing the selected layers
for (const al of this.layersMapIdxArray) {
this.layersDic[al].visible = false;
}
// layersDic is the feature layers added to the map
for (const v of val) {
this.layersDic[v].visible = true;
}
}
constructor(
private gisService: GisService,
private http: HttpClient,
private route: ActivatedRoute,
private router: Router,
private zone: NgZone,
private appConfig: AppConfig) {
this.esriMapUri = this.appConfig.getGisMapURL('');
this.gisGeometryServer = this.appConfig.gisGeometryServer('');
}
async initializeMap() {
try {
loadScript();
// Load the modules for the ArcGIS API for JavaScript
const [
EsriMap,
EsriMapView,
Polygon,
SpatialReference,
webMercatorUtils,
GeometryService,
ProjectParameters,
FeatureLayer,
BasemapToggle,
BasemapGallery,
Graphic,
] = await loadModules([
'esri/Map',
'esri/views/MapView',
'esri/geometry/Polygon',
'esri/geometry/SpatialReference',
'esri/geometry/support/webMercatorUtils',
'esri/tasks/GeometryService',
'esri/tasks/support/ProjectParameters',
'esri/layers/FeatureLayer',
'esri/widgets/BasemapToggle',
'esri/widgets/BasemapGallery',
'esri/Graphic',
]);
// save the modules on a property for later
this.esriModules.geometry.Polygon = Polygon;
this.esriModules.geometry.SpatialReference = SpatialReference;
this.esriModules.geometry.support.webMercatorUtils = webMercatorUtils;
this.esriModules.tasks.GeometryService = GeometryService;
this.esriModules.tasks.support.ProjectParameters = ProjectParameters;
this.esriModules.graphic = Graphic;
// Configure the Map
const mapProperties: esri.MapProperties = {
basemap: this._basemap,
};
const map: esri.Map = new EsriMap(mapProperties);
// Initialize the MapView
const mapViewProperties: esri.MapViewProperties = {
container: this.mapViewEl.nativeElement,
// center: this._center,
zoom: this._zoom,
map: map,
};
this._view = new EsriMapView(mapViewProperties);
// Add layers to the map according to the selection
for (const idx of this.layersMapIdxArray) {
this.layersDic[idx] = new FeatureLayer({
url: `${this.esriMapUri}/${idx}`,
visible: this.mapalllayerview,
outFields: ['*'],
});
map.add(this.layersDic[idx]);
}
// The layer 15 will be the stack at the top of the layers so 15 will be consider first layer
this.layersDic[15] = new FeatureLayer({
url: `${this.esriMapUri}/15`,
visible: true,
outFields: ['*'],
});
map.add(this.layersDic[15]);
// Basemap toglle section
var basemapToggle = new BasemapToggle({
view: this._view,
nextBasemap: this._nextBasemap,
});
this._view.ui.add(basemapToggle, 'bottom-right');
// Load details of SAID when click on the map
let hitself = this;
this._view.on('click', function (event) {
hitself._view
.hitTest(event, { exclude: hitself._view.graphics })
.then(function (response) {
console.log(response);
if (
typeof response.results !== 'undefined' &&
response.results.length > 0
) {
var graphic = response.results[0].graphic;
var attributes = graphic.attributes;
var category = attributes.ADDRESS;
// redirect to the corresponding SAID
// window.location.href = `/dashboard/${category}`;
// hitself.router.navigate(['dashboard', category]);
hitself.addr = category;
var dashurl = 'search/detail/' + hitself.addr;
hitself.zone.run(() => {
hitself.router.navigateByUrl(dashurl);
});
}
});
return;
});
await this._view.when(); // wait for map to load
return this._view;
} catch (error) {
console.error('EsriLoader: ', error);
}
}
// point geometry extent is null
zoomToGeometry(geom) {
// console.log(`Original Geometry: ${JSON.stringify(geom.toJSON())}`);
const geomSer = new this.esriModules.tasks.GeometryService(this.gisGeometryServer);
const outSpatialReference = new this.esriModules.geometry.SpatialReference({
wkid: 102100,
});
const params = new this.esriModules.tasks.support.ProjectParameters({
geometries: [geom],
outSpatialReference,
});
const self = this;
geomSer
.project(params)
.then(function (result) {
const projectedGeom = result[0];
if (!projectedGeom) {
return;
}
// console.log(
// `Projected Geometry: ${JSON.stringify(projectedGeom.toJSON())}`
// );
return projectedGeom;
})
.then(function (polly) {
// console.log(self.esriModules.graphic);
self._view.graphics.add(
new self.esriModules.graphic({
geometry: polly,
symbol: {
type: 'simple-fill',
style: 'solid',
color: [255, 0, 0, 0.1],
outline: {
width: 1,
color: [255, 0, 0, 1],
},
},
})
);
self._view.extent = polly.extent.clone().expand(3);
});
}
ngOnInit() {
this.route.paramMap.subscribe((params) => {
this.addr = params.get('address');
console.log(this.addr);
this.gisService.getAddressDetails(this.addr).subscribe((posts) => {
const get_wkid = posts[0]['spatialReference'];
this.wkid = get_wkid['wkid'];
const dynamicrings = posts[0]['features'];
this.dynamicRings = dynamicrings[0]['geometry']['rings'];
});
this._selectedLayer = ['1', '0', '2'];
// this.layersMapIdxArray = this._selectedLayer;
this.mapalllayerview = true;
this.initializeMap().then(() => {
// The map has been initialized
console.log('mapView ready: ', this._view.ready);
const geom = new this.esriModules.geometry.Polygon({
spatialReference: {
wkid: this.wkid, //102704,
},
rings: this.dynamicRings,
});
this.zoomToGeometry(geom);
console.log('mapView ready: ', this._view.ready);
this._loaded = this._view.ready;
this.mapLoadedEvent.emit(true);
this.loadingmap = false;
});
});
}
ngOnDestroy() {
if (this._view) {
// destroy the map view
this._view.container = null;
}
}
}
I'm using the latest version of rtcmulticonnection, using a many-to-many connection with vue and when someone join to the room, the event onNewParticipant is triggered, but onstream not.
I tried to add a stream by addStream but throws RTCMultiConnection.js?cd68:683 Peer (xxxxx) does not exist. Renegotiation skipped.
This is my created method:
this.connection = new RTCMultiConnection();
this.connection.socketURL = 'http://localhost:9001/';
this.connection.socketMessageEvent = 'video-conference';
this.connection.session = {
audio: true,
video: true
};
this.connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
var bitrates = 512;
var resolutions = 'Ultra-HD';
var videoConstraints = {};
if (resolutions == 'HD') {
videoConstraints = {
width: {
ideal: 1280
},
height: {
ideal: 720
},
frameRate: 30
};
}
if (resolutions == 'Ultra-HD') {
videoConstraints = {
width: {
ideal: 1920
},
height: {
ideal: 1080
},
frameRate: 30
};
}
this.connection.mediaConstraints = {
video: videoConstraints,
audio: true
};
var CodecsHandler = this.connection.CodecsHandler;
this.connection.processSdp = (sdp) => {
var codecs = 'vp8';
if (codecs.length) {
sdp = CodecsHandler.preferCodec(sdp, codecs.toLowerCase());
}
if (resolutions == 'HD') {
sdp = CodecsHandler.setApplicationSpecificBandwidth(sdp, {
audio: 128,
video: bitrates,
screen: bitrates
});
sdp = CodecsHandler.setVideoBitrates(sdp, {
min: bitrates * 8 * 1024,
max: bitrates * 8 * 1024,
});
}
if (resolutions == 'Ultra-HD') {
sdp = CodecsHandler.setApplicationSpecificBandwidth(sdp, {
audio: 128,
video: bitrates,
screen: bitrates
});
sdp = CodecsHandler.setVideoBitrates(sdp, {
min: bitrates * 8 * 1024,
max: bitrates * 8 * 1024,
});
}
return sdp;
};
this.connection.onNewParticipant = (pId, userPreferences, c) => {
console.log(pId, userPreferences, c)
}
this.connection.onmessage = (event) => {
console.log(event)
}
// this.connection.videosContainer = this.$refs.videoChat;
this.connection.onstream = (event) => {
console.log(event)
var existing = document.getElementById(event.streamid);
if (existing && existing.parentNode) {
existing.parentNode.removeChild(existing);
}
if (event.type == 'local') {
this.videoChat.senderStream = event.stream;
} else {
this.videoChat.receiverStream = event.stream;
}
// to keep room-id in cache
localStorage.setItem(this.connection.socketMessageEvent, this.connection.sessionid);
if (event.type === 'local') {
this.connection.socket.on('disconnect', function () {
if (!this.connection.getAllParticipants().length) {
location.reload();
}
});
}
};
this.connection.onMediaError = (e) => {
if (e.message === 'Concurrent mic process limit.') {
if (DetectRTC.audioInputDevices.length <= 1) {
alert('Please select external microphone. Check github issue number 483.');
return;
}
var secondaryMic = DetectRTC.audioInputDevices[1].deviceId;
this.connection.mediaConstraints.audio = {
deviceId: secondaryMic
};
this.connection.join(this.connection.sessionid);
}
console.log(e)
};
I am making a editor using fabric js 2.4.1 and have completed all functionality except for the dynamic image cropping. The functionality involves creating a rectangle with the mouse over an image and clicking a crop button.
I have successfully done a proof of concept with a rectangle that was created statically but can't get it to render in my dynamic code. I don't think that the problem has to do with the dynamically created rect but I can't seem to isolate the problem. It has to be something simple that I'm overlooking and I think the problem might be in my crop button code.
document.getElementById("crop").addEventListener("click", function() {
if (target !== null && mask !== null) {
mask.setCoords();
target.clipPath = mask; // THIS LINE IS NOT WORKING!!!
//target.selectable = true;
target.setCoords();
console.log(target);
canvas.renderAll();
//canvas.remove(mask);
}
});
Here is a fiddle to the dynamic code that has the problem:
https://jsfiddle.net/Larry_Robertson/mqrv5fnt/
Here is a fiddle to the static code that I gained proof of concept from:
https://jsfiddle.net/Larry_Robertson/f34q67op/
Source code of Dynamic Version:
HTML
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="crop">Crop</button>
JS
var canvas = new fabric.Canvas('c', {
selection: true
});
var rect, isDown, origX, origY, done, object, mask, target;
var src = "http://fabricjs.com/lib/pug.jpg";
fabric.Image.fromURL(src, function(img) {
img.selectable = false;
img.id = 'image';
object = img;
canvas.add(img);
});
canvas.on('object:added', function(e) {
target = null;
mask = null;
canvas.forEachObject(function(obj) {
//alert(obj.get('id'));
var id = obj.get('id');
if (id === 'image') {
target = obj;
}
if (id === 'mask') {
//alert('mask');
mask = obj;
}
});
});
document.getElementById("crop").addEventListener("click", function() {
if (target !== null && mask !== null) {
mask.setCoords();
target.clipPath = mask; // THIS LINE IS NOT WORKING!!!
//target.selectable = true;
target.setCoords();
console.log(target);
canvas.renderAll();
//canvas.remove(mask);
}
});
canvas.on('mouse:down', function(o) {
if (done) {
canvas.renderAll();
return;
}
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
rect = new fabric.Rect({
left: origX,
top: origY,
//originX: 'left',
//originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
//angle: 0,
fill: 'rgba(255,0,0,0.3)',
transparentCorners: false,
//selectable: true,
id: 'mask'
});
canvas.add(rect);
canvas.renderAll();
});
canvas.on('mouse:move', function(o) {
if (done) {
canvas.renderAll();
return;
}
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
rect.set({
top: Math.abs(pointer.y)
});
}
rect.set({
width: Math.abs(origX - pointer.x)
});
rect.set({
height: Math.abs(origY - pointer.y)
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
if (done) {
canvas.renderAll();
return;
}
isDown = false;
//rect.selectable = true;
rect.set({
selectable: true
});
rect.setCoords();
canvas.setActiveObject(rect);
canvas.bringToFront(rect);
canvas.renderAll();
//alert(rect);
rect.setCoords();
object.clipPath = rect;
object.selectable = true;
object.setCoords();
canvas.renderAll();
//canvas.remove(rect);
done = true;
});
You need to set the dirty parameter on image on true, so object's cache will be rerendered next render call.
Here is the fiddle:
https://jsfiddle.net/mqrv5fnt/115/
var canvas = new fabric.Canvas('c', {
selection: true
});
var rect, isDown, origX, origY, done, object, mask, target;
var src = "http://fabricjs.com/lib/pug.jpg";
fabric.Image.fromURL(src, function(img) {
img.selectable = false;
img.id = 'image';
object = img;
canvas.add(img);
});
canvas.on('object:added', function(e) {
target = null;
mask = null;
canvas.forEachObject(function(obj) {
//alert(obj.get('id'));
var id = obj.get('id');
if (id === 'image') {
target = obj;
}
if (id === 'mask') {
//alert('mask');
mask = obj;
}
});
});
document.getElementById("crop").addEventListener("click", function() {
if (target !== null && mask !== null) {
mask.setCoords();
target.clipPath = mask; // THIS LINE IS NOT WORKING!!!
target.dirty=true;
//target.selectable = true;
target.setCoords();
canvas.remove(mask);
canvas.renderAll();
//canvas.remove(mask);
}
});
canvas.on('mouse:down', function(o) {
if (done) {
canvas.renderAll();
return;
}
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
rect = new fabric.Rect({
left: origX,
top: origY,
//originX: 'left',
//originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
//angle: 0,
fill: 'rgba(255,0,0,0.3)',
transparentCorners: false,
//selectable: true,
id: 'mask'
});
canvas.add(rect);
canvas.renderAll();
});
canvas.on('mouse:move', function(o) {
if (done) {
canvas.renderAll();
return;
}
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
rect.set({
top: Math.abs(pointer.y)
});
}
rect.set({
width: Math.abs(origX - pointer.x)
});
rect.set({
height: Math.abs(origY - pointer.y)
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
if (done) {
canvas.renderAll();
return;
}
isDown = false;
//rect.selectable = true;
rect.set({
selectable: true
});
rect.setCoords();
canvas.setActiveObject(rect);
canvas.bringToFront(rect);
canvas.renderAll();
//alert(rect);
rect.setCoords();
object.clipPath = rect;
object.selectable = true;
object.setCoords();
canvas.renderAll();
//canvas.remove(rect);
done = true;
});
I need some help please if the initiator of the room has no camera,I want the joiner that has both audio and camera to be used. but the problem is that I set to false to video mediacontstraints. now the joiner will only have the audio the camera is gone what I want is audio and video for the joiner.
#Muaz Khan - RTCMultiConnection.js
var initiator = new RTCMultiConnection();
initiator.socketURL = 'url here';
initiator.session = {
audio: true,
video:false,
};
initiator.mediaConstraints = {
audio: true,
video: false
};
initiator.sdpConstraints = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
initiator.iceServers = [];
initiator.iceServers.push({
urls: "urls"
});
initiator.iceServers.push({
urls: "urls",
username: "username",
credential: "credential"
});
initiator.audiosContainer = document.getElementById('audios-container');
initiator.onstream = function(event) {
var width = parseInt(initiator.audiosContainer.clientWidth / 4) - 20;
console.log("the dispatcher width is",width);
var mediaElement = getHTMLMediaElement(event.mediaElement, {
title: event.userid,
buttons: ['full-screen'],
width: width,
showOnMouseEnter: false
});
initiator.audiosContainer.appendChild(mediaElement);
setTimeout(function() {
mediaElement.media.play();
}, 5000);
mediaElement.id = event.streamid;
};
initiator.onstreamended = function(event) {
var mediaElement = document.getElementById(event.streamid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
}
};
initiator.openOrJoin('channel-id', function(isRoomExist, roomid) {
if (!isRoomExist) {
}
});
// for participant
var connection = new RTCMultiConnection();
connection.socketURL = 'url here';
connection.session = {
audio: true,
video: true
};
connection.mediaConstraints = {
audio: true,
video: true
};
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
connection.iceServers = [];
connection.iceServers.push({
urls: "urls"
});
connection.iceServers.push({
urls: "urls",
username: "username",
credential: "password"
});
connection.audiosContainer = document.getElementById('audios-container');
connection.onstream = function(event) {
var width = parseInt(connection.audiosContainer.clientWidth / 2) - 20;
console.log("the responder width is",width);
var mediaElement = getHTMLMediaElement(event.mediaElement, {
title: event.userid,
buttons: ['full-screen'],
width: width,
showOnMouseEnter: false
});
connection.audiosContainer.appendChild(mediaElement);
setTimeout(function() {
mediaElement.media.play();
}, 5000);
mediaElement.id = event.streamid;
};
connection.onstreamended = function(event) {
var mediaElement = document.getElementById(event.streamid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
}
};
connection.openOrJoin('channel-id', function(isRoomExist, roomid) {
if (!isRoomExist) {
}
});
Thank you in advance.
Untested, but you should be able to init your RTC connection with a dummy video+audio MediaStream, even if your user doesn't have any device, and without asking them for any approval:
function SilentStream(videoColor) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', {alpha: false});
ctx.fillStyle = videoColor || 'black';
ctx.fillRect(0,0,canvas.width, canvas.height);
const videoStream = canvas.captureStream();
const videoTrack = videoStream.getVideoTracks()[0];
const a_ctx = new (window.AudioContext || window.webkitAudioContext)();
const audioStream = a_ctx.createMediaStreamDestination().stream;
const audioTrack = audioStream.getAudioTracks()[0];
return new MediaStream([videoTrack, audioTrack]);
}
// just to show it's streaming
black.srcObject = SilentStream();
green.srcObject = SilentStream('green');
<video id="black" controls autoplay></video>
<video id="green" controls autoplay></video>
I am using arcgis js api.I have called all necessary esri class modules and all class name in order. I am using query task to add points to map as a graphic layer.I am getting error for graphic.I am not able to trace the error.
var map;
var toc;
var mapserviceurl = "http://......./arcgisserver/rest/services/CRD/CRD1/MapServer";
require(["dojo/parser",
"dojo/on", "esri/map","esri/dijit/HomeButton",
"esri/dijit/Measurement", "dojo/_base/lang","esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer","esri/graphic","esri/layers/GraphicsLayer",
"esri/dijit/Scalebar","esri/dijit/BasemapGallery","esri/toolbars/navigation",
"esri/dijit/OverviewMap","esri/geometry/Extent","esri/SpatialReference",
"esri/geometry/webMercatorUtils","esri/tasks/query","esri/tasks/QueryTask",
"esri/toolbars/draw","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol","esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer","esri/geometry/Point","esri/Color",
"agsjs/dijit/TOC","esri/InfoTemplate", "esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters", "esri/dijit/Popup", "dojo/dom-construct",
"esri/tasks/locator","dojo/_base/array", "dojo/domReady!"],
function (parser, on, Map, HomeButton, Measurement,lang, ArcGISDynamicMapServiceLayer, FeatureLayer, graphic, GraphicsLayer, Scalebar, BasemapGallery, Navigation, OverviewMap, Extent, SpatialReference,
webMercatorUtils, Query, QueryTask, DrawToolbar, SimpleLineSymbol, SimpleFillSymbol,
PictureMarkerSymbol, SimpleMarkerSymbol, SimpleRenderer,Point,Color,TOC,InfoTemplate,IdentifyTask,IdentifyParameters,
Popup,domConstruct,Locator,arrayUtils) {
parser.parse();
createDialogs();
var identifyTask, identifyParams;
var intialextent = new Extent(7778597.959975056, 1564947.1810059766, 9217107.340624947, 2133123.2518000016, new SpatialReference({ wkid: 102100 }));
map = new Map("divMap", {
basemap: "streets",
center: [75, 14],
zoom: 7,
extent: intialextent,
logo: false,
fitExtent: true,
slider: true
});
var operationalLayer = new ArcGISDynamicMapServiceLayer(mapserviceurl);
var samplelocations = new GraphicsLayer({ id: "Samplelocations" });
var samplelocationsSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([239, 107, 0]), 1), new Color([239, 107, 0]));
var samplelocationrenderer = new SimpleRenderer(samplelocations);
samplelocations.setRenderer(samplelocationrenderer);
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
map.on('layers-add-result', function (evt) {
try {
var toc = new TOC({
map: map,
layerInfos: [{
layer: pointFeatureLayer,
title: "My Feature"
}, {
layer: operationalLayer,
title: "Dynamic Map"
}]
}, "tocDiv");
toc.startup();
toc.on("load", function () {
console.log("TOC loaded");
});
}
catch (e) {
console.error(e.message);
}
});
map.addLayers([operationalLayer, pointFeatureLayer, samplelocations]);
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.on("load", function () {
basemapGallery.remove('basemap_1');
basemapGallery.remove('basemap_2');
basemapGallery.remove('basemap_3');
basemapGallery.remove('basemap_4');
basemapGallery.remove('basemap_5');
basemapGallery.remove('basemap_8');
});
basemapGallery.startup();
var Scalebar = new Scalebar({
map: map,
scalebarUnit: 'metric',
scalebarStyle: 'line'
});
var measurement = new Measurement({
map: map
}, measurementDiv);
measurement.startup();
map.on("mouse-move", showcoordiantes);
map.on("mouse-drag", showcoordiantes);
//overview tools
var OverviewMap = new OverviewMap({
map: map,
attachTo: "bottom-right",
color: " #D84E13",
opacity: .40
});
OverviewMap.startup();
function showcoordiantes(evt) {
var p = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
$("#latlong").html("Lat,Long : " + p.y.toFixed(4) + "," + p.x.toFixed(4));
}
$("#ClearGraphics").click(function (e) {
e.preventDefault();
// drawtools.deactivate();
map.infoWindow.hide();
map.setMapCursor("default");
map.graphics.clear();
});
var navToolbar = new Navigation(map);
//zoom In
$("#ZoomInTool").click(function (e) {
e.preventDefault();
map.setMapCursor("url('images/cursors/zoomin.cur'), auto");
navToolbar.activate(Navigation.ZOOM_IN);
});
//ZoomOut
$("#ZoomOutTool").click(function (e) {
e.preventDefault();
map.setMapCursor("url('images/cursors/zoomout.cur'), auto");
navToolbar.activate(Navigation.ZOOM_OUT);
});
//Pan
$("#panTool").click(function (e) {
e.preventDefault();
map.setMapCursor("url('images/cursors/pan.cur'), auto");
navToolbar.activate(Navigation.PAN);
});
//FullExtent
$("#zoomfullext").click(function (e) {
e.preventDefault();
map.setMapCursor("default");
navToolbar.deactivate();
// navToolbar.zoomToFullExtent();
map.setExtent(intialextent, true);
});
//Zoom to previous
$("#zoomtoPrevExtent").click(function (e) {
e.preventDefault();
map.setMapCursor("default");
navToolbar.deactivate();
navToolbar.zoomToPrevExtent();
});
//Zoom to Next
$("#zoomtoNextExtent").click(function (e) {
e.preventDefault();
map.setMapCursor("default");
navToolbar.deactivate();
navToolbar.zoomToNextExtent();
});
map.on("load", showresults)
function showresults() {
var queryTask = new esri.tasks.QueryTask('http://......./arcgisserver/rest/services/CRD/CRD2/MapServer/0');
var query = new esri.tasks.Query();
symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(10);
symbol.setColor(new dojo.Color([255, 255, 0, 0.5]));
query.returnGeometry = true;
query.outFields = ["*"];
query.outSpatialReference = map.spatialReference;
query.where = "objectid = '" + 5281902 + "'";
map.graphics.clear();
queryTask.execute(query, addPointsToMap);
function addPointsToMap(featureSet) {
var graphic = featureSet.features;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
var extent = esri.graphicsExtent(features);
if (extent) {
map.setExtent(extent)
}
}
}
});
I am getting error as
You are assigning an array to the graphic variable:
var graphic = featureSet.features;
Select a single feature of the array and set the symbol then e.g.
var graphic = featureSet.features[0];