I want to display a map of a region of France with GeoChart.
https://developers.google.com/chart/interactive/docs/gallery/geochart#regions-mode-format
The ISO 3166 code mentionned in the previous link is, for example, FR-U for the Provence-Alpes-Côte d'Azur region.
https://en.wikipedia.org/wiki/Provence-Alpes-C%C3%B4te_d'Azur
Here's my options:
var options = {
region: 'FR-U',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
However this does not works. I'm getting the following error message: Requested map does not exist.. This is not due to my code since if I put FR instead of FR-U it works fine.
Is the map simply not existing?
the link you reference is the Data Format for a Regions chart
and is separate from the Configuration Options
the option for region accepts the following...
'world' - A geochart of the entire world.
A continent or a sub-continent, specified by its 3-digit code, e.g., '011' for Western Africa.
A country, specified by its ISO 3166-1 alpha-2 code, e.g., 'AU' for Australia.
A state in the United States, specified by its ISO 3166-2:US code, e.g., 'US-AL' for Alabama. Note that the resolution option must be set to either 'provinces' or 'metros'.
see following example for France...
note the resolution
google.charts.load('current', {
callback: function () {
new google.visualization.GeoChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Destination', 'Popularity'],
['FR-A', 100],
['FR-B', 105],
['FR-C', 110],
['FR-P', 115],
['FR-D', 120],
['FR-E', 125],
['FR-F', 130],
['FR-G', 140],
['FR-H', 150],
['FR-I', 160],
['FR-Q', 175],
['FR-J', 190],
['FR-K', 215],
['FR-L', 235],
['FR-M', 255],
['FR-N', 280],
['FR-O', 305],
['FR-R', 335],
['FR-S', 365],
['FR-T', 400],
['FR-U', 440],
['FR-V', 480],
]),
{
colorAxis: {colors: ['green', 'blue']},
displayMode: 'regions',
region: 'FR',
resolution: 'provinces'
}
);
},
packages:['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I want to visualize Zip3 polygons, shaded by the population. I have GeoJSON formatted as text strings in a Snowflake table, and am able to visualize them using the "Deck.GL GEOJSON" map type, but not "Deck.GL Polygon", which is what I need.
I have tested the GeoJSON with geojson.io and they are valid.
This is a "Deck.GL Polygon" type and does not work (showing up blank, but with the Legend correctly displaying):
This is a "Deck.GL GEOJSON" type and which DOES work (but does not allow me to color it by population):
Any ideas how to shade these polygons in Superset?
Why do you need PolygonLayer instead of GeoJsonLayer? At the end GeoJsonLayer renders a SolidPolygonLayer
So, GeoJsonLayer = SolidPolygonLayer
One of the differences between rendering a GeoJsonLayer or SolidPolygonLayer is that, if your data is already a geojson format, you don't need to specify an accessor to tell deck.gl where your data coordinates are located (because internally interprets where those are => feature => geometry => coordinates)
I would go using a GeoJsonLayer, and then, for styling polygons, you will need to use getFillColor accessor like:
new GeoJsonLayer({
...,
getFillColor: ({ properties }) => {
if (properties.population > 1_000_000) {
return [255, 0, 0]
}
return [0, 255, 0]
}
})
How do I bind a Telerik ASP.Net MVC Chart (not the Kendo for jQuery version ) to JSON? For example, I would like to bind the following chart (Note: the series are stubbed out with dummy data for now, but hopefully you get the idea) to a JavaScript function that returns JSON. I am having trouble finding an example of how to do this with the Telerik ASP.Net MVC Chart. I do find examples with the Kendo UI for jQuery chart - but I am not using that.
#(Html.Kendo().Chart()
.Name("GallonsPerMonth")
.Title("Total Gallons Per Month")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
.Visible(true)
)
.Theme("Bootstrap")
.ChartArea(chartArea => chartArea
.Background("transparent")
.Height(600)
)
.Series(series =>
{
series.Column(new double[] { 825, 775, 875, 900, 925, 1111, 1200, 1175, 1100, 1000, 875, 800 }).Name("Estimated");
series.Line(new double[] { 700, 795, 900, 850, 950, 905, 1175, 1100, 1000, 1050, 700, 650 }).Name("Actual").Color("red");
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Line(line => line.Visible(false))
)
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec")
)
.ValueAxis(axis => axis//.Logarithmic()
.Numeric()
.Labels(labels => labels.Format("{0}"))
// Move the label-axis all the way down the value axis
.AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
.Template("#= series.name #: #= value #")
)
)
dsd
You could create the chart using the MVC helper extension without the series data, so add that using JavaScript when the document is ready.
<script>
$(document).ready(function () {
$.getJSON('your-url', function (data) {
var chart = $("#GallonsPerMonth").data("kendoChart");
var series = chart.options.series;
// first series
series[0].data = data;
chart.redraw();
});
}
</script>
Note I am adding the data to the Fist Series.
I want to draw a routing line from Land of Canaan to Waipu but After I compile the line become like this,
What I expect is like this,
My code:
routing.forEach((obj, index) => {
const line_point = [];
obj.waypoints.forEach((pos, i) => {
const lng = Number(pos.lon);
const lat = Number(pos.lat);
line_point.push(ol.proj.fromLonLat([lng, lat]));
});
const routeLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(line_point, 'XY'),
name: 'Line'
})]
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#bc0000',
width: 2
})
})
});
routeLayer.setZIndex(55);
this.mapLayer.push(routeLayer);
this.map.addLayer(routeLayer);
});
May I know what happened to this and how to solve it?
One of your LineString ist crossing the antimeridian (180° W/E). A solution is to split the LineString at the antimeridian.
Your algorithm is have issues. You have to consider split the line in as many chunks as be needed. As you did not provided the code, I am able only to include cases in conceptual way.
Your array variable could be an array of arrays with all line chunks needed to draw.
line_point
Includes a draw with border cases:
Line a-b is similar to your case with two chunks.
Line c-d is other case with two chunks.
Line e-f is an complex case where there is three chunks.
The dotten light green line represent the union between the chunks
OpenLayers 2 could generate geometric filter method WFS GetFeature.
Example JS:
var filter = new OpenLayers.Filter.Spatial({ type: OpenLayers.Filter.Spatial.INTERSECTS, value: geometry, projection: "EPSG:3067" });
var parser = new OpenLayers.Format.Filter.v1_1_0();
var filterAsXml = parser.write(filter);
var xml = new OpenLayers.Format.XML();
var filterAsString = xml.write( filterAsXml );
Example XML:
<wfs:GetFeature
xmlns:wfs="http://www.opengis.net/wfs"
service="WFS"
version="1.1.0"
outputFormat="json"
xsi:schemaLocation="http://www.opengis.net/wfs
http://schemas.opengis.net/wfs/1.1.0/wfs.xsd"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<wfs:Query typeName="LiVi:LIIKENNE_ELEMENTTI" srsName="EPSG:3067" xmlns:LiVi="http://site.ru/">
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
<ogc:Intersects>
<ogc:PropertyName>GEOMETRY</ogc:PropertyName>
<gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:3067">
<gml:exterior>
<gml:LinearRing>
<gml:posList>308082.07106781186 6833724.928932188 308082.07106781186 6833739.071067812 308067.92893218814 6833739.071067812 308067.92893218814 6833724.928932188 308082.07106781186 6833724.928932188</gml:posList>
</gml:LinearRing>
</gml:exterior>
</gml:Polygon>
</ogc:Intersects>
</ogc:Filter>
</wfs:Query>
</wfs:GetFeature>
They have a not working example:
var f = ol.format.wfs.filter;
var request = new ol.format.WFS().writeGetFeature({
srsName: 'urn:ogc:def:crs:EPSG::4326',
featureNS: 'http://www.openplans.org/topp',
featurePrefix: 'topp',
featureTypes: ['states'],
filter: f.and(
f.bbox('the_geom', [1, 2, 3, 4], 'urn:ogc:def:crs:EPSG::4326'),
f.like('name', 'New*')
)
});
Either he recently appeared... Judging by the projection - a blank for WFS 2.0.0.
How do I write a geometric filter in the OL3?
PS2
Sorry for my English.
There is a typo in the OpenLayers documentation, which will be fixed with https://github.com/openlayers/ol3/pull/5653.
To make the example work, change ol.format.wfs.filter to ol.format.ogc.filter:
var f = ol.format.ogc.filter;
var request = new ol.format.WFS().writeGetFeature({
srsName: 'urn:ogc:def:crs:EPSG::4326',
featureNS: 'http://www.openplans.org/topp',
featurePrefix: 'topp',
featureTypes: ['states'],
filter: f.and(
f.bbox('the_geom', [1, 2, 3, 4], 'urn:ogc:def:crs:EPSG::4326'),
f.like('name', 'New*')
)
});
However, the only geometry-like filter OpenLayers supports is BBOX. Other geometry filters, like the one in your WFS XML above, are not supported by OpenLayers 3. If you need full OGC filter support, you may want to have a look at https://github.com/highsource/ogc-schemas, which provides (among others) OGC filter bindings for Jsonix.
Piechart sliceLabel is not shown for smaller slices.
My piechart image looks like :
https://drive.google.com/file/d/0B1dlb5k9SpLPYXJRRmRXSkpTUXM/view?usp=sharing
ActualRequired Piechart should like: https://drive.google.com/file/d/0B1dlb5k9SpLPOFBzNUw2Tkdsblk/view?usp=sharing
Code Snippet :
var dataTest = google.visualization.arrayToDataTable([ ['Country','Population'], ['India', 10], ['Australia', 1], ['Sri Lanka', 5.3], ['New Zeland', 9], ['Others', cell[0][5]],
]);
google.visualization.PieChart(document.getElementById('popStat')).draw(dataTest,{sliceVisibilityThreshold:0,chartArea:{left:'15%',top:'15%',width:'100%',height:'100%'}, title: 'Population Stats',});
It is because the slice relative part, below which a slice will not show individually. All slices that have not passed this threshold will be combined to a single slice, whose size is the sum of all their sizes. Default is not to show individually any slice which is smaller than 1/2 degree. You can modify the sliceVisibilityThreshold to change this effect. You can just set the sliceVisibilityThreshold option to 0. This will force all the legends to show.
See the reference: https://developers.google.com/chart/interactive/docs/gallery/piechart