hi i am trying to add graphic to graphicslayer. here is the problem.
i get json result from sketchviewmodel create function which is graphic.
i store this in to new jsonobject.
then i try to add this graphic into graphicslayer manually. but its giving error.
here is the json
{
"geometry":{
"spatialReference":{
"latestWkid":3857,
"wkid":102100
},
"x":243208.09643883476,
"y":2940285.766420703,
"z":351.9580905416081
},
"symbol":{
"type":"point-3d",
"symbolLayers":[
{
"type":"Icon",
"material":{
},
"resource":{
"primitive":"kite"
},
"size":15,
"outline":{
"color":[
0,
0,
0
],
"size":2.25
}
}
]
},
"attributes":{
},
"popupTemplate":null
}
this code gives error
const [Graphic] = await loadModules(["esri/Graphic"]);
let g = new Graphic(data); // data which is json i gave.
any adivce ? Thank you.
Assuming you are using toJSON method of Graphic to generate the json object (in your example data). Then the correct way of creating a Graphic from the json object is to use the "reverse" method fromJSON. Something like this should work,
const [Graphic] = await loadModules(["esri/Graphic"]);
// here use fromJSON method to create the graphic
let g = Graphic.fromJSON(data); // data which is json i gave.
ArcGIS API - Graphic fromJSON
Related
I've build a simple Here Map using Vue 2 and the JS API in version 3.1.30.17. The map works fine in all browsers except Firefox v102.
This is the error message in Firefox:
Tangram [error]: Error for style group 'non-collision' for tile 20/7/68/41/7 CanvasRenderingContext2D.drawImage: Passed-in canvas is empty: loadTexture#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:417267
e/sn.addWorker/<#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:63015
EventListener.handleEvent*e/sn.addWorker#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:62515
e/value/<#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515089
value#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515502
value#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:514847
e/value/this.initializing<#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511497
promise callback*value#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511472
Ul#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:335:441
p.eh#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:378:446
p.Ge#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:329:436
p.Ge#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:376:356
S#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:369:214
T.prototype.u#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:410:166
T#https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:401:290
... The error is even bigger
The following method I'm using to init Here Maps inside Vue's mounted:
async initializeHereMap() {
const mapContainer = this.$refs.hereMap;
const H = window.H;
// Initialize the platform object:
this.platform = new H.service.Platform({
apikey: this.apiKey,
});
await this.geocode(this.platform, this.originAddress)
.then(data => this.routingParameters.origin = data[0]);
await this.geocode(this.platform, this.destinationAddress)
.then(data => this.routingParameters.destination = data[0]);
// Obtain the default map types from the platform object
const defaultLayers = this.platform.createDefaultLayers({
lg: window.navigator.language,
});
// Instantiate (and display) a map object:
const map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
zoom: this.zoom,
center: this.center,
padding: {
top: this.padding,
bottom: this.padding,
left: this.padding,
right: this.padding,
},
});
// create map pins
const mapPinOrigin = this.addMapPin('A', 40);
const mapPinDestination = this.addMapPin('B', 40);
let linestring = new H.geo.LineString();
linestring.pushPoint(this.routingParameters.origin);
linestring.pushPoint(this.routingParameters.destination);
// Create a polyline to display the route:
let routeLine = new H.map.Polyline(linestring, {
linestring,
style: { strokeColor: '#3F80C4', lineWidth: 5 },
});
// Create a marker for the start point:
let startMarker = new H.map.Marker(this.routingParameters.origin, { icon: mapPinOrigin });
// Create a marker for the end point:
let endMarker = new H.map.Marker(this.routingParameters.destination, { icon: mapPinDestination });
// Add the route polyline and the two markers to the map:
map.addObjects([routeLine, startMarker, endMarker]);
// Set the map's viewport to make the whole route visible:
map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
// add behavior control
if (this.behaviors) new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// add UI
if (this.controls) H.ui.UI.createDefault(map, defaultLayers);
},
Is there some one facing the same issue and could solved it?
Did you follow this example on: https://developer.here.com/tutorials/how-to-implement-a-web-map-using-vuejs/ ?
Tangram error is related to rendering e.g. when render map objects (like icons, markers, polylines etc.) and map vector tiles.
I don't think so that this issue related to HERE JS Map API.
Because all examples on https://developer.here.com/documentation/examples/maps-js are working well on my FireFox 102.0.1
It could be some map objects like icons or markers etc. are created in some moment but is not finished yet and then try to push onto map? Creating an icon in some asynchron function?
Or in like your code:
await this.geocode(this.platform, this.originAddress)
.then(data => this.routingParameters.origin = data[0]);
You don't know when func geocode will be finished (e.g. due slow internet connectivity)
It could be this command above is not done yet, but your code is already start to run this code:
linestring.pushPoint(this.routingParameters.origin);<-- 'this.routingParameters.origin' could be null
linestring.pushPoint(this.routingParameters.destination);
// Create a polyline to display the route:
let routeLine = new H.map.Polyline(linestring, { <-- Could cause Tangram error because 'linestring' is strange due undefined origin yet!
linestring,
style: { strokeColor: '#3F80C4', lineWidth: 5 },
});
The polyline options is not correct in:
new H.map.Polyline(linestring, {
linestring,
style: { strokeColor: '#3F80C4', lineWidth: 5 },
}
Why in above the 'linestring' is second time in options?
Please follow correct syntax on:
https://developer.here.com/documentation/maps/3.1.31.0/api_reference/H.map.Polyline.html#.Options
I'm having an issue where I try to set my VectorSource with my features array from my state but I get "feature.getId is not a function".
What I would like is the have my feature displayed depending on my state, because i'll have filter and I need to fave feature on map reacting with filters.
How can i set my features list in the feature in my VectorSource ?
I'm getting my state array like this :
getAllFeature() {
return this.$store.getters.GET_ALLFEATURES;
},
then i'm trying to passe the array in the vectorSource
source: new VectorSource({
format: new GeoJSON(),
features: this.getAllFeatures,
}),
Notice that I modified the form of my array comparing to the native geojson file I have
getGeoJSONData() {
axios
.all([
axios.get("http://localhost:8080/germany.geojson"),
axios.get("http://localhost:8080/france.geojson"),
])
.then(
axios.spread((...responses) => {
const features = [];
responses.forEach((res) => {
features.push(res.data.features.flat());
});
this.$store.dispatch("LOAD_FEATURES", features.flat());
})
);
},
},
Even if I try to set the strict same array that I receive from one of the Geojson, i have this error.
Any help would be appreciated
Thanks in advance
This one I've been banging my head against for a few weeks now.
Scenario:
Let user generate an image out of layers they select
Convert image to canvas
Share image from canvas on facebook wall using share_open_graph (along with the image, a short text and title will be shared)
I've already had a solution in place using publish_actions but that was recently removed from the API and is no longer available.
I am using js and html for all code handling.
The issue is that I can generate a png image from the canvas but that is saved as base64 and share_open_graph doesn't allow this type of image, it needs a straight forward url such as './example.png'. I have tried using several approaches and with canvas2image, converting and saving image using file-system but all of these fail.
Does anyone have similar scenario and possible solution from April/May 2018 using share_open_graph ?
My current code looks like this - it fails at the image conversion and save to a file (Uncaught (in promise) TypeError: r.existsSync is not a function at n (file-system.js:30)). But I am open to different solutions as this is clearly not working.
html2canvas(original, { width: 1200, height: 628
}).then(function(canvas)
{
fb_image(canvas);
});
var fb_image = function(canvas) {
canvas.setAttribute('id', 'canvas-to-share');
document.getElementById('img-to-share').append(canvas);
fbGenerate.style.display = 'none';
fbPost.style.display = 'block';
var canvas = document.getElementById('canvas-to-share');
var data = canvas.toDataURL('image/png');
var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
var decodedPng = base64.decode(encodedPng);
const buffer = new Buffer(data.split(/,\s*/)[1], 'base64');
pngToJpeg({ quality: 90 })(buffer).then(output =>
fs.writeFile('./image-to-fb.jpeg', output));
var infoText_content = document.createTextNode('Your image is being
posted to facebook...');
infoText.appendChild(infoText_content);
// Posting png from imageToShare to facebook
fbPost.addEventListener('click', function(eve) {
FB.ui(
{
method: 'share_open_graph',
action_type: 'og.shares',
href: 'https:example.com',
action_properties: JSON.stringify({
object: {
'og:url': 'https://example.com',
'og:title': 'My shared image',
'og:description': 'Hey I am sharing on fb!',
'og:image': './image-to-fb.jpeg',
},
}),
},
function(response) {
console.log(response);
}
);
});
};
I'm working on a map that uses FeatureLayer.Mode_ONDEMAND. To see certain layer, I pass in a project ID using featureLayer.setDefinitionExpression. Where such layer exists, I see it. What I want to know is how to detect when no layer exists. I want to print an alert to the viewer instead of showing just a blank map. Here's my code:
function init() {
map = new esri.Map("mapDiv", {
basemap: "topo",
zoom: 9
});
var featureLayer = new esri.layers.FeatureLayer("http://services.arcgis.com/v01g34asdwfAi/arcgis/rest/services/Projects/FeatureServer/0",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
opacity: 1
});
featureLayer.setDefinitionExpression("SrvyDescID=\'' . htmlspecialchars($ProjectID) . '\'");
console.log(featureLayer.graphics);
console.log(featureLayer.graphics[0]);
map.addLayer(featureLayer);
}
What I learned is when the project is valid, feature.graphics will return an array. But I'm unable to treat it like an array. For example:
console.log(featureLayer.graphics) returns an array object
but
console.log(featureLayer.graphics[0]) returns "undefined".
featureLayer.graphic.length also doesn't work. How do I use this array object to let me know that a layer is displayed on the map?
Attached is a screenshot of the console log. Thanks for your help.
I needed to catch "update-end" event. Final code:
map = new esri.Map("mapDiv", {
center: [-118.30, 34.3],
zoom: 8,
basemap: "topo"
});
on(map, "update-end", function(){ // update-end event will execute after the layer has been added to the map
if(featureLayer.graphics.length >= 1)
{
// do your thing
}
})
var featureLayer = new
esri.layers.FeatureLayer("http://services.arcgis.com/v01gqwMseaqNAi/arcgis/rest/services/Project_boundaries_021616/FeatureServer/0",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
opacity: 1
});
featureLayer.setDefinitionExpression("SrvyDescID=\'' . htmlspecialchars($SDID) . '\'");
map.addLayer(featureLayer);
I am using a chart to visualize data in a TimeboxScopedApp, and I want to update the data when scope changes. The more brute-force approach of using remove() then redrawing the chart as described here leaves me with an overlaid "Loading..." mask, but otherwise works. The natural approach of using the Highchart native redraw() method would be my preference, only I don't know how to access the actual Highchart object and not the App SDK wrapper.
Here's the relevant part of the code:
var chart = Ext.getCmp('componentQualityChart');
if (chart) {
var chartCfg = chart.getChartConfig();
chartCfg.xAxis.categories = components;
chart.setChartConfig(chartCfg);
chart.setChartData(data);
chart.redraw(); // this doesn't work with the wrapper object
} else { // draw chart for the first time
How do I go about redrawing the chart with the new data?
Assuming chart (componentQualityChart) is an instance of Rally.ui.chart.Chart, you can access the HighCharts instance like this:
var highcharts = chart.down('highchart').chart;
// Now you have access to the normal highcharts interface, so
// you could change the xAxis
highcharts.xAxis[0].setCategories([...], true);
// Or you could change the series data
highcharts.series[0].data.push({ ... }); //Add a new data point
// Or pretty much anything else highcharts lets you do
Using _unmask() removes the overlaid "Loading.." mask
if (this.down('#myChart')) {
this.remove('myChart');
}
this.add(
{
xtype: 'rallychart',
height: 400,
itemId: 'myChart',
chartConfig: {
//....
},
chartData: {
categories: scheduleStateGroups,
series: [
{
//...
}
]
}
}
);
this.down('#myChart')._unmask();