My question is based on the following example from Google. I have gotten it to work great to pull out my polygon shapes from my fusion table, similar to their shapes. My issue arises when I try and alter the script to pull out some polyline data I have. The issue is in the breaking down of the rows data array. The dataset for the correct polygons is as follows.
"rows": [
[
"129",
{
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-86.3055326754,
39.8143343479,
0.0
],
[
-86.3056957826,
39.8139995783,
0.0
],
[
-86.3059116214,
39.8137158473,
0.0
],
[
-86.3055326754,
39.8143343479,
0.0
]
]
]
}
}
],etc....
The polylines is as follows
"rows": [
[
"1",
{
"geometry": {
"type": "LineString",
"coordinates": [
[
-86.2411593096,
40.1368952707,
0.0
],
[
-86.2413739094,
40.1367194041,
0.0
],
[
-86.241866376,
40.1197924711,
0.0
]
]
}
}
],etc..
The polygon has an extra [] that is throwing off my ability to parse through the data! It is driving me nuts! Serious points to answer this one! Example of mine here. I just dont know enough about javascript arrays. Thanks
Here is a version that only parses polylines:
http://www.geocodezip.com/v3_GoogleEx_FusionTables_mouseover_map_styles_polylines.html
I couldn't find any documentation or description of the expected output (other than "GeoJSON"), it would be nice if there was a way to detect polygons vs. polylines vs. markers and parse them appropriately.
Here is a description of GeoJSON
Here is a page that parse polylines, polygons and markers (not well tested).
Related
I'm trying to display this kind of list on a chart:
[ [ Moment<2020-08-02T02:54:24+02:00>, 9.99 ],
[ Moment<2020-08-05T21:55:33+02:00>, 10.99 ],
[ Moment<2020-08-05T22:00:50+02:00>, 26.87 ],
[ Moment<2020-08-06T23:43:32+02:00>, 10.99 ],
[ Moment<2020-08-07T22:57:13+02:00>, 26.87 ],
[ Moment<2020-08-07T23:01:20+02:00>, 9.99 ],
[ Moment<2020-08-08T22:10:14+02:00>, 10.99 ],
[ Moment<2020-08-08T22:12:20+02:00>, 35.83 ],
[ Moment<2020-08-10T19:03:51+02:00>, 20.24 ],
[ Moment<2020-08-11T17:24:39+02:00>, 10.99 ],
[ Moment<2020-08-11T17:27:41+02:00>, 27.03 ],
[ Moment<2020-08-13T14:04:34+02:00>, 29.54 ],
[ Moment<2020-08-17T04:17:37+02:00>, 9.99 ],
[ Moment<2020-08-25T04:57:57+02:00>, 10.99 ] ]
What I try to get is to have the x-axis separated by one day each square but keeping the fact that there can be multiple values for one day (so every point is separated by a different distance). I don't really know how to approach it, if you can give me some directions on how to start it, it would be much appreciated. Many thanks.
You need to create a range for the x-axis, listing all the dates.
For that you can use: https://www.npmjs.com/package/moment-range
Then loop through that range, for each day get the values from your list (by filtering for example).
It then depends on your chart library and business logic on how you'd combine multiple values per day (for example adding them) or display them individually as stacked column chart.
I am trying to display a floorplan to my webapp using d3.js and vue js. The data comes from a .json file and is in a geojson format. I generated some test data from this geojson website. I was thinking I could use the d3.js path function to plot each different object to a svg element. Would this be the correct way to go about doing this? I have looked at this tutorial to make a united states map from geojson data. I was thinking this would be the right way to do it if you inputted different data. However my program spits out random rectangles to the webapp. I think this may be becauseof the projection I am using but Im not sure. I havent used d3.js like this before so its all new to me. I included my code in below. Any help is greatly appreciated and im open to possibly using a different java script library but d3js is preferred.
createFloormap(){
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")
var path = d3.geoPath().projection(d3.geoAlbersUsa().scale(500))
//var path = d3.geoPath()
//var path = d3.geoPath().projection(d3.geoMercator().scale(100))
var x = d3.scaleLinear()
.domain([1, 10])
.rangeRound([600, 860]);
var color = d3.scaleThreshold()
.domain(d3.range(2, 10))
.range(d3.schemeBlues[9]);
var promises = [
d3.json("../static/data.json")
//d3.json("https://raw.githubusercontent.com/adamjanes/udemy-d3/master/08/8.04/data/us-map.json")
]
Promise.all(promises).then(function(data){
ready(data[0]);
})
function ready(us) {
console.log(us)
svg.append("g")
.selectAll("path")
.data(us.features)
//.data(topojson.feature(us, us.objects.states).features)
.enter()
.append("path")
.attr("fill", "grey")
.attr("d", path)
.attr("stroke", "#fff")
.attr("stroke-width", .2)
}
}
},
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-144.140625,
45.583289756006316
],
[
-65.390625,
45.583289756006316
],
[
-65.390625,
69.28725695167886
],
[
-144.140625,
69.28725695167886
],
[
-144.140625,
45.583289756006316
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
9.4921875,
39.36827914916014
],
[
159.609375,
39.36827914916014
],
[
159.609375,
70.02058730174062
],
[
9.4921875,
70.02058730174062
],
[
9.4921875,
39.36827914916014
]
]
]
}
}
]
}
My apologies, I mislead you when commenting on your last question. I read the code and saw an obvious issue - but missed the reference to a floor plan - which for the coordinates given was unlikely to be measured in latitude/longitude pairs. The answer below would be appropriate for a floor plan in lat/long pairs (as would be exported from geojson.io and because projection is less relevant at the building scale) or a geojson floor plan with coordinates in meters/feet.
Geojson in an arbitrary Cartesian coordinate system
You don't have geographic coordinates consisting of latitude/longitude pairs measured in degrees (as I thought when commenting), you have coordinates consisting of x,y values measured in some unit like metres or feet.
To project these corodinates we do not want to use d3.geoSomeProjection because these project latitude/longitude pairs on a sphere to a 2d plane. Nor do we want to use a null projection (the default projection for d3.geoPath) because that treats geojson coordinates as pixel coordinates (we can use a null projection when the coordinates in the geojson have been already been converted to pixel values - we know we don't want a null projection here because we have negative values).
Instead we can use d3.geoIdentity (the geo prefix indicates it is just part of the geo module of D3 but it doesn't require geographic coordinates). This "projection" allows us to apply some projection methods to the data, namely .center() or .scale(). D3 also has two convenience methods that set both simultaneously: fitExtent and fitSize which stretch and translate specified geojson to given dimensions:
var projection = d3.geoIdentity().fitSize([width,height],geoJsonObject)
var projection = d3.geoIdentity().fitExtent([[left,top],[right,bottom]],geoJsonObject)
So, with your data we get:
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-144.140625,
45.583289756006316
],
[
-65.390625,
45.583289756006316
],
[
-65.390625,
69.28725695167886
],
[
-144.140625,
69.28725695167886
],
[
-144.140625,
45.583289756006316
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
9.4921875,
39.36827914916014
],
[
159.609375,
39.36827914916014
],
[
159.609375,
70.02058730174062
],
[
9.4921875,
70.02058730174062
],
[
9.4921875,
39.36827914916014
]
]
]
}
}
]
}
var width = 500;
var height = 300;
var svg = d3.select("svg")
.attr("width",width)
.attr("height",height);
var projection = d3.geoIdentity().fitSize([width,height],data)
var path = d3.geoPath(projection);
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d",path);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
One thing to note is that SVG coordinates space, to which d3.geoIdentity is treating coordinates as being in, has the opposite convention as might be expected: y=0 is at the top of the SVG with y values increasing as one moves down. If your coordinates appear to be upside down, then you can use d3.geoIdenity().fitSize(...).reflectY(true)
addGeoJson is not working in google map for my file
please check below code that I am using in javascript
//create the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: {lat:49.79, lng: -8.82}
});
// Load GeoJSON.
var promise = $.getJSON("Sensitive_Areas_Nitrates_Rivers.json"); //same as map.data.loadGeoJson();
promise.then(function(data){
cachedGeoJson = data; //save the geojson in case we want to update its values
console.log(cachedGeoJson);
map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});
});
I have downloaded this file from here
you can check my JSON file
Sensitive_Areas_Nitrates_Rivers.json
also, you can check this link with polygon
I have used below JSON format so you can check it
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:27700"
}
},
"features": [
{
"type": "Feature",
"id": 1,
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[
500051.6875,
224280.03130000085
],
[
500047.2812999999,
224277.6875
],
[
499977.5937999999,
224242.625
],
[
499976.6875,
224242.21880000085
]
]
]
},
"properties": {
"OBJECTID": 8,
"type_of_sa": "SA_N",
"datedesign": 1025136000000,
"name": "Rivers Itchen",
"length_km": 12,
"uwwtd_code": "UKENRI134",
"shape_Length": 12172.080443901654
}
}
]
}
[500051.6875, 224280.03130000085] - [X, Y] coordinates may be in EPSG: 27700 to EPSG:4326, Now we need to display these coordinates on google map, Is there any solution for this?
Since Google Maps expects GeoJSON to be in EPSG:4326, Sensitive_Areas_Nitrates_Rivers.json needs to be reprojected. QGIS, for instance, could be utilized for that matter (refer docs for a details)
Reprojected Sensitive_Areas_Nitrates_Rivers.json layer will be displayed like this:
You are getting coordinates in metres. For displaying in google map you need to convert it into [Lng, Lat].
For converting metres to [Lng, Lat] you need to change the projection from EPSG: 27700 to 4326
then only you are able to get this geojson in [Lng, Lat]
Tool you can use: QGIS Desktop 3.4.14
Link: https://qgis.org/en/site/forusers/download.html
After convert you need to export this file as feature.
when I try to draw pie chart on nodered , colors are always black. I m using dashboard-ui node. What is the missing ? or What is best way draw pie chart on nodered ui ?
msg.payload=[{
"series": [ "X", "Y"],
"colors":['#8b4513','#26138b'],
"data": [ 77,23],
"labels": [ "Jan","mon" ]
}];
There are two issues with this payload, which are stopping it from doing what you would expect:
the colors option is not currently supported as an input, and
the data must be an array of arrays, with the number of inner arrays being the same as the number of series to be shown (so in your case, an array of 1 array of y-values)
This revised payload works for me:
[
{
"series": [ "X", "Y" ],
"data": [
[ 77, 23 ]
],
"labels": [ "Jan", "mon" ]
}
]
The option to specify colors for each series would be a nice feature to add to the ui_chart node. For now, you will have to select the colors you want inside the node configuration editor. Please see the chart node's README for other examples of valid data inputs.
--
Steve
I have four outlines (features) in json format that show as polygons on a leaflet map. Currently I am showing my current location when clicking on the L.Control.Locate arrow. It shows me near the polygon, however, I'd like to know which polygon (by title) I am closest to and have an alert or at least a variable tell me the title of the nearest.
Using Next Nearest https://github.com/mapbox/leaflet-knn, I am not clear on how to get the closest point. I created a small function:
function nearBy(latlng){
//does nearBy() have the latlng? This does show me the latlng of the user
alert(latlng);
//pass in all the data
var gj = L.geoJson(GEOJSON_DATA);
//do the knn magics
var index = leafletKnn(gj).nearest(L.latLng(latlng), 5);
//show me something
alert(index);
}
alert(index) is spewing out: [object Object],[object Object],[object Object],[object Object],[object Object]
...which is great, cause it is showing that something is there, however, I cannot get anything other than that.
Anyone out there using leaflet-knn to do such as I am?
... EDIT ...
json looks like so (not complete below):
{ "type": "Feature", "properties": { "Name": "<a href='framework/index.html'><h3>Conecuh National Forest</h3></a>", "description": "<html xmlns:fo=\"http:\/\/www.w3.org\/1999\/XSL\/Format\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\">\n\n<head>\n\n<META http-equiv=\"Content-Type\" content=\"text\/html\">\n\n<meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\">\n\n<\/head>\n\n<body style=\"margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;\">\n\n<table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px\">\n\n<tr style=\"text-align:center;font-weight:bold;background:#9CBCE2\">\n\n<td>Conecuh National Forest<\/td>\n\n<\/tr>\n\n<tr>\n\n<td>\n\n<table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px\">\n\n<tr>\n\n<td>PROCLAIMEDFORESTID<\/td>\n\n<td>295366010328<\/td>\n\n<\/tr>\n\n<tr bgcolor=\"#D4E4F3\">\n\n<td>FORESTNAME<\/td>\n\n<td>Conecuh National Forest<\/td>\n\n<\/tr>\n\n<tr>\n\n<td>GIS_ACRES<\/td>\n\n<td>171215.333<\/td>\n\n<\/tr>\n\n<tr bgcolor=\"#D4E4F3\">\n\n<td>SHAPE<\/td>\n\n<td>Polygon<\/td>\n\n<\/tr>\n\n<tr>\n\n<td>SHAPE.AREA<\/td>\n\n<td>0.065501<\/td>\n\n<\/tr>\n\n<tr bgcolor=\"#D4E4F3\">\n\n<td>SHAPE.LEN<\/td>\n\n<td>1.596221<\/td>\n\n<\/tr>\n\n<\/table>\n\n<\/td>\n\n<\/tr>\n\n<\/table>\n\n<\/body>\n\n<\/html>", "timestamp": null, "begin": null, "end": null, "altitudeMode": null, "tessellate": 1, "extrude": -1, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -86.399549, 31.205536, 0.0 ], [ -86.407326, 31.205638, 0.0 ], [ -86.409808, 31.205671, 0.0 ], [ -86.413319, 31.205717, 0.0 ], [ -86.414067, 31.205711, 0.0 ], [ -86.418361, 31.205674, 0.0 ], [ -86.429486, 31.20558, 0.0 ], [ -86.429544, 31.198715, 0.0 ], [ -86.429615, 31.190445, 0.0 ], [ -86.429627, 31.185575, 0.0 ], [ -86.429651, 31.175982, 0.0 ], [ -86.430013, 31.175979, 0.0 ], [ -86.430563, 31.175974, 0.0 ], [ -86.432963, 31.175952, 0.0 ], [ -86.433052, 31.175951, 0.0 ], [ -86.433474, 31.175947, 0.0 ], [ -86.433864, 31.175944, 0.0 ]
... EDIT 2 ...
Using FireBug and console.log() i was able to get to the results. Leaflet-knn returns them correctly, having the closest LatLng as (in my json) index[0].lat + "," index[0].lon
I'd still love some examples of "clean" ways of doing this if anyone has one...
Use nearestLayer instead of nearest: this will return the nearest layer instead of the nearest point, as specified in the documentation.