We Keep Coding

modifying a json file of world country polygons to customise colours - javascript

I am using a JavaScript package which displays global flows between lat/long coordinates from a CSV file.
The JS package calls a JSON file which provides country polygon shape data. I would like some of the countries to appear in different colours. Being unfamiliar with JSON, I am struggling to modify the code to achieve this customization. I have looked through various tutorials but still getting errors or no effect at all.
Here is example JSON code for Afghanistan:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Afghanistan"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[61.210817, 35.650072],
[62.230651, 35.270664],
[62.984662, 35.404041],
[63.193538, 35.857166],
[63.982896, 36.007957],
[64.546479, 36.312073],
[64.746105, 37.111818],
[65.588948, 37.305217],
[65.745631, 37.661164],
[66.217385, 37.39379],
[66.518607, 37.362784],
[67.075782, 37.356144],
[67.83, 37.144994],
[68.135562, 37.023115],
[68.859446, 37.344336],
[69.196273, 37.151144],
[69.518785, 37.608997],
[70.116578, 37.588223],
[70.270574, 37.735165],
[70.376304, 38.138396],
[70.806821, 38.486282],
[71.348131, 38.258905],
[71.239404, 37.953265],
[71.541918, 37.905774],
[71.448693, 37.065645],
[71.844638, 36.738171],
[72.193041, 36.948288],
[72.63689, 37.047558],
[73.260056, 37.495257],
[73.948696, 37.421566],
[74.980002, 37.41999],
[75.158028, 37.133031],
[74.575893, 37.020841],
[74.067552, 36.836176],
[72.920025, 36.720007],
[71.846292, 36.509942],
[71.262348, 36.074388],
[71.498768, 35.650563],
[71.613076, 35.153203],
[71.115019, 34.733126],
[71.156773, 34.348911],
[70.881803, 33.988856],
[69.930543, 34.02012],
[70.323594, 33.358533],
[69.687147, 33.105499],
[69.262522, 32.501944],
[69.317764, 31.901412],
[68.926677, 31.620189],
[68.556932, 31.71331],
[67.792689, 31.58293],
[67.683394, 31.303154],
[66.938891, 31.304911],
[66.381458, 30.738899],
[66.346473, 29.887943],
[65.046862, 29.472181],
[64.350419, 29.560031],
[64.148002, 29.340819],
[63.550261, 29.468331],
[62.549857, 29.318572],
[60.874248, 29.829239],
[61.781222, 30.73585],
[61.699314, 31.379506],
[60.941945, 31.548075],
[60.863655, 32.18292],
[60.536078, 32.981269],
[60.9637, 33.528832],
[60.52843, 33.676446],
[60.803193, 34.404102],
[61.210817, 35.650072]
]
]
},
"id": "AFG",
"color": "#000"
}]
}

I assume you are playing with D3.
Make sure you have loaded topojson then use
d3.json ( url , function (error, world) {
var countries = topojson.feature(world, world.objects.countries).features;
countries.forEach ( function (country,index) {
if ( country.properties.name =="Afghanistan" ) country.properties.color ='#color';
});
});
if you don't use D3 - ignore my reply ;)

Related

I have a few data JSON files similar to this and I want to include a line to note the sources as simple as //source: Cambodia Department of Injustice but JSON files should contain only data.
Should should it be done?

If you can change the data structure slightly, you could add a level for metadata:
{
"metadata": {
"source": "Cambodia Department of Justice",
"source-date": "2015-12-15",
"note": "Ha ha made you look"
},
"countries": {
"USA": { some data }
"Canada": { Some data }
}
}
This is cleaner than use a fake "non-data" country.

I currently have an html page divided into 2 columns - the right side is a Leaflet map with markers and the left hand side describes a bit more about the markers. I load the Leaflet map using geoJson data on the right side and the map and markers display fine. Now I want to take the same geoJson data and use it to fill in the left side of the php page. This way, only one file needs to be updated as we add sites.
Here is a sample of my geoJson data:
var historicalMarkers = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.423603, 38.865608 ]
},
"properties": {
"id": 1,
"siteName": "House14"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ -77.416770, 38.923650]
},
"properties": {
"id": 2,
"siteName": "Meeting House"
}
}..........
On the main php page, I simply include my geoJson file (places.js) and my geoJson/Leaflet code (map-geoJson.js).
On this main php page, I would like descriptions of each of the markers. In map-geoJson.js I am passing the data back to php via ajax like this:
// get stuff ready for php
var historicalData = [];
for (var i = 0; i < historicalMarkers.features.length; i++) {
var currentFeature = historicalMarkers.features[i];
var id = currentFeature.properties.id;
var siteName = currentFeature.properties.siteName;
console.log(id, siteName);
historicalData.push({ id: id, siteName : siteName });
}
var historicalJson = JSON.stringify(historicalData);
$.ajax({
url: location.pathname, //current page
type: 'POST',
data: historicalJson
});
The data is displayed on the console and is correct. On my php page, I want to grab the data and put it into several different divs on the page:
$phpArray = json_decode($_POST['historicalJson']);
var_dump ($phpArray); // NULL is displayed
foreach ( $phpArray as $value )
{ ?>
<div class="id">
<h4><?php echo $value['id']; ?></h4>
</div>
<div class="siteName">
<h4><?php echo $value['siteName']; ?></h4>
</div>
......
<?php } ?>
But nothing is displayed. I've also tried echo'ing
echo $value[0]->id;
echo $value['id']
Somehow I am not grabbing the data correctly in the php page and echo'ing it into the div.
Can anyone lend a suggestion? I'm sure it is something small I am missing, but I've tried many, many ways to grab the data in php.
Thanks

