Lets say that i have a LineString (A car route):
let lineCoords = [
[ 10.964832305908203, 41.004681939880314 ],
[ 10.977363586425781, 40.99096148527727 ],
[ 10.983200073242188, 40.97075154073346 ],
[ 11.02834701538086, 40.98372150040732 ],
[ 11.02508544921875, 41.00716631272605 ],
];
And a another LineString (The stops that i have to make)
let arrayOfPoints = [
[ 10.964832305908203, 41.004681939880314 ],
[ 10.994186401367188, 41.01947819666632 ],
[ 10.977363586425781, 40.99096148527727 ],
[ 10.983200073242188, 40.97075154073346 ],
[ 11.02508544921875, 41.00716631272605 ],
[ 10.964832305908203, 41.004681939880314 ],
[ 11.02834701538086, 40.98372150040732 ],
];
Now i wanna sort arrayOfPoints based on lineCoords
How can i make it?
Can Turf help?
I have layout builder in React to keep data structure and text I use ImmutableJS objects.
Such structure with attributes as text or css styles is saved into database as JSON.
To make it JSON I using json-immutable library: serialize, deserialize functions.
After save in database I provide configuration for react components as javascript variables. For example my backend generate js file with variables or small part is printing directly in html code using script tag.
Data are JSON or decoded javascript.
The biggest problem I have with save special chars.
For example if someone set ' single quote in some attribute it is saved directly.
But when I print it in html code as
var myConfig = '{anyjson}';
when inside JSON is single quote parser throw error. The same with double quotes, & (ampersant) or any chars used in html code like <,/>
Single quote I replace to \' when I print it in html code.
But I think does exists any way to save keep all data in JSON and still they will easy to decode by deserialize function to parse JSON to ImmutableJS objects.
Code example
https://jsfiddle.net/jaroapp/2yzud6ua/2/
var structure = {
"__iterable":"Map",
"data":[
[
"entityMap",
{
"__iterable":"Map",
"data":[
[
"html_el_qb7tyhi",
{
"__iterable":"Map",
"data":[
[
"imported",
false
],
[
"path",
"html_el_qb7tyhi"
],
[
"componentData",
{
"__iterable":"Map",
"data":[
]
}
],
[
"draftjsObject",
{
"__iterable":"OrderedMap",
"data":[
]
}
],
[
"draftjs",
true
],
[
"data",
{
"__iterable":"OrderedMap",
"data":[
[
"text",
"B&B is the best company. It's my hope for new markets."
]
]
}
],
[
"chunk",
null
],
[
"style",
{
"__iterable":"OrderedMap",
"data":[
[
"background-image",
"url(\"/path/to/image.jpg\")"
]
]
}
],
[
"attr",
{
"__iterable":"OrderedMap",
"data":[
]
}
],
[
"runEditor",
false
],
[
"entityMap",
{
"__iterable":"OrderedMap",
"data":[
]
}
],
[
"type",
"div"
],
[
"key",
"html_el_qb7tyhi"
]
]
}
],
[
"html_el_2dgupn7",
{
"__iterable":"Map",
"data":[
[
"imported",
false
],
[
"path",
"html_el_2dgupn7"
],
[
"componentData",
{
"__iterable":"Map",
"data":[
]
}
],
[
"draftjsObject",
{
"entityMap":{
},
"blocks":[
{
"key":"3ia22",
"text":"Text saved with html inside",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
],
"entityRanges":[
],
"data":{
}
}
]
}
],
[
"draftjs",
true
],
[
"data",
{
"__iterable":"OrderedMap",
"data":[
[
"text",
null
],
[
"html",
"<p class=\"md-block-unstyled\">Text saved with html inside</p>"
]
]
}
],
[
"chunk",
null
],
[
"style",
{
"__iterable":"OrderedMap",
"data":[
]
}
],
[
"attr",
{
"__iterable":"OrderedMap",
"data":[
]
}
],
[
"runEditor",
false
],
[
"entityMap",
{
"__iterable":"OrderedMap",
"data":[
]
}
],
[
"type",
"div"
],
[
"key",
"html_el_2dgupn7"
]
]
}
]
]
}
],
[
"containersMap",
{
"__iterable":"Map",
"data":[
]
}
],
[
"componentsMap",
{
"__iterable":"Map",
"data":[
[
"entityMap",
{
"__iterable":"OrderedMap",
"data":[
]
}
]
]
}
]
]
};
Such structure I set as parameter into ReactJS component.
If I set it as JSON and wrap in quotes then the browser throws an error. If I set it as JavaScript object into the React component I can't make ImmutableJS from this one, because this structure is read by this
https://www.npmjs.com/package/json-immutable library (I use the same to make JSON from Immutable JS to save it in database);
Thanks in advance for any hints.
I solved this problem. Short description, maybe will helpful for someone.
I get file with deserialize function form json-immutable package. And I modified function deserialize to
export function deserialize(json){
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if(typeof json==='string'){
return JSON.parse(json, function(key, value, options){
return revive(key, value, options);
});
}else{
return JSON.parse(JSON.stringify(json), function(key, value, options){
return revive(key, value, options);
});
}
}
Function in package use JSON.parse for param. Maybe it's not the most elegant solution but I don't have time to find way to don't "re-json" object. Standard Object.keys and map return origin object.
I have 33 geoJson objects that represent the different boroughs of London I got from this site: http://statistics.data.gov.uk/area_collection?in_collection=http%3A%2F%2Fstatistics.data.gov.uk%2Fdef%2Fgeography%2Fcollection%2FE09
Each geoJson object has the following structure:
{
"type":"Feature",
"properties":{
"gml_id":"id6268d268-5d18-4555-b9fd-fafc874cb3dc",
"LAD15CD":"E09000001",
"LAD15NM":"City of London",
"LAD15NMW":null
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
-0.0967862758502,
51.523321274974165
],
[
-0.096469797431341,
51.522821549516344
],
... and so on
]
]
]
}
}
How can I use d3 (v4) to visualise these objects as a map?
Any help is greatly appreciated!
I have the huge geojson showing all the districts of Dubai. Here is a sample:
{
"type":"FeatureCollection",
"totalFeatures":224,
"features":[
{
"type":"Feature",
"id":"Community.1",
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
55.16945847438926,
25.03005371689898
],
[
55.168575711653915,
25.03074785219016
],
[
55.169258376227525,
25.03150691074316
],
[
55.169931129543535,
25.032274981961805
],
]
]
]
},
"geometry_name":"the_geom",
"properties":{
"COMM_CODE":684,
"NAME_AR":"البرشاء الجنوب الخامسة",
"NAME_EN":"AL BARSHA SOUTH FIFTH",
"AREA_ID":442,
"SHAPE_AREA":2951425.95614,
"SHAPE_LEN":10871.405155
}
},
{
"type":"Feature",
"id":"Community.2",
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
55.34592943407097,
25.16925511754935
],
[
55.34604885385063,
25.17297434345408
],
[
55.34600905862783,
25.171854965446766
],
[
55.345979182892805,
25.170726559094064
],
[
55.34592943407097,
25.16925511754935
]
]
]
]
}
I have a very simple code in d3, that parses the geojson and displays it in the browser. However I cannot see the results.
Here is my code:
d3.json("dld.json", createMap);
function createMap(countries) {
var aProjection = d3.geo.mercator();
var geoPath = d3.geo.path().projection(aProjection);
d3.select("svg").selectAll("path").data(countries.features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("class", "countries")
}
There is no error displayed in the console.
If someone could please point to me where I've mistaken, I would be the most thankful :)
The issue is, that you haven't yet set your bounding box you want to view in the map.
For this you can extend your projection like this:
var aProjection = d3.geo.mercator().scale(1000).translate([-1000, 1000]);
The entered values are just an example. Unfortunately setting this up can be quite tedious. For more information about how to find the correct values you can look here:
d3js scale, transform and translate
I'm using masonry.js quite a lot in a new website that I'm developing but there is one flaw with using it in my design when it comes to floating my columns side by side. Here is a general representation of what I'm trying to do:
Normal View:
[ column left ] [ main column ] [[masonry post]] [ column right ]
[ ] [ ] [[masonry post]] [ ]
[ ] [ ] [[masonry post]] [ ]
[ ] [ ] [[masonry post]] [ ]
[ ] [ ] [[masonry post]] [ ]
Responsive view:
[ column left ] [ main column ] [ column right ]
[ ] [ ] [ ]
[ ] [ ] [ ]
[ ] [ [masonry post][masonry post] ] [ ]
[ ] [ [masonry post][masonry post] ] [ ]
[ ] [ [masonry post][masonry post] ] [ ]
So the "main column" and "masonry post" columns are floated left so that when the browser is shrunk down, the masonry column goes beneath the main column, which in theory works perfectly, however because Masonry JS is applied to the masonry column it doesn't move like it's supposed to - Instead, it stays where it is and gets hidden behind the right hand column. Any ideas on how this can be sorted?