Plotting ESRI ArcGIS data on Open Street Maps - javascript

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.

Related

GeoJson LineString Feature Collection with holes

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
]
]
}
}
];

GeoJSON formats for Leaflet -- certain GeoJSON not displaying, while others are

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

Why when i edit a MultiPolygon type geometry in the map it changes to Polygon type?

Im working with GeoDjango and drawing with google maps api 3.
When i turn editable:True and edit a MultiPolygon type geometry, it changes to a Polygon type in the GeoJson properties, but i need to work all my geometries in MultiPolygon.
I search in the web, but all what i found was "how to change MultiPolygon to Polygon", but i dont want that.
This is my model in django
class Potrero(models.Model):
sector = models.ForeignKey(Sector,editable=False)
nombre = models.CharField(max_length=30)
superficie = models.FloatField(editable=False)
vector = models.MultiPolygonField(srid=4326,default=None)
objects = models.GeoManager()
class Meta:
unique_together = (("nombre","sector"),)
def __unicode__(self):
return self.nombre
I transform the geodjango data in json with geojson method and transfer it with the HttpResponse in the variable "lhope".
My code in javascript:
This is how is drawing the features:
map.data.addGeoJson(lhope);
map.data.setStyle(function (feature) {
var fcolor = feature.getProperty('fillColor');
var scolor = feature.getProperty('strokeColor');
var sopacity = feature.getProperty('strokeOpacity');
var edit = feature.getProperty('editable');
return {
fillColor: fcolor,
strokeColor: scolor,
strokeOpacity: sopacity,
editable:edit,
strokeWeight: 2.0
};
});
when i begin to edit:
var f = map.data.getFeatureById(feature_id);
f.setProperty('editable',true);
And when i finish the edition:
var f = map.data.getFeatureById(feature_id);
f.setProperty('editable',false);
var new_potrero;
f.toGeoJson(function(new_potrero){
alert(JSON.stringify( new_potrero,null,4));
$.get( {dataType:"json",url:"{% url 'geoinfo:get_edit_potrero' %}", data:{ idi: f.getId(), poly: JSON.stringify( new_potrero,null,4) }}) ;
});
when i turn "editable":true and dont change any vertice of the geometry this is what i get from the alert(JSON.stringify):
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-70.57841420173798,
-32.759643227220906
],
[
-70.57747006416474,
-32.76220103881522
],
[
-70.57895064354096,
-32.76180406405501
],
[
-70.57904791831032,
-32.761693993357056
],
[
-70.57907938957368,
-32.76165519806363
],
[
-70.58059215545808,
-32.760225169648976
],
[
-70.57841420173798,
-32.759643227220906
]
]
]
]
},
"properties": {
"fillColor": "#FFFF00",
"strokeColor": "#FFFF00",
"strokeOpacity": 0.8,
"editable": false
},
"id": 143
}
And its correct because the type still be "MultiPolygon"
But, when i change any vertice of the geometry, this is what i get:
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-70.57841420173798,
-32.759643227220906
],
[
-70.57483077049409,
-32.76059734013807
],
[
-70.57747006416474,
-32.76220103881522
],
[
-70.57895064354096,
-32.76180406405501
],
[
-70.57904791831032,
-32.761693993357056
],
[
-70.57907938957368,
-32.76165519806363
],
[
-70.58262526989137,
-32.7619145856149
],
[
-70.58059215545808,
-32.760225169648976
],
[
-70.57841420173798,
-32.759643227220906
]
]
]
},
"properties": {
"fillColor": "#00FF00",
"strokeColor": "#FFFF00",
"strokeOpacity": 0.8,
"editable": false
},
"id": 143
}
If you can see the type now is Polygon and its the same Feature.
All the code is working fine, no errors founded except the one what im asking.
Also is important to say that this error only appears in the features with only 1 polygon in the set, if i edit any feature that have more than 1 polygone in the set it maintains the "type":"MultiPolygon".
I'm really worried about this, because i need to work all my features as MultiPoligon.
Thanks for any support that u can give me.

How do you use d3 (v4) to map out several geoJson objects?

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!

Why can't I see the map in my browser after parsing the geojson file?

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

Categories

Resources