json_decode() returns an object (stdClass) per default. If you want to use the data as an array, you need to set the second parameter of the function to true :
$phpArray = json_decode($_POST['historicalJson'], true);
See json_decode documentation

how to get the "feature" data from a layer (loaded with geoJSON) without event listener?
thats the usual way, which works fine:
layer1.addListener('mouseover', function (event) {
console.log( event.feature.getProperty('description') );
}
but now i want to get the value from data object "layer1".
i tried already this:
layer1.getProperty('description')
layer1.feature.getProperty('description')
The way how i load the geoJSON
var layer1 = new google.maps.Data();
layer1 = loadGeoJson('https://googledrive.com/host/MYFILE')
The content of json
Here a short question btw: if i have more features (e.g polygons) in my json, can i get this values to manipulate (e.g. toggle visibility) it?
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
12.3456789,
01.2345678,
0
]
},
"properties": {
"name": "Test Polygon",
"description": "My Test Description"
}
}
]
}

To get all the features of a google.maps.Data Layer, use:
forEach(callback:function(Data.Feature))
Return Value: None
Repeatedly invokes the given function, passing a feature in the collection to the function on each invocation. The order of iteration through the features is undefined.
or to get a single feature (if you know the Id):
getFeatureById(id:number|string)
Return Value: Data.Feature|undefined
Returns the feature with the given ID, if it exists in the collection. Otherwise returns undefined.
Note that the IDs 1234 and '1234' are equivalent. Either can be used to look up the same feature.

I have got a problem with changing json schema with angular schema form.
If I set up schema like in code like this
$scope.schema = {
"$schema": "http://json-schema.org/draft-04/schema#",
"title": "Schema number ONE",
"type": "object",
"properties": {..
it works and renders whole form properly as I want.
But I want to load data from web service.
So I tried to set up schema to nothing and then change it by clicking button, but it didnt work. I mean, i got schema from service, but form do not change.
For example something like this in code.
$scope.schema = {};
$scope.changeSchema= function(){
$scope.schema = {
"$schema": "http://json-schema.org/draft-04/schema#",
"title": " Schema number two that I want",
"type": "object",
"properties": {
}
What I want is to select schema to load and change form to schema i selected.
Thank you very much.

As Claies pointed out in their comment, you need to trigger a schemaFormRedraw broadcast. However on load the error is due to validation on the schema that you have as {}, this would need to be a temporary schema, something along these lines should work:
$scope.schema = { "type": "object", "properties": {} }};
$scope.changeSchema = function() {
$scope.schema = {
"$schema": "http://json-schema.org/draft-04/schema#",
"title": " Schema number two that I want",
"type": "object",
"properties": {...}
}
$scope.$broadcast('schemaFormRedraw');
}

I am following the tutorials that can help extract my google spreadsheet to a json file http://blog.pamelafox.org/2013/06/exporting-google-spreadsheet-as-json.html . But I have a list of object in some of the google spreadsheet cell. My one of my spreadsheet is like this: screenshot http://www.tianyuwu.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-22-at-11.46.00-PM.png.
What I expert is to make the json file like this.
{
"features": "*articles\n*archive\n*video\n*search\n*social",
"data": "*news feeds\n*oroeco team",
"content": "* blog posts\n* analysis\n* screen shots",
}
But what I expect is like this
{
"features": "articles","archive","video", "search", "social",
"data": "news feeds","oroeco team",
"content": "* blog posts","analysis", "screen shots",
}
What is the most efficient way to convert?

If you're using JavaScript, try this:
json_original = {
"features" : "*articles\n*archive\n*video\n*search\n*social",
"data" : "*news feeds\n*oroeco team",
"content" : "* blog posts\n* analysis\n* screen shots",
}
json_formated = {}
for (var p in json_original) {
json_formated[p] = json_original[p].replace('\n', '').split('*').map(function(x) { return x.trim(); }).filter(function(x) {return x != ''; });
}