Related
I have a long list of coordinates (sent by a GPS sensor) that represent the movement of an asset.
I'm using leaflet to render the GeoJSON and it works fine if I render the LineString as a single feature, but if I break it down into multiple features (inside a FeatureCollection - to apply a different dynamic color) I start to see "holes" between features.
I'm pretty sure that this is due to the fact that there is actually a "hole" in the data I'm receiving. But why it works as a single LineString feature? Is there a way to fix this?
This is an extract of the GeoJSON (very large object)
there are 3 of the 866 features of the object
{
"type":"Feature",
"properties":{
"type":"traffic",
"color":"#ffa600"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.583125,
45.0485616
],
[
7.5830532999999996,
45.0485816
],
[
7.58299,
45.0486133
],
[
7.582893299999999,
45.0486066
],
[
7.5828682999999995,
45.04859
]
]
}
},
link to bin
https://jsbin.com/nexijajake/edit?html,output
example with single feature
https://jsbin.com/guqihajalu/1/edit?html,output
Actually, there is nothing wrong with rendering. Your data array (in your jsbin link) is an array of linestrings that are not connected with each other. You got a schema like this (imagine each row is a linestring):
[pointA-pointB-pointC]
[pointD-pointE-pointF]
In order for your line to be continuous, the last point of each linestring should exist in the next linestring as first point:
[pointA-pointB-pointC]
[pointC-pointD-pointE-pointF]
This way, your line will be continuous.
For example, the following sample (taken from your jsbin) has a gap:
const data = [
{
"type":"Feature",
"properties":{
"type":"traffic",
"color":"#ffa600"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.583125,
45.0485616
],
[
7.5830532999999996,
45.0485816
],
[
7.58299,
45.0486133
],
[
7.582893299999999,
45.0486066
],
[
7.5828682999999995,
45.04859
]
]
}
},
{
"type":"Feature",
"properties":{
"type":"normal",
"color":"#07e36a"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.582795,
45.0485149
],
[
7.582624999999999,
45.0483233
],
[
7.581984899999999,
45.047521599999996
]
]
}
}
];
The gap is fixed (the first point of the second linestring is the last point of the first linestring):
const data = [
{
"type":"Feature",
"properties":{
"type":"traffic",
"color":"#ffa600"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
7.583125,
45.0485616
],
[
7.5830532999999996,
45.0485816
],
[
7.58299,
45.0486133
],
[
7.582893299999999,
45.0486066
],
[
7.5828682999999995,
45.04859
]
]
}
},
{
"type":"Feature",
"properties":{
"type":"normal",
"color":"#07e36a"
},
"geometry":{
"type":"LineString",
"coordinates":[
//the first point here is the last of previous linestring
[
7.5828682999999995,
45.04859
],
[
7.582795,
45.0485149
],
[
7.582624999999999,
45.0483233
],
[
7.581984899999999,
45.047521599999996
]
]
}
}
];
I am trying to plot polylines using response data from ESRI ArcGiS.
But instead of geo co-ordinates, what i am receive are Map Co-ordinates, which I cannot find how to implement into my maps.
I am using Mapbox Open street maps, in order to display the map as well as the polygon.
The below information is the initial part of the response.
"results": [
{
"paramName": "Output_Feature_Class",
"dataType": "GPFeatureRecordSetLayer",
"value": {
"displayFieldName": "",
"geometryType": "esriGeometryPolyline",
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
},
While the geometry paths are.
"geometry": {
"paths": [
[
[
-9983578,
4174731
],
[
-9983584,
4174710
],
[
-9983598,
4174682
],
[
-9983612,
4174652
],
[
-9983619,
4174624
],
[
-9983591,
4174616
],
[
-9983561,
4174603
],
[
-9983534,
4174581
],
[
-9983518,
4174553
],
[
-9983513,
4174524
],
[
-9983510,
4174505
],
[
-9983510,
4174463
],
[
-9983516,
4174365
],
[
-9983519,
4174252
],
[
-9983526,
4174095
],
[
-9983390,
4174093
]
],
I have been reading on the Mapbox documentation, and couldn't find any info on map co-ordinates.
Can help in pointing me towards using map coordinates, and how they are to be used in plotting ploylines
I am trying to do something similar to this: https://directmail.taradel.com/step1-target.aspx
I have narrowed down to using is a Canvas overlay on top of the map, for the interim, but I am not sure on its scalability. Would appreciate your opinion here
https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/
I think I found an avenue I could explore.
I referred to this link which told me that I should convert the map co-ordinates to geo co-ordinates,
MapBox ESRI Data Layer
And the theoretic behind it is here : https://gis.stackexchange.com/questions/9442/arcgis-coordinate-system
I will let you all know, how it goes.
I am modifying an example Leaflet script for my custom purposes.
The original had an associated GeoJSON file with the following format (this is just an excerpt):
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"OBJECTID":1,"NAME":"Alpha Terrace","TYPE":"CHD"},"geometry":{"type":"Polygon","coordinates":[[[-79.9222757299766,40.4687885729535],[-79.922601544034,40.4688999202888],[-79.9227665690647,40.4689585131248],[-79.9231802736014,40.4691056186529],[-79.9228362255,40.4696697431611],[-79.9224234733987,40.4695244210813],[-79.9222570954656,40.4694656801973],[-79.9222259241735,40.4695164633706],[-79.9219035919843,40.4694017028541],[-79.9222757299766,40.4687885729535]]]}},{"type":"Feature","properties":{"OBJECTID":2,"NAME":"Manchester","TYPE":"CHD"},"geometry":{"type":"Polygon","coordinates":[[[-80.0271753891687,40.4506598454243],[-80.0271940086199,40.4507189442263],[-80.0272105946986,40.4507710471721],[-80.0272579314302,40.4509221686618],[-80.0273032612578,40.4510537660432],[-80.0273193174278,40.451103476753],[-80.0273338296879,40.451147381945],[-80.0273478698275,40.451190610864],[-80.0273633786279,40.4512374152857],[-80.0273793914473,40.4512858394759],[-80.0273919427229,40.4513248923929],[-80.0274084625005,40.4513750227769],[-80.0274174596111,40.451401961247],
I made my own GeoJSON with this format (again, just an excerpt):
{
"type": "FeatureCollection",
"name": "testmap1",
"features": [
{ "type": "Feature", "properties": { "land_val": 16290.0, "imprv_val": 0.0, "land_acres": 0.31, "land_sqft": 13503.6, "situs_stre": null, "situs_st_1": "LAKE BREEZE", "situs_st_2": "DR", "situs_city": "BROWNWOOD", "Deed_Date": "2014\/10\/14", "Mkt_Land_S": "FBINT" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 2695178.255351334810257, 10617843.194646343588829 ], [ 2695245.314272344112396, 10618016.961359173059464 ], [ 2695316.911570087075233, 10617988.845273673534393 ], [ 2695251.204024344682693, 10617828.19828525185585 ], [ 2695196.89442166686058, 10617839.362961083650589 ], [ 2695178.255351334810257, 10617843.194646343588829 ] ] ] ] } },
I'm aware that these are in different locations -- I edited the coordinates of the map so that they display the area covered by the new GeoJSON.
When the map displays with my GeoJSON nothing shows up. But when I use the original GeoJSON (and move the window back to that area), it overlays polygons onto the OSM map.
Does anyone know why this might be? Is there a hyper-specific GeoJSON format needed for Leaflet?
Your coordinates are completely off (e.g [ 2695178.255351334810257, 10617843.194646343588829]).
First value (i.e. longitude) should be 0 to 360
Second value (i.e. latitude) should be -90 to 90
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 like to know how to construct or store json data for City, State and Country in a single variable ?
I have seen one but it only deal with single kind of data means CAR
{
"cars": {
"Nissan": [
{"model":"Sentra", "doors":4},
{"model":"Maxima", "doors":4}
],
"Ford": [
{"model":"Taurus", "doors":4},
{"model":"Escort", "doors":4}
]
}
}
My intention is to store different kind of json data in single area or in single variable.
What about this ?
{
"countries": [
{...}
],
"states" [
{...}
],
"cities": [
{...}
]
}
maybe this is a direct answer.
{
"Countries":[{
"CountryName":"Indonesia",
"States":[{
"StateName":"Bali",
"Cities":["Denpasar",
"Kuta",
"Tuban"
]},
{
"StateName":"Jakarta",
"Cities":[
"Bandung",
"Tanggerang"
]
}
]
}]}
check the file here
jsonforcountriesstatecities