I need to hide US on geo chart, when region is set to Canada:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();
data.addRows([[{v:'CA-BC',f:'CA-BC'},0,'Test']]);
var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
colorAxis: {minValue: 0, maxValue: 0, colors: ['#0000ff',]},
legend: 'none',
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
datalessRegionColor: '#f5f5f5',
displayMode: 'markers',
enableRegionInteractivity: 'true',
resolution: 'provinces',
region:'CA',
keepAspectRatio: true,
width:700,
height:500,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
chart.draw(data, options);
}
http://jsfiddle.net/jk171505/VJtBR/
With the API options, you can't really do it.
You can use advanced CSS selectors to hide the SVG shapes.
Add this CSS and it will hide the US shapes:
#visualization path:nth-child(237), #visualization path:nth-child(236) {
display:none;
}
http://jsfiddle.net/cmoreira/mMadX
I have built a page with some information on how to use this and other CSS techniques with the Google Geochart API. In case it helps, here's the link: http://cmoreira.net/interactive-world-maps-demo/advanced-customization/
Related
Is there a way to get smooth gradient from the lighting?
I'm creating a survival game using PhaserJs 3. I'm using the LightsManager and a tileset I modified from one of the example tilesets included in the examples.
Currently the tile grid is visible because of how the lighting is working with the tiles.
If possible, I would like to have the lighting be smooth similar to the picture below:
My grass tile is 32x32:
and the normal map is the following image
which was generated using this normal map generator site.
var config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
pixelArt: true,
backgroundColor: '#000000',
scene: {
preload: preload,
create: create,
update: update,
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0, x:0 },
debug: false
}
},
};
var light;
var layer;
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('tiles', ['assets/tilemap.png','assets/tilemap_n.png']);
...
}
function create ()
{
var level = [ // The grass tile is #29 in the tileset
[29,29,29,29,29,29],
[29,29,29,29,29,29],
[29,29,29,29,29,29],
[29,29,29,29,29,29],
[29,29,29,29,29,29],
[29,29,29,29,29,29]]
var map = this.make.tilemap({ data: level, tileWidth: 32, tileHeight: 32 });
var tiles = map.addTilesetImage('tiles');
layer = map.createStaticLayer(0, tiles, 0, 0).setScale(2)
layer.setPipeline('Light2D');
light = this.lights.addLight(390,223.3, 150).setIntensity(.8);
}
I'm not sure if this is the best (or most performant) way, but you could use this plugin to create a post pipeline blur.
here a working demo of this plugin: https://codepen.io/rexrainbow/pen/zYzzYVw
Basically you would have to load the plugin, in preload:
function preload (){
...
this.load.plugin('rexkawaseblurpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexkawaseblurpipelineplugin.min.js', true);
}
And apply the plugin in to the specific camera, or gameobject:
function create (){
var postFxPlugin = this.plugins.get('rexkawaseblurpipelineplugin');
var postFxPipeline = postFxPlugin.add(this.cameras.main, {
blur: 1,
quality: 3
});
...
}
Or you could fake, the gradient with multiple lights and may be add a specific ambientColor:
light1 = this.lights.addLight(390,300, 150, 0xffffff, .80);
light2 = this.lights.addLight(390,300, 250, 0xffffff, .75);
light3 = this.lights.addLight(390,300, 350, 0xffffff, .70);
this.lights.enable().setAmbientColor(0x555555);
I am using the GeoChart of angular-google-charts. This is my code:
type="GeoChart";
columnNames = [
[{type: 'string', role: 'data'}]
]
data = [
['India'],
['Australia'],
['Germany'],
['United States'],
['Brazil'],
['Canada'],
['France'],
['Russia']
];
options = {
backgroundColor: '#17263c',
datalessRegionColor: '#242f3e',
legend: 'none',
tooltip: {
isHtml: true,
textStyle: {
color: 'black'
}
},
colors: ['#46127A', '#1102BB', '#1633C4', '#3185CE']
};
dynamicResize = true;
<google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columnNames]="columnNames"
[options]="options"
[dynamicResize]="dynamicResize"
style="width: 100%; height: 100%;">
</google-chart>
As you can see there is the array data (which will be saved in a database lateron)
What I now want to do is to change the color of a country on click. There are two things I don't know:
How do I know where I click on the map? If I click on Germany for example how does my program know that it should run pushCountry("Germany") for example and if I click on France pushCountry("France")
How do I really push the countrys so that they are displaxed immediately? For testing I created a button calling the function this.data.push(['Germany']) and logged the array, Germany was added but the color in my chart did not change.
Thank you for your help!
I'm trying to correctly save an OpenLayer 3 Map layer created by a user in order to display it another map using geoJSON, but I'm having troubles with this.
On the client side I save the dinamic layer in this function:
function addInteractions() {
draw = new ol.interaction.Draw({
source: source,
type: typeSelect.value
});
draw.on("drawend", function(e) {
var f = e.feature;
features.push(f);
geoJson = format.writeFeatures(features);
console.log(geoJson);
document.getElementById('js-textarea').value = geoJson;
});
map.addInteraction(draw);
snap = new ol.interaction.Snap({source: source});
map.addInteraction(snap);
}
Then the geoJSON object is saved into a .json file, but when I try to display it, it doesn't appear on the map.
Here his my display function:
var geoDataUrl = '/data/' + '{{percorso._id}}' + '.json';
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: geoDataUrl,
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster, vectorLayer],
target: 'map',
view: new ol.View({
center: {{#if percorso.mapCenter}}[{{percorso.mapCenter}}] {{else}} ol.proj.transform([9.688053, 45.362760], 'EPSG:4326', 'EPSG:3857'){{/if}},
zoom: {{#if percorso.zoomLevel}}{{percorso.zoomLevel}} {{else}} 13{{/if}}
})
});
I also tested the display function with other layers (for example the provided one on the OpenLayer examples website ) and it works fine
On the server side I save the geoJSONobject with this function, where oggetto_mappa is the dinamic geoJSON object:
var jsonMappa = JSON.stringify(eval("(" + oggetto_mappa + ")"));
require("fs").writeFile("./public/data/" + id_perc + ".json", jsonMappa, 'utf8', function(f_err) {
if(f_err)
console.log(f_err);
});
For refernce this is what my function saves onto the .json file:
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"id" : "aa",
"geometry":
{
"type":"LineString",
"coordinates":[
[1073328.751180445,5680150.227413875],
[1077857.6451063417,5682481.556776573],
[1070385.9255914658,5679156.546046168],
[1076825.7452244917,5680226.66444216],
[1073328.751180445,5680169.336670946]
]
},
"properties":null
},
{
"type":"Feature",
"id" : "ab",
"geometry":
{
"type":"LineString",
"coordinates":[
[1073328.751180445,5680169.336670946],
[1071628.0273010998,5677130.96479661]
]
},
"properties":null}
]
}
To get things working, replace
geoJson = format.writeFeatures(features)
with
geoJson = format.writeFeatures(features, {featureProjection: 'EPSG:3857'})
You may wonder why?
When you draw in OpenLayers, you are drawing in the projection of the map (the default is EPSG:3857) whereas when you consume a GeoJSON the expected projection is EPSG:4326.
See the API documentation from ol.format.GeoJSON writeFeatures to understand better
Some additional informations:
when you consume the GeoJSON from your drawing as the coordinates are not in decimal degrees (EPSG:4326) but in meters (EPSG:3857)
the order of magnitude for coordinates is different (millions for EPSG:3857 and less than some hundred for EPSG:4326) without accounting for the positive/negative coordinates
I'm using a color picker to choose the color of an object to draw it with Leaflet.Draw but cannot find where.
$("#txtAPColor").on('change', function(){
colorSelectPoi=$("#txtAPColor").value;
});
var circle_options = {
stroke: true,
color: colorSelectPoi,
weight: 4,
opacity: 0.5,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.2,
clickable: true
};
new L.Draw.Circle(map, circle_options).enable();
I have solved the problem with the following code:
var optionColorSelected = '#000'
map.on(L.Draw.Event.CREATED, function (event) {
event.layer.options.color = optionColorSelected;
var layer = event.layer;
drawnItems.addLayer(layer);
});
You just have to update the variable optionColorSelected with the color you choose.
I hope I can help you.
I have a grid with data, contained in a panel which also hold a title and a smaller summary grid.
the panel has layout fit and therefore the title and first grid, which is the summary grid, are displayed just fine. But the grid in question has more records than can be shown on the screen and its component height is not adjusted to the size of the panel which always fits with the height of the browser window.
What I would like to have is that the grid component's height, like the panel, is adjusted to its parent so that the scrollbar inside the grid body will show up.
My code is similar to this (initComponent is of an extension to Ext.panel.Panel):
(header in this code means the summary grid)
initComponent: function (config) {
var config = {
border: false,
hidden: false,
hideMode: "display",
padding: '5',
layout: "fit"
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
title = Ext.create("Ext.panel.Panel", {
html: '<h2>title</h2>',
padding: '5',
border: false
});
// the stores for the grids are created here
var storeHdr = DataStoreFactory.CreateStore("GetHeaderP", DataStoreFactory.fieldsCollection.Default);
var storeBdy = DataStoreFactory.CreateStore("GetBodyP", DataStoreFactory.fieldsCollection.Default);
var grdHeader = Ext.create("Ext.grid.Panel", {
store: storeHdr,
columns: getHeaderColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
enableHdMenu: false,
enableColumnMove: false,
enableColumnResize: false,
disableSelection: true,
trackMouseOver: false,
sortable: false
});
var grdBody = Ext.create("Ext.grid.Panel", {
id: id,
store: storeBdy,
columns: getBodyColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
autoScroll: true,
scroll: "vertical",
enableColumnMove: false,
enableColumnResize: false,
enableHdMenu: false,
trackMouseOver: false,
disableSelection: true
});
},
var headerGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdHeader]
});
var bodyGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdBody]
});
this.add(title);
this.add(headerGridContainer);
this.add(bodyGridContainer);
storeHdr.load();
storeBdy.load();
this.doLayout();
}
I hope someone can help me with this. Thanks in advance
edit - screenshots how it is and how it should be. Realtime Data is removed or blotted out, since it is private and doesn't matter for the problem.
this is how it is
this is how it should be
You're using layouts in a wrong way. First, your main container has layout 'fit' which supposed to be used when you have single item inside - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit - and you have few items.
Second, try to avoid over-nesting. You're wrapping your grids into panels and then put these panels inside container. Is there a reason for that?
Please post a screenshot of what you have and what you want to have and we will help you figure out layouts that you need to use for this.
Update:
Try to use layout: 'hbox' in your main container. And specify flex: 1 for the main (bottom) grid if you want it to fill the rest of the screen. Son basically you would have something simliar to this (in you main container):
{
layout: 'hbox',
..
items: [{
xtype: 'panel', // header
height: 100,
},
{
xtype: 'grid', // first grid
height: 200
},
{
xtype: 'grid', // second grid
flex: 1
}]
}