Im trying to use the three.js online editor to do a normal mapping experiment. The editor is great as you can see below:
Without normal map:
With normal map:
My problem when exporting, the most important thing for me is the materials but is looks like the exporter is not exporting up materials settings like shaders or uniforms:
{
"metadata": {
"version": 4,
"type": "object",
"generator": "ObjectExporter"
},
"geometries": [
{
"type": "PlaneGeometry",
"width": 200,
"height": 200,
"widthSegments": 1,
"heightSegments": 12
}],
"materials": [
{
"type": "MeshPhongMaterial",
"color": 16580351,
"ambient": 16777215,
"emissive": 0,
"specular": 13027014,
"shininess": 60,
"opacity": 1,
"transparent": false,
"wireframe": false
}],
"object": {
"type": "Scene",
"children": [
{
"name": "Plane 8",
"type": "Mesh",
"position": [-13.67,102.97,28.83],
"rotation": [-0.18,-0.22,0],
"scale": [1,1,1],
"geometry": 0,
"material": 0
},
{
"name": "AmbientLight 10",
"type": "AmbientLight",
"color": 2236962
},
{
"name": "AmbientLight 11",
"type": "AmbientLight",
"color": 2236962
},
{
"name": "DirectionalLight 12",
"type": "DirectionalLight",
"color": 16777215,
"intensity": 1,
"position": [200,200,200]
},
{
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
},
{
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
},
{
"name": "DirectionalLight 12 Target",
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
}]
}
}
I understand that the editor is work in progress so this is probably not implemented yet, but do you know if there is a way to see the generated code from the editor when building the scene? I can can see the code it should be enough for me.
Thanks :)
Sorry guys I figured how get the normal map to work, I still dont know how to see the code from the editor but I will close the question anyway... Thanks to those that took the time to read it.
//wall
var textures = {
lion: THREE.ImageUtils.loadTexture('../media/lion.png'),
lionbumpnormal: THREE.ImageUtils.loadTexture('../media/lion-bumpnormal.png')
};
// common material parameters
var ambient = 0, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23;
var material = new THREE.MeshPhongMaterial( {
map: textures.lion,
normalMap: textures.lionbumpnormal,
color: 16580351,
ambient: 16777215,
emissive: 0,
specular: 13027014,
shininess: 60,
opacity: 1,
transparent: false,
wireframe: false
} );
var planeGeometry = new THREE.PlaneGeometry(10, 10);
var wall = new THREE.Mesh(
planeGeometry,
material
);
Not sure if this is what you meant, but I was trying to load a simple scene I setup in the editor. Was able to do it using THREE.ObjectLoader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="../three.js/build/three.js"></script>
<script>
(function() {
var Game = function() {
}
Game.prototype.init = function() {
var loader = new THREE.ObjectLoader();
loader.load('data.json', (function(data) {
this.scene = data;
this.load();
}).bind(this));
}
Game.prototype.draw = function() {
this.renderer.render(this.scene, this.camera);
}
Game.prototype.load = function() {
var container = document.createElement('div');
document.body.appendChild(container);
this.camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.z = 500;
this.camera.position.x = 500;
this.camera.position.y = 100;
this.camera.lookAt(new THREE.Vector3(0,0,0));
this.scene.add(this.camera);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild(this.renderer.domElement);
this.update();
};
Game.prototype.update = function() {
requestAnimationFrame(this.update.bind(this));
this.draw();
}
window.onload = function() {
var g = new Game();
g.init();
}
}).call(this);
</script>
</head>
<body>
</body>
</html>
Related
I have the following JS code to create a 1 mile buffer in Openlayers using JSTS. However, I'd like to add 2 or 3 buffers but change the colour from the default for easier viewing.
So far, I've tried this as this styling as changed the fill/stroke of my points before
var source = new ol.source.Vector();
fetch('http://18.207.139.64:8080/geoserver/egm715/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=egm715:Mid_Ulster1&' +
'outputFormat=application/json&srsname=EPSG:3857').then(function(response) {
return response.json();
}).then(function(json) {
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
var parser = new jsts.io.OL3Parser();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres
var buffered = jstsGeom.buffer(1609);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
});
var buffer1 = new ol.layer.Vector({
source: source,
title: 'Mid Ulster Buffer - 1 mile',
visible: false,
style: new ol.style.Style(
{
image: new ol.style.Circle(
{
stroke: new ol.style.Stroke(
{
color: [0, 102, 77],
width: 2
}
),
fill: new ol.style.Fill(
{
color: [230, 255, 255, 0.6]
}
)
}
)
}
)
});
However, the default colour remains - is there any way I can change it?
As #Mike indicated in his comment: "The image option in ol.style.Style is used to style point features with an icon or regular shapes such as a circle. Your buffered geometry is a polygon, and is styled by stroke and fill options of ol.style.Style"
Change the style:
style: new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: [0, 102, 77],
width: 2
}),
fill: new ol.style.Fill({
color: [230, 255, 255, 0.6]
})
})
})
To remove the image: new ol.styld.Circle, something like:
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
code snippet
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTS Integration</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<script src="https://unpkg.com/jsts#2.3.0/dist/jsts.min.js"></script>
<style>
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var json = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "FoodOutlets-MidUlst1.1",
"geometry": {
"type": "Point",
"coordinates": [-760868.77651775, 7266893.59283424]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.2",
"geometry": {
"type": "Point",
"coordinates": [-745762.5639359, 7273034.00676835]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.3",
"geometry": {
"type": "Point",
"coordinates": [-746154.82706286, 7273335.72201827]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.4",
"geometry": {
"type": "Point",
"coordinates": [-744607.30629421, 7255093.16775183]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.5",
"geometry": {
"type": "Point",
"coordinates": [-745202.69041239, 7255413.35399374]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.6",
"geometry": {
"type": "Point",
"coordinates": [-753889.58828371, 7266121.43420011]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.7",
"geometry": {
"type": "Point",
"coordinates": [-753078.05077876, 7267405.03419487]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.8",
"geometry": {
"type": "Point",
"coordinates": [-797828.64640079, 7249092.54222032]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.9",
"geometry": {
"type": "Point",
"coordinates": [-753881.35356931, 7266025.39133859]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.10",
"geometry": {
"type": "Point",
"coordinates": [-742327.05477715, 7302434.75328766]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.11",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.12",
"geometry": {
"type": "Point",
"coordinates": [-742442.85453496, 7302225.99299248]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.13",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.14",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.15",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.16",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.17",
"geometry": {
"type": "Point",
"coordinates": [-743083.01564625, 7280176.20812626]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.18",
"geometry": {
"type": "Point",
"coordinates": [-750837.75665786, 7294119.26420537]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.19",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.20",
"geometry": {
"type": "Point",
"coordinates": [-750790.13706862, 7294411.61511293]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.21",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.22",
"geometry": {
"type": "Point",
"coordinates": [-729059.04788702, 7288230.5536544]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.23",
"geometry": {
"type": "Point",
"coordinates": [-771157.83824017, 7283468.51757007]
},
"geometry_name": "the_geom",
"properties": {}
}, ],
"totalFeatures": 140,
"numberMatched": 140,
"numberReturned": 140,
"timeStamp": "2021-03-02T05:15:46.157Z",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3857"
}
}
};
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {
featureProjection: 'EPSG:3857'
});
var source = new ol.source.Vector(); // VectorSource();
var parser = new jsts.io.OL3Parser();
parser.inject(
ol.geom.Point,
ol.geom.LineString,
ol.geom.LinearRing,
ol.geom.Polygon,
ol.geom.MultiPoint,
ol.geom.MultiLineString,
ol.geom.MultiPolygon
);
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres adjusted for the projection
var buffered = jstsGeom.buffer(1609 / ol.proj.getPointResolution('EPSG:3857', 1, ol.extent.getCenter(feature.getGeometry().getExtent())));
// create a buffer of 40 meters around each line
// var buffered = jstsGeom.buffer(1000);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
var rasterLayer = new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([126.979293, 37.528787]),
zoom: 15,
}),
});
map.getView().fit(source.getExtent());
</script>
</body>
</html>
With this file "segment.geojson", I draw a red segment of thickness 20 :
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke": "#ff0000",
"stroke-width": 20,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [[-3,48],[7,45]]
}
}
]
}
and with getJSON I display it on my map:
<body>
<div id="viewerDiv"></div>
<script>
window.onload= function() {
var map = L.map("viewerDiv").setView([50,50],5) ;
L.tileLayer(...blabla...).addTo(map);
var segment = '';
$.getJSON("segment.geojson", {dataType: "json"}, function (data) {
segment = new L.GeoJSON(data);
map.fitBounds(segment.getBounds());
})
.done(function () {
segment.addTo(map);
});
}
</script>
</body>
but it is blue and thick 1 !!! Can anyone help me? thank you in advance, JLC
The source is here: https://cavaliers23.fr/iti/ign/test_couleur.html
You are using the wrong definition. You should pass the style as a second argument.
$.getJSON("segment.geojson", { dataType: "json" }, function (data) {
segment = new L.GeoJSON(data, {
style: {
color: "#ff0000",
weight: 20,
opacity: 0.65,
},
});
You can also pass individual styles to features using the properties field
"features": [
{
"type": "Feature",
"properties": {
"color": "blue"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-3, 48],
[7, 45]
]
}
},
{
"type": "Feature",
"properties": {
"color": "red"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-33, 48],
[7, 45]
]
}
}
$.getJSON("segment.geojson", { dataType: "json" }, function (data) {
segment = new L.GeoJSON(data, {
style: (f) => {
switch (f.properties.color) {
case "red":
return {
color: "#ff0000",
weight: 20,
opacity: 0.65,
};
case "blue":
return {
color: "#0000ff",
weight: 20,
opacity: 0.65,
};
}
},
});
I started from this link:
ArcGIS Samples - GeoJSON Layer
I would like to show the Shake Intensity as per the link below:
Sample
Service
I have tried to implement it. Please have a look:
codepen
<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 layers-geojson sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/layers-geojson/index.html
-->
<title>GeoJSONLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/views/MapView",
"esri/widgets/Legend"
], function(Map, GeoJSONLayer, MapView, Legend) {
// If GeoJSON files are not on the same domain as your website, a CORS enabled server
// or a proxy is required.
const url =
//"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime&minlatitude=33.387&minlongitude=-127.134&maxlatitude=40.457&maxlongitude=-115.994&minlatitude=33.387&minlongitude=-127.134&maxlatitude=40.457&maxlongitude=-115.994&producttype=shakemap";
"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/query?where=1=1&geometry=-122.40,37.76&geometryType=esriGeometryPoint&inSR=4326&distance=100&units=esriSRUnit_StatuteMile&outFields=*&returnGeometry=true&geometryPrecision=4&outFields=*&f=pgeojson";
// Paste the url into a browser's address bar to download and view the attributes
// in the GeoJSON file. These attributes include:
// * mag - magnitude
// * type - earthquake or other event such as nuclear test
// * place - location of the event
// * time - the time of the event
// Use the Arcade Date() function to format time field into a human-readable format
const template = {
title: "Earthquake Info",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
]
};
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [
{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "4px"
},
{
value: 8,
size: "40px"
}
]
}
]
};
const geojsonLayer = new GeoJSONLayer({
url: url,
title: "MMI",
copyright: "USGS Earthquakes",
popupTemplate: template,
renderer: renderer //optional
});
const map = new Map({
basemap: "gray",
layers: [geojsonLayer]
});
const view = new MapView({
container: "viewDiv",
center: [-122, 37],
zoom: 6,
map: map
});
view.ui.add(
new Legend({
view: view
}),
"bottom-left"
);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
The url returns a Multipolygon feature:
Service Query Attempt
The map shows points no polygons.
Could you please help me?
The query is actually returning polygons, the problem you have is the wrong renderer. That is the reason you are seeing as points.
Here you have your example working, I use the renderer defined in the service you might want to custom it,
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>GeoJSONLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/renderers/support/jsonUtils"
], function (Map, GeoJSONLayer, MapView, Legend, rendererJsonUtils) {
const url =
"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/query?where=1=1&geometry=-122.40,37.76&geometryType=esriGeometryPoint&inSR=4326&distance=100&units=esriSRUnit_StatuteMile&outFields=*&returnGeometry=true&geometryPrecision=4&outFields=*&f=pgeojson";
const template = {
title: "Shake Intensity",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "grid_value",
label: "Grid Value"
},
{
fieldName: "mag",
label: "Magnitude"
},
{
fieldName: "eventTime",
label: "Event Time",
format: {
dateFormat: "short-date-short-time"
}
},
{
fieldName: "updated",
label: "Updated",
format: {
dateFormat: "short-date-short-time"
}
},
{
fieldName: "url",
label: "Url"
}
]
}
]
};
const rendererJSON = {
"field": "grid_value",
"classificationMethod": "esriClassifyManual",
"classBreakInfos": [
{
"classMaxValue": 1.9999,
"symbol": {
"color": [
0,
0,
0,
0
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "I (Not Felt)"
},
{
"classMaxValue": 3.9999,
"symbol": {
"color": [
0,
0,
0,
0
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "II - III (Weak)"
},
{
"classMaxValue": 4.9999,
"symbol": {
"color": [
140,
250,
230,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "IV (Light)"
},
{
"classMaxValue": 5.9999,
"symbol": {
"color": [
140,
250,
140,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "V (Moderate)"
},
{
"classMaxValue": 6.9999,
"symbol": {
"color": [
255,
220,
20,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "VI (Strong)"
},
{
"classMaxValue": 7.9999,
"symbol": {
"color": [
255,
180,
0,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "VII (Very Strong)"
},
{
"classMaxValue": 8.9999,
"symbol": {
"color": [
255,
120,
20,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "VIII (Severe) "
},
{
"classMaxValue": 9.9999,
"symbol": {
"color": [
255,
0,
0,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "IX (Violent)"
},
{
"classMaxValue": 12,
"symbol": {
"color": [
143,
0,
0,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "X+ (Extreme)"
}
],
"type": "classBreaks",
"minValue": 0
};
const renderer = rendererJsonUtils.fromJSON(rendererJSON);
const geojsonLayer = new GeoJSONLayer({
url: url,
title: "MMI",
copyright: "USGS Earthquakes",
popupTemplate: template,
renderer
});
const map = new Map({
basemap: "gray",
layers: [geojsonLayer]
});
const view = new MapView({
container: "viewDiv",
center: [-122, 37],
zoom: 6,
map: map
});
view.ui.add(
new Legend({
view: view
}),
"bottom-left"
);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
One last thing, I am not quite sure why you querying and using GeoJSONLayer, remember that you can use FeatureLayer that actually support many query operations and you don't need to get the json data it does it for you.
When I generate my Highchart chart it generates complete. The only thing that doesn't show up is the export option.
Can anybody figure out what I am doing wrong?
Do I need to specify extra CSS styling options of some sort or include another JS script to allow this to work? I can't really figure it out at the moment.
chart1 = new Highcharts.Chart({
"chart": {
"renderTo": "container",
"type": "column"
},
"title": {
"text": "Doorlooptijd exploten"
},
"subtitle": {
"text": "Databron: Digibieb"
},
"xAxis": {
"categories": {
"2": "> xx",
"1": "< xx",
"0": "< xx"
}
},
"yAxis": {
"min": 0,
"title": {
"text": "Aantallen"
}
},
"legend": {
"layout": "vertical",
"backgroundColor": "#FFFFFF",
"align": "left",
"verticalAlign": "top",
"x": 100,
"y": 100,
"floating": 0,
"shadow": 1
},
"exporting": {
"enabled": true
},
"credits": {
"enabled": false
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
}
},
"series": [{
"name": "asd",
"data": [1, 1, 1]
}, {
"name": "asd2",
"data": [1, 1, 1]
}, {
"name": "asd3",
"data": [1, 1, 1]
}, {
"name": "asd4",
"data": [0, 0, 25]
}, {
"name": "asd5",
"data": [54, 19, 53]
}, {
"name": "asd6",
"data": [0, 0, 4]
}, {
"name": "asd8",
"data": [22, 4, 28]
}, {
"name": "asd7",
"data": [23, 40, 19]
}, {
"name": "asd9",
"data": [23, 13, 8]
}, {
"name": "asd10",
"data": [3, 0, 0]
}]
});
You need to load the exporting.js script like this after the main Highcharts script
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Fiddle
I am trying to get image from Highchart export module, and it is giving image with
chart input data error, syntax error : Unexpected EOF.
Please see code in this js fiddle.
http://jsfiddle.net/GopinathGD/3xy8aeb7/
$(function () {
$("#b").click(testPOST);
var exportUrl = 'http://export.highcharts.com/';
function testPOST() {
var dataStr= {
"colors": [
"#C00000"
],
"chart": {
"type": "bar"
},
"title": {
"text": "Current Analysis Competitive Index",
"style": {
"fontWeight": "bold",
"color": "rgba(164, 0, 31, 0.96)"
}
},
"subtitle": {
"text": "Source: © 2017 Current Analysis, Inc."
},
"xAxis": {
"tickWidth": 1,
"minPadding": 0,
"maxPadding": 0,
"categories": [
"Overall",
"Vision/Strategy",
"Momentum & Stability",
"Innovation",
"Product Portfolio",
"Go-to-Market",
"Service & Support"
],
"title": {
"text": null
},
"labels": {
"style": {
"color": "#000000",
"fontWeight": "bold",
"fontSize": "12px"
}
}
},
"yAxis": {
"min": 0,
"max": 10,
"tickInterval": 1,
"tickmarkPlacement": "off",
"categories": [
"",
"Vulnerable",
"",
"Competitive",
"",
"Strong",
"",
"Very Strong",
"",
"Leader",
""
],
"title": {
"text": "",
"align": "high"
},
"labels": {
"style": {
"color": "#000000",
"fontWeight": "bold",
"fontSize": "12px"
}
}
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": false
},
"pointpadding": 0,
"groupPadding": 0
},
"series": {
"animation": false,
"pointWidth": 9,
"pointPadding": 0,
"groupPadding": 0.1
}
},
"legend": {
"margin": 30
},
"series": [
{
"name": "BlackBerry - Consumer Platforms and Devices",
"data": [
3,
3,
3,
3,
2,
6,
6
]
}
]
};
var optionsStr = JSON.stringify(dataStr),
dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400');
if (window.XDomainRequest) {
var xdr = new XDomainRequest();
xdr.open("post", exportUrl+ '?' + dataString);
xdr.onload = function () {
console.log(xdr.responseText);
$('#container').html('<img src="' + exporturl + xdr.responseText + '"/>');
};
xdr.send();
} else {
$.ajax({
type: 'POST',
data: dataString,
url: exportUrl,
success: function (data) {
console.log('get the file from relative url: ', data);
$('#container').html('<img src="' + exportUrl + data + '"/>');
},
error: function (err) {
debugger;
console.log('error', err.statusText)
}
});
}
}
});
<script src="http://code.highcharts.com/highcharts.js"></script>
Run Code
The reason is two ampersands used in the xAxis.categories.
"categories": [
"Momentum & Stability",
...
"Service & Support"
],
Change ampersands to %26
"categories": [
"Overall",
"Vision/Strategy",
"Momentum %26 Stability",
"Innovation",
"Product Portfolio",
"Go-to-Market",
"Service %26 Support"
],
create a callback which encodes ampersands (callback is called on the server):
function callback () {
const categories = this.xAxis[0].categories.map(decodeURIComponent)
this.xAxis[0].setCategories(categories)
}
Append the callback to dataString:
dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400&callback=' + callback.toString());
example: http://jsfiddle.net/erayy8jn/