Related
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.
I want to use Select2 in Tabulator but triggering the selected value does not work.
Here is my code of the formatter for the table column:
{
title: "Select2", field: "lucky_no", align: "center", width: 300, editor: true,
formatter: function (cell, formatterParams, onRendered) {
onRendered(function () {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function (e) {
console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
I have added a working example.
Triggering the selected value works in drop-down above the table.
Although in the table the change event is triggered it does not show the selected value in the dropdown.
Thanks,
Aad
If you are trying to make the field editable, you should be creating a custom editor not a formatter
Formatters are for displaying data to users, editors are for allowing the user to edit the data.
Built In Select Editor
Before I go to far into this example, did you know that Tabulator already comes with a Select Editor built-in to make your life even easier, in the demo in the documentation, have a look at the gender column to see it in action.
Custom Editor
When using custom editors, they come with select and cancel call backs to allow you to pass the data back into the table.
So for your example it should look something like this (this code is untested)
//create custom editor
var select2Editor = function(cell, onRendered, success, cancel, editorParams){
//create input element to hold select
var editor = document.createElement("input");
onRendered(function(){
var select_2 = $(editor);
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
});
select_2.on('change', function (e) {
success(select_2.val());
});
select_2.on('blur', function (e) {
cancel();
});
});
//add editor to cell
return editor;
}
//in your column definition for the column
{title: "Select2", field: "lucky_no", align: "center", width: 300, editor: select2Editor},
My first question .. this was not included!
var tabledata = [{
id: 1,
name: "Oli Bob",
progress: 12,
location: "United Kingdom",
gender: "male",
rating: 1,
col: "red",
dob: "14/04/1984",
car: 1,
lucky_no: 3
},
{
id: 2,
name: "Mary May",
progress: 1,
location: "Germany",
gender: "female",
rating: 2,
col: "blue",
dob: "14/05/1982",
car: true,
lucky_no: 2
},
{
id: 3,
name: "Christine Lobowski",
progress: 42,
location: "France",
gender: "female",
rating: 0,
col: "green",
dob: "22/05/1982",
car: "true",
lucky_no: 5
},
{
id: 4,
name: "Brendon Philips",
progress: 100,
location: "USA",
gender: "male",
rating: 1,
col: "orange",
dob: "01/08/1980",
lucky_no: 7
},
{
id: 5,
name: "Margret Marmajuke",
progress: 16,
location: "Canada",
gender: "female",
rating: 5,
col: "yellow",
dob: "31/01/1999",
lucky_no: 4
},
];
var list = [{
"id": 1,
"text": "Organisatorische tekortkomingen"
}, {
"id": 2,
"text": "Mechanische gevaren"
}, {
"id": 3,
"text": "Hijs-/hefgevaren"
}, {
"id": 4,
"text": "Ergonomische tekortkomingen"
}, {
"id": 5,
"text": "Mobiliteit en gevaarlijke situaties"
}, {
"id": 6,
"text": "Elektrische gevaren"
}, {
"id": 7,
"text": "Blootstelling aan gevaarlijke stoffen"
}, {
"id": 8,
"text": "Gevaarlijke situaties - Algemeen"
}, {
"id": 9,
"text": "Blootstelling aan straling"
}, {
"id": 10,
"text": "Druk"
}, {
"id": 11,
"text": "Blootstelling aan trillingen"
}, {
"id": 12,
"text": "Blootstelling aan geluid"
}, {
"id": 13,
"text": "Fysieke gevaren (overig)"
}, {
"id": 14,
"text": "Gevaar voor/door derden (hijsen/heffen)"
}, {
"id": 15,
"text": "Hijsen/heffen en ergonomische tekortkomingen"
}, {
"id": 16,
"text": "Mobiliteit en werkplek/bestuurdersplaats"
}, {
"id": 17,
"text": "Mobiliteit en ergonomische tekortkomingen"
}, {
"id": 18,
"text": "Mobiliteit en energiebron en -overbrenging"
}, {
"id": 19,
"text": "Mobiliteit en stabiliteit"
}, {
"id": 20,
"text": "Gevaarlijke situaties door onverwachte opstart/beweging"
}, {
"id": 21,
"text": "Gevaren beheerst!",
"scope": "Algemeen"
}, {
"id": 22,
"text": "NIET beoordeeld!"
}];
$('#selectList').select2({
data: list,
minimumResultsForSearch: Infinity,
width: 'resolve',
minimumInputLength: 0,
allowClear: true,
placeholder: "Select",
});
$('#selectList').val(7).trigger('change');
//Build Tabulator
var table = new Tabulator("#example-table", {
height: "500px",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Location",
field: "location",
width: 130
},
{
title: "Progress",
field: "progress",
sorter: "number",
align: "left",
formatter: "progress",
width: 140
},
{
title: "Gender",
field: "gender",
editor: "select",
editorParams: {
"male": "Male",
"female": "Female"
}
},
{
title: "Rating",
field: "rating",
formatter: "star",
align: "center",
width: 100
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date"
},
{
title: "Driver",
field: "car",
align: "center",
formatter: "tickCross"
},
{
title: "Select2",
field: "lucky_no",
align: "center",
width: 300,
//editor: true,
formatter: function(cell, formatterParams, onRendered) {
onRendered(function() {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function(e) {
//console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
],
});
//load sample data into the table
table.setData(tabledata);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/tabulator-tables#4.1.3/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.1.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<html>
<body>
<div>
<select class="form-control" name="selectList" id="selectList">
</select>
</div>
<br />
<div id="example-table" class="table-striped table-bordered"></div>
</body>
</html>
I need to load a GeoJson Feature Collection layer (points) in a MapBox GL JS Map.
I've tried to use this HTML / Javascript code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<PUT YOUR MAPBOX KEY HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [7.828,44.836],
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
theCoords = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NAME": "<b>Entrata Castello del Valentino<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Entrata_Castello_del_Valentino.JPG\" target=\"_blank\">Immagine 360 ø<\/a>", "Longitudine": 7.6855111, "Latitudine": 45.0546417, "Altitudine": 288.39, "Direzione": 202.5, "Data": "2017:06:06", "Ora": "17:57" }, "geometry": { "type": "Point", "coordinates": [ 7.6855111, 45.0546417 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4303883, "Latitudine": 44.8816653, "Altitudine": 0.0, "Direzione": 292.5, "Data": "2017:06:16", "Ora": "19:27" }, "geometry": { "type": "Point", "coordinates": [ 7.4303883, 44.8816653 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Regione Maineri<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1A.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Regione_Maineri.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4328394, "Latitudine": 44.8790463, "Altitudine": 336.29, "Direzione": 180.0, "Data": "2017:06:16", "Ora": "20:23" }, "geometry": { "type": "Point", "coordinates": [ 7.4328394, 44.8790463 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4236184, "Latitudine": 44.8790577, "Altitudine": 0.0, "Direzione": 270.0, "Data": "2017:06:16", "Ora": "19:30" }, "geometry": { "type": "Point", "coordinates": [ 7.4236184, 44.8790577 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Rivasecca<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10C.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Rivasecca.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4266083, "Latitudine": 44.88725, "Altitudine": 348.79, "Direzione": 0.0, "Data": "2017:06:16", "Ora": "20:16" }, "geometry": { "type": "Point", "coordinates": [ 7.4266083, 44.88725 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Viale Mattioli<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Viale_Mattioli.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.687725, "Latitudine": 45.0566306, "Altitudine": 282.6, "Direzione": 292.5, "Data": "2017:06:06", "Ora": "17:44" }, "geometry": { "type": "Point", "coordinates": [ 7.687725, 45.0566306 ] } }
]
};
map.on('load', function () {
map.addSource("route", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"properties": {},
"geometry": theCoords
}
});
map.addLayer({
"id": "route",
"type": "symbol",
"source": "route",
"paint": {
"circle-radius": 10,
"circle-color": "#ff0000"
}
});
});
</script>
</body>
</html>
No errors come out in my browser console but I can't see my layer on the map.
I've checked my GeoJSON using http://geojsonlint.com/ and all seems right (and using this tool my GeoJson is drawn on the tool map ....).
I think that could be something about the GeoJSON structure but I don't know hao to resolve
I've solved!
Here you're the right code ...
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<PUT YOUR MAPBOX KEY HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [7.828,44.836],
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function () {
map.addSource("route", {
"type": "geojson",
"data": "./data/test.geoJSON"
});
map.addLayer({
"id": "route",
"type": "circle",
"source": "route",
"paint": {
"circle-radius": 5,
"circle-color": "#ff0000"
}
});
});
</script>
</body>
</html>
I've put my geoJSON in a file and then I used "data": "./data/test.geoJSON" to upload it .....
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/
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>