Related
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.
I have a column chart that I am trying to get it to render multiple series with multiple categories. An because I am configuring the highchart via json I want to avoid having to set the categories in a separate location as the data. I found that if you set the xAxis.type to 'category' it will look in the series data for the categories. However, when I do this with multiple series and categories the categories get kinda messed up. How do I get this working so that all the categories are showing up appropriately? Pear is twice and Apple does not even appear.
$(function () {
$('#container').highcharts({
"title": {
"text": ""
},
"chart": {
"height": 400
},
xAxis: {
type: 'category'
},
"series": [
{
"name": "East",
"type": "column",
"data": [
{
name: 'Apple',
"y": 98.9
},
{
name: 'Apricot',
"y": 66.71
},
{
name: 'Cherry',
"y": 33.77
},
{
name: 'Pear',
"y": 362.24
},
{
name: 'Orange',
"y": 48.9
}
],
"_colorIndex": 0
},
{
"name": "West",
"type": "column",
"data": [
{
name: 'Peach',
"y": 348.83
},
{
name: 'Pear',
"y": 181.78
},
{
name: 'Lemon',
"y": 760.83
}
],
"_colorIndex": 1
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
See fiddler: http://jsfiddle.net/vb8zz9ma/3/
Highcharts lib doesn't match categories in different series and doesn't sort data. Example using x indexes for second series (first one may remain as is): http://jsfiddle.net/vb8zz9ma/4
Example:
"series": [
{
"name": "East",
"type": "column",
"data": [
{
name: 'Apple',
"y": 98.9
},
{
name: 'Apricot',
"y": 66.71
},
{
name: 'Cherry',
"y": 33.77
},
{
name: 'Pear',
"y": 362.24
},
{
name: 'Orange',
"y": 48.9
}
],
"_colorIndex": 0
},
{
"name": "West",
"type": "column",
"data": [
{
name: 'Peach',
"y": 348.83,
x: 5
},
{
name: 'Pear',
"y": 181.78,
x: 3
},
{
name: 'Lemon',
"y": 760.83,
x: 6
}
],
"_colorIndex": 1
}
]
The context menu is hidden behind the series when the bar chart series spans across the entire chart. How can I get the menu to not be hidden behind the series?
http://jsfiddle.net/kadams/uy05zby3/2/
$('#container').highcharts({
"chart": {
"type": "bar",
"zoomType": "x"
},
"title": {
"text": ""
},
"xAxis": {
"title": {
"text": ""
},
"categories": [
"A",
"B",
"C"
]
},
"plotOptions": {
"series": {
"stacking": "percent",
"pointPadding": 0.2,
"borderWidth": 0,
"animation": false
}
},
"series": [
{
"name": "Bacon",
"data": [
36.4,
18.9,
17.5
]
},
{
"name": "Pork Chops",
"data": [
105,
93.7,
108.8
]
},
{
"name": "Ham",
"data": [
32.7,
30.7,
34.2
]
}
]
});
I see two solutions for your case:
display button in front of the series: http://jsfiddle.net/uy05zby3/7/
events: {
load: function() {
if(!this.options.chart.forExport) {
this.exportSVGElements[0].toFront();
}
}
}
make space for the button: http://jsfiddle.net/uy05zby3/5/
"chart": {
"type": "bar",
"zoomType": "x",
"marginTop": 30 // make more space on top edge
},
This is happening because of the height value set in the div,
try the following
#container {
min-width: 300px;
max-width: 800px;
min-height: 350px;
margin: 1em auto;
}
fiddle link :)
It provides margin so that no overlay of menu happpens
hope this us helpful
I would like to use the heatmap to generate a status overview of a machine for a given day. The states show up as I want but I have a question about the legend. Can I show a 'traditional' legend that shows the states and their colors.
Highchart fiddle: http://jsfiddle.net/p7v2f117/7/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
title: {
text: 'HIGHCHART - Machine State on 1/7/2015'
},
xAxis: { // minute interval
categories: ['00', '15', '30', '45']
},
yAxis: { // hour
categories: ['20:00', '21:00'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.yAxis.categories[this.point.y] + ' (' + this.series.xAxis.categories[this.point.x] + 'min)</b>' + '<br>state: <b>' + this.point.value + '</b><br>More details go here'
}
},
series: [{
name: 'Machine State',
borderColor: '#000000',
borderWidth: 1,
data: [{
x: 0,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 1,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 2,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 3,
y: 0,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 0,
y: 1,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 1,
y: 1,
value: 'DOWN',
color: '#FF0000'
}, {
x: 2,
y: 1,
value: 'PM',
color: '#C0C0C0'
}, {
x: 3,
y: 1,
value: 'Marathon',
color: '#FFCCFF'
}, ],
dataLabels: {
enabled: false
}
}]
});
});
I am trying to basically get the same behavior that I can get in Fusion charts, where the color is automatically driven by the status field (text) and it shows the categories. The fact that they are clickable is nice but not necessary.
Fusionchart fiddle: http://jsfiddle.net/c8V2F/25/
FusionCharts.ready(function () {
var chart = new FusionCharts({
type: 'heatmap',
renderAt: 'chartdiv1',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "FUSIONCHART - Machine State on 1/7/2015",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;'>$tlLabel</div>{br}State: <b>$value</b>{br}details can go here",
"mapbycategory": "1",
//Cosmetics
"showXaxisLabels": "1",
"showYaxisLabels": "1",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"dataset": [{
"data": [{
"rowid": "20:00",
"columnid": "00",
"categoryid": "RUN",
"displayvalue": ""
}, {
"rowid": "20:00",
"columnid": "15",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "30",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "45",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "00",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "15",
"categoryid": "DOWN"
}, {
"rowid": "21:00",
"columnid": "30",
"categoryid": "PM"
}, {
"rowid": "21:00",
"columnid": "45",
"categoryid": "Marathon"
}, ]
}],
"colorrange": {
"gradient": "0",
"color": [{
"label": "RUN",
"code": "00FF00"
}, {
"label": "ASSIST",
"code": "FFFF00"
}, {
"label": "DOWN",
"code": "FF0000"
}, {
"label": "IDLE",
"code": "00FFFF"
}, {
"label": "PM",
"code": "C0C0C0"
}, {
"label": "ENG",
"code": "00B0F0"
}, {
"label": "Marathon",
"code": "FFCCFF"
}
]
}
}
});
chart.render();
});
Is there a simple way to not show the legend at all?
I can certainly convert the states back to a number if that makes more sense.
--Nico
You need to cover default parameter for highmaps:
var H = Highcharts;
H.seriesTypes.heatmap.prototype.axisTypes = ['xAxis', 'yAxis'],
H.seriesTypes.heatmap.prototype.optionalAxis = null;
Example: http://jsfiddle.net/ww6Lbnc5/