D3 overlay on google maps not fully rendering - javascript

as background, I've been working on a small project highlighting local neighborhoods and crime incidents over time in a d3 overlay on a google map, but finding that my overlay only partially renders.
The initial objective is achieving something visually like the map rendered here.
The code for the this target/example map can be seen in the JSfiddle here. I've used this example to guide my current work.
Unfortunately, when I run my overlay code with a google map for the view I'm targeting, I find that only small portions of the overall d3 paths actually render on the google map. From debugging in the console, I can see that all the relevant geojson data is loading and each path array is being included as a path node, but only one or two of the paths is being displayed on the map - e.g. I only see transparent fill over one or two neighborhoods (as shown in image linked below).
View of map's partial overlay rendering
Can anyone advise on why the d3 overlay with geojson data isn't being fully displayed, and how I can fix this, so that I see the full neighborhoods overlay?
Code below, and many thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function draw(geo_data) {
"use strict";
var margin = 100,
width = 1400 - margin,
height = 1000 - margin;
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "SvgOverlay");
var svg = layer.append("svg");
var neighborhoods = svg.append("g").attr("class", "Neighborhoods");
overlay.draw = function(){
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x, pixelCoordinates.y];
};
path = d3.geo.path().projection(googleMapProjection);
neighborhoods.selectAll("path")
.data(geo_data.features)
.enter()
.append("path")
.attr("d", path);
};
};
overlay.setMap(google_base);
};
</script>
</head>
<body>
<div id="google_map">
</div>
<script type="text/javascript">
var google_base = new google.maps.Map(d3.select("#google_map").node(), {
zoom: 13,
center: new google.maps.LatLng(37.81, -122.26),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: false,
styles:[{"stylers": [{"saturation": -50},{"lightness": 75}]}]
});
d3.json("neighborhoods.geojson", draw);
</script>
</body>
</html>
Note: example geojson data
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NAME": "Montclair" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -122.21594888924534, 37.832181779651613 ], [ -122.199005320235656, 37.839802502024263 ], [ -122.195700218341074, 37.834717626248832 ], [ -122.204865526096057, 37.83063877524836 ], [ -122.204065506384751, 37.826138894083272 ], [ -122.203989505503827, 37.825037923657973 ], [ -122.204862534763905, 37.82484093266519 ], [ -122.206357582839033, 37.825825912182573 ], [ -122.207037605809575, 37.825554922390438 ], [ -122.21045471226752, 37.829664825068207 ], [ -122.212788791761739, 37.828300871884338 ], [ -122.21104273740049, 37.826278919502776 ], [ -122.209740697282683, 37.824438964026321 ], [ -122.209719696572449, 37.824446963720987 ], [ -122.207737635353567, 37.821578033328542 ], [ -122.207938642362265, 37.821377039630789 ], [ -122.208037645976759, 37.82117704547791 ], [ -122.208238653148413, 37.820877054469094 ], [ -122.210140719787248, 37.818876116804304 ], [ -122.211442762016475, 37.819577103232504 ], [ -122.212243787852969, 37.820077093014056 ], [ -122.214446859285928, 37.821177072378525 ], [ -122.215348888403369, 37.821678062551726 ], [ -122.216549926889712, 37.822478045852897 ], [ -122.216749933170547, 37.822678041257156 ], [ -122.217351952809793, 37.822878038347341 ], [ -122.218401986194451, 37.823679020982773 ], [ -122.221157073570424, 37.825778975452437 ], [ -122.222459113734274, 37.827279940103317 ], [ -122.222759122864446, 37.827679930485409 ], [ -122.223861155874616, 37.829379888880801 ], [ -122.224462173475956, 37.830480861460941 ], [ -122.223133128544632, 37.830996841877365 ], [ -122.222659112528717, 37.83118083489429 ], [ -122.221358066237769, 37.83288178322033 ], [ -122.219555006623537, 37.832981772972666 ], [ -122.218852983299286, 37.833081767323314 ], [ -122.217851950689095, 37.832881768578396 ], [ -122.217351934210413, 37.832881766490274 ], [ -122.21594888924534, 37.832181779651613 ] ] ] } }

Related

Object with Key:Value where every Value is an Array of Objects - cannot iterate [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 3 years ago.
I am downloading data via d3.json when create an object with each record that holds downloaded data. Each object will be stored in an array. I lost the ability to iterate over the array.
I have tried using multi-dimensional array, and still cannot iterate over the created object.
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
// console.log(datamodel)
const url1 = "https://www.quandl.com/api/v3/datasets/YALE/SPCOMP.json?start_date='2015-01-01'&end_date='2018-09-30'&api_key=4QuxetVDNP8R3sYg9CED";
// Fetch the JSON data and console log it
d3.json(url1).then(function(data) {
data.dataset.data.forEach(element => {
tObject['date']=element[0];
tObject['spx'] = element[1];
tObject['rate']=element[5];
datamodel['mkt'].push(tObject); //creating an array of objects
tObject={};
});
});
I repeat the code above for other datasets to fill "confidence, homes"
I need to iterate after downloading over the datamodel, and update the "combined" so that I can have more stats, like change per date, ratios.
For instance: going to debug console in any browser, I can access the datamodel variable via datamodel.mkt
The debug console allows me to iterate over the objects, not sure why code ran in JS file does not allow me to iterate not get length of the array. I am so lost.

I hit the API in browser and copied the data in my js file. I call this function in HTML onload. Half of this function does what your code did to fill data in datamodel.mkt
Then it loops over the data present in datamodel.mkt and copies the elements in datamodel.combined
Please note that the commented forEach loop also works. You can uncomment the console.log to view the datamodel object in console
Hope this helps.
function setData(){
var data = {"dataset":{"id":539984,"dataset_code":"SPCOMP","database_code":"YALE","name":"S\u0026P Composite","description":"This data set consists of monthly stock price, dividends, and earnings data and the consumer price index (to allow conversion to real values), all starting January 1871. Further info at http://www.econ.yale.edu/~shiller/data.htm.","refreshed_at":"2019-08-24T02:51:26.805Z","newest_available_date":"2019-08-31","oldest_available_date":"1871-01-31","column_names":["Year","S\u0026P Composite","Dividend","Earnings","CPI","Long Interest Rate","Real Price","Real Dividend","Real Earnings","Cyclically Adjusted PE Ratio"],"frequency":"monthly","type":"Time Series","premium":false,"limit":null,"transform":null,"column_index":null,"start_date":"2015-01-01","end_date":"2018-09-30","data":[["2018-09-30",2901.5,52.34,130.39,252.439,3.0,2944.5129194578,53.115907704436,132.32295004932,32.6228911205],["2018-08-31",2857.82,51.89,127.75333333333,252.146,2.89,2903.555479266,52.720428095231,129.79784975768,32.390276880301],["2018-07-31",2793.64,51.44,125.11666666667,252.006,2.89,2839.9251892812,52.29226089855,127.18960684468,31.886366962159],["2018-06-30",2754.35,50.99,122.48,251.989,2.91,2800.1731263567,51.838302217557,124.51765553258,31.630556496455],["2018-05-31",2701.49,50.66,120.13333333333,251.588,2.976,2750.8111875864,51.58490120753,122.32661136461,31.243615074865],["2018-04-30",2653.63,50.33,117.78666666667,250.546,2.87,2713.3151215246,51.462016206605,120.43590997262,30.970179293325],["2018-03-31",2702.77,50.0,115.44,249.554,2.84,2774.5457779178,51.327818828791,118.50566811191,31.808409057643],["2018-02-28",2705.16,49.643333333333,113.58666666667,248.991,2.86,2783.2783925925,51.076911163456,116.86677128892,32.03538233925],["2018-01-31",2789.8,49.286666666667,111.73333333333,247.867,2.58,2883.3787928607,50.939898715844,115.48122581868,33.307343828031],["2017-12-31",2664.34,48.93,109.88,246.524,2.4,2768.7119778399,50.846767708215,114.18440293846,32.086132007706],["2017-11-30",2593.61,48.676666666667,108.94666666667,246.669,2.35,2693.6268919585,50.553775758202,113.14795637068,31.29891333388],["2017-10-31",2557.0,48.423333333333,108.01333333333,246.663,2.36,2655.6697042118,50.291896484272,112.18135979048,30.920393290334],["2017-09-30",2492.84,48.17,107.08,246.819,2.2,2587.3975149806,49.997167205523,111.14172024844,30.168114410679],["2017-08-31",2456.22,47.853333333333,106.06,245.519,2.21,2562.8872302144,49.931478826486,110.66590925753,29.914959397497],["2017-07-31",2454.1,47.536666666667,105.04,244.786,2.32,2568.3429837695,49.749588160679,109.92981011986,30.002220744019],["2017-06-30",2433.99,47.22,104.02,244.955,2.19,2545.5393875916,49.384085342206,108.78722061195,29.748503240633],["2017-05-31",2395.35,46.94,102.77666666667,244.733,2.3,2507.4009520069,49.135784201558,107.58440805899,29.313344980271],["2017-04-30",2359.31,46.66,101.53333333333,244.524,2.3,2471.7859389569,48.884433123129,106.37375574586,28.904245956275],["2017-03-31",2366.82,46.38,100.29,243.801,2.48,2487.0074615157,48.735183100151,105.3827406881,29.086921742465],["2017-02-28",2329.91,46.153333333333,98.376666666667,243.603,2.42,2450.2130769633,48.536424530897,103.4562687549,28.655106525184],["2017-01-31",2275.12,45.926666666667,96.463333333333,242.839,2.43,2400.1214199531,48.45000545629,101.76329713308,28.063573742124],["2016-12-31",2246.63,45.7,94.55,241.432,2.49,2383.8782004353,48.49184501226,100.32612573105,27.865098223924],["2016-11-30",2164.99,45.476666666667,92.73,241.353,2.14,2298.0026949634,48.27066293976,98.427147425141,26.850953531056],["2016-10-31",2143.02,45.253333333333,90.91,241.729,1.76,2271.1447214649,47.958894050776,96.34523552201,26.525143085071],["2016-09-30",2157.69,45.03,89.09,241.428,1.63,2289.5427262476,47.781705881256,94.534136730205,26.727873346479],["2016-08-31",2170.95,44.84,88.366666666667,240.849,1.56,2309.1508982288,47.694477660277,93.992016263302,26.948872433724],["2016-07-31",2148.9,44.65,87.643333333333,240.628,1.5,2287.7964664337,47.53600084986,93.308254598384,26.694003256096],["2016-06-30",2083.89,44.46,86.92,241.018,1.64,2214.9945027446,47.257127579683,92.388428457626,25.840372927671],["2016-05-31",2065.55,44.266666666667,86.76,240.229,1.81,2202.7115000166,47.206165783482,92.521241190697,25.69470992345],["2016-04-30",2075.54,44.073333333333,86.6,239.261,1.81,2222.3196911532,47.190146430049,92.72424778798,25.922337543674],["2016-03-31",2021.95,43.88,86.44,238.132,1.89,2175.2039979402,47.20589106042,92.991732526498,25.372298620188],["2016-02-29",1904.42,43.716666666667,86.47,237.111,1.78,2057.5877800903,47.232689805618,93.42456776573,24.00260677729],["2016-01-31",1918.6,43.553333333333,86.5,236.916,2.09,2074.6144044725,47.094950847558,93.533902838981,24.206167203878],["2015-12-31",2054.08,43.39,86.53,236.525,2.24,2224.7829278089,46.995896575415,93.721017070077,25.965424037124],["2015-11-30",2080.62,43.096666666667,87.906666666667,237.336,2.26,2245.8279922768,46.518682111016,94.886741792227,26.225851890972],["2015-10-31",2024.81,42.803333333333,89.283333333333,237.838,2.07,2180.9734222979,46.104539381848,96.169308258142,25.491441046067],["2015-09-30",1944.41,42.51,90.66,237.945,2.17,2093.4307689277,45.767992340667,97.608237723003,24.496752170486],["2015-08-31",2039.87,42.253333333333,92.076666666667,238.316,2.17,2192.7879220761,45.420835151647,98.979151892865,25.693658417058],["2015-07-31",2094.14,41.996666666667,93.493333333333,238.654,2.32,2247.9380311036,45.080989895413,100.35967970367,26.3811363364],["2015-06-30",2099.29,41.74,94.91,238.638,2.36,2253.6173464096,44.808477170442,101.88722013049,26.495895292785],["2015-05-31",2111.94,41.43,96.356666666667,237.805,2.2,2275.1389967621,44.631480362061,103.80257485124,26.806111379651],["2015-04-30",2094.86,41.12,97.803333333333,236.599,1.94,2268.2422722624,44.523320047845,105.89808151133,26.791371680192],["2015-03-31",2079.99,40.81,99.25,236.119,2.04,2256.7198666245,44.277490640313,107.68294403458,26.728605452928],["2015-02-28",2082.2,40.353333333333,100.27,234.722,1.98,2272.5632823084,44.042600927906,109.43709553216,26.995513699383],["2015-01-31",2028.18,39.896666666667,101.29,233.707,1.88,2223.2183358864,43.733298264494,111.03047325283,26.492295420383]],"collapse":null,"order":null,"database_id":175}}
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
data.dataset.data.forEach(element => {
tObject['date']=element[0];
tObject['spx'] = element[1];
tObject['rate']=element[5];
datamodel['mkt'].push(tObject); //creating an array of objects
tObject={};
});
/*
datamodel.mkt.forEach(element => {
datamodel["combined"].push(element);
});*/
for(var i=0;i<datamodel.mkt.length; i++)
{
datamodel.combined[i] = datamodel.mkt[i];
}
document.getElementById("foo").innerHTML = "Length of datamodel.mkt = " + datamodel.mkt.length + "<br> Length of datamodel.combined = " + datamodel.combined.length;
//console.log(datamodel);
}
<html>
<head></head>
<body onload="setData()">
<div id="foo"></div>
</body>
</html>

You can use map() or forEach() to get your work done. In "forEach(), you are pushing the objects, but the array is getting updated only by the last object. You can do something like this:
let data ={
"dataset": {
"id": 539984,
"dataset_code": "SPCOMP",
"database_code": "YALE",
"name": "S&P Composite",
"description": "This data set consists of monthly stock price, dividends, and earnings data and the consumer price index (to allow conversion to real values), all starting January 1871. Further info at http://www.econ.yale.edu/~shiller/data.htm.",
"refreshed_at": "2019-08-24T02:51:26.805Z",
"newest_available_date": "2019-08-31",
"oldest_available_date": "1871-01-31",
"column_names": [
"Year",
"S&P Composite",
"Dividend",
"Earnings",
"CPI",
"Long Interest Rate",
"Real Price",
"Real Dividend",
"Real Earnings",
"Cyclically Adjusted PE Ratio"
],
"frequency": "monthly",
"type": "Time Series",
"premium": false,
"limit": null,
"transform": null,
"column_index": null,
"start_date": "2015-01-01",
"end_date": "2018-09-30",
"data": [
[
"2018-09-30",
2901.5,
52.34,
130.39,
252.439,
3.0,
2944.5129194578,
53.115907704436,
132.32295004932,
32.6228911205
],
[
"2018-08-31",
2857.82,
51.89,
127.75333333333,
252.146,
2.89,
2903.555479266,
52.720428095231,
129.79784975768,
32.390276880301
],
[
"2018-07-31",
2793.64,
51.44,
125.11666666667,
252.006,
2.89,
2839.9251892812,
52.29226089855,
127.18960684468,
31.886366962159
],
[
"2018-06-30",
2754.35,
50.99,
122.48,
251.989,
2.91,
2800.1731263567,
51.838302217557,
124.51765553258,
31.630556496455
],
[
"2018-05-31",
2701.49,
50.66,
120.13333333333,
251.588,
2.976,
2750.8111875864,
51.58490120753,
122.32661136461,
31.243615074865
],
[
"2018-04-30",
2653.63,
50.33,
117.78666666667,
250.546,
2.87,
2713.3151215246,
51.462016206605,
120.43590997262,
30.970179293325
],
[
"2018-03-31",
2702.77,
50.0,
115.44,
249.554,
2.84,
2774.5457779178,
51.327818828791,
118.50566811191,
31.808409057643
],
[
"2018-02-28",
2705.16,
49.643333333333,
113.58666666667,
248.991,
2.86,
2783.2783925925,
51.076911163456,
116.86677128892,
32.03538233925
],
[
"2018-01-31",
2789.8,
49.286666666667,
111.73333333333,
247.867,
2.58,
2883.3787928607,
50.939898715844,
115.48122581868,
33.307343828031
],
[
"2017-12-31",
2664.34,
48.93,
109.88,
246.524,
2.4,
2768.7119778399,
50.846767708215,
114.18440293846,
32.086132007706
],
[
"2017-11-30",
2593.61,
48.676666666667,
108.94666666667,
246.669,
2.35,
2693.6268919585,
50.553775758202,
113.14795637068,
31.29891333388
],
[
"2017-10-31",
2557.0,
48.423333333333,
108.01333333333,
246.663,
2.36,
2655.6697042118,
50.291896484272,
112.18135979048,
30.920393290334
],
[
"2017-09-30",
2492.84,
48.17,
107.08,
246.819,
2.2,
2587.3975149806,
49.997167205523,
111.14172024844,
30.168114410679
],
[
"2017-08-31",
2456.22,
47.853333333333,
106.06,
245.519,
2.21,
2562.8872302144,
49.931478826486,
110.66590925753,
29.914959397497
],
[
"2017-07-31",
2454.1,
47.536666666667,
105.04,
244.786,
2.32,
2568.3429837695,
49.749588160679,
109.92981011986,
30.002220744019
],
[
"2017-06-30",
2433.99,
47.22,
104.02,
244.955,
2.19,
2545.5393875916,
49.384085342206,
108.78722061195,
29.748503240633
],
[
"2017-05-31",
2395.35,
46.94,
102.77666666667,
244.733,
2.3,
2507.4009520069,
49.135784201558,
107.58440805899,
29.313344980271
],
[
"2017-04-30",
2359.31,
46.66,
101.53333333333,
244.524,
2.3,
2471.7859389569,
48.884433123129,
106.37375574586,
28.904245956275
],
[
"2017-03-31",
2366.82,
46.38,
100.29,
243.801,
2.48,
2487.0074615157,
48.735183100151,
105.3827406881,
29.086921742465
],
[
"2017-02-28",
2329.91,
46.153333333333,
98.376666666667,
243.603,
2.42,
2450.2130769633,
48.536424530897,
103.4562687549,
28.655106525184
],
[
"2017-01-31",
2275.12,
45.926666666667,
96.463333333333,
242.839,
2.43,
2400.1214199531,
48.45000545629,
101.76329713308,
28.063573742124
],
[
"2016-12-31",
2246.63,
45.7,
94.55,
241.432,
2.49,
2383.8782004353,
48.49184501226,
100.32612573105,
27.865098223924
],
[
"2016-11-30",
2164.99,
45.476666666667,
92.73,
241.353,
2.14,
2298.0026949634,
48.27066293976,
98.427147425141,
26.850953531056
],
[
"2016-10-31",
2143.02,
45.253333333333,
90.91,
241.729,
1.76,
2271.1447214649,
47.958894050776,
96.34523552201,
26.525143085071
],
[
"2016-09-30",
2157.69,
45.03,
89.09,
241.428,
1.63,
2289.5427262476,
47.781705881256,
94.534136730205,
26.727873346479
],
[
"2016-08-31",
2170.95,
44.84,
88.366666666667,
240.849,
1.56,
2309.1508982288,
47.694477660277,
93.992016263302,
26.948872433724
],
[
"2016-07-31",
2148.9,
44.65,
87.643333333333,
240.628,
1.5,
2287.7964664337,
47.53600084986,
93.308254598384,
26.694003256096
],
[
"2016-06-30",
2083.89,
44.46,
86.92,
241.018,
1.64,
2214.9945027446,
47.257127579683,
92.388428457626,
25.840372927671
],
[
"2016-05-31",
2065.55,
44.266666666667,
86.76,
240.229,
1.81,
2202.7115000166,
47.206165783482,
92.521241190697,
25.69470992345
],
[
"2016-04-30",
2075.54,
44.073333333333,
86.6,
239.261,
1.81,
2222.3196911532,
47.190146430049,
92.72424778798,
25.922337543674
],
[
"2016-03-31",
2021.95,
43.88,
86.44,
238.132,
1.89,
2175.2039979402,
47.20589106042,
92.991732526498,
25.372298620188
],
[
"2016-02-29",
1904.42,
43.716666666667,
86.47,
237.111,
1.78,
2057.5877800903,
47.232689805618,
93.42456776573,
24.00260677729
],
[
"2016-01-31",
1918.6,
43.553333333333,
86.5,
236.916,
2.09,
2074.6144044725,
47.094950847558,
93.533902838981,
24.206167203878
],
[
"2015-12-31",
2054.08,
43.39,
86.53,
236.525,
2.24,
2224.7829278089,
46.995896575415,
93.721017070077,
25.965424037124
],
[
"2015-11-30",
2080.62,
43.096666666667,
87.906666666667,
237.336,
2.26,
2245.8279922768,
46.518682111016,
94.886741792227,
26.225851890972
],
[
"2015-10-31",
2024.81,
42.803333333333,
89.283333333333,
237.838,
2.07,
2180.9734222979,
46.104539381848,
96.169308258142,
25.491441046067
],
[
"2015-09-30",
1944.41,
42.51,
90.66,
237.945,
2.17,
2093.4307689277,
45.767992340667,
97.608237723003,
24.496752170486
],
[
"2015-08-31",
2039.87,
42.253333333333,
92.076666666667,
238.316,
2.17,
2192.7879220761,
45.420835151647,
98.979151892865,
25.693658417058
],
[
"2015-07-31",
2094.14,
41.996666666667,
93.493333333333,
238.654,
2.32,
2247.9380311036,
45.080989895413,
100.35967970367,
26.3811363364
],
[
"2015-06-30",
2099.29,
41.74,
94.91,
238.638,
2.36,
2253.6173464096,
44.808477170442,
101.88722013049,
26.495895292785
],
[
"2015-05-31",
2111.94,
41.43,
96.356666666667,
237.805,
2.2,
2275.1389967621,
44.631480362061,
103.80257485124,
26.806111379651
],
[
"2015-04-30",
2094.86,
41.12,
97.803333333333,
236.599,
1.94,
2268.2422722624,
44.523320047845,
105.89808151133,
26.791371680192
],
[
"2015-03-31",
2079.99,
40.81,
99.25,
236.119,
2.04,
2256.7198666245,
44.277490640313,
107.68294403458,
26.728605452928
],
[
"2015-02-28",
2082.2,
40.353333333333,
100.27,
234.722,
1.98,
2272.5632823084,
44.042600927906,
109.43709553216,
26.995513699383
],
[
"2015-01-31",
2028.18,
39.896666666667,
101.29,
233.707,
1.88,
2223.2183358864,
43.733298264494,
111.03047325283,
26.492295420383
]
],
"collapse": null,
"order": null,
"database_id": 175
}
}
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
(data['dataset']['data']).map((mkt, index) => {
tObject['date'] = mkt[0];
tObject['spx'] = mkt[1];
tObject['rate'] = mkt[5];
datamodel['mkt'].push(JSON.parse(JSON.stringify(tObject)))
})
console.log(datamodel['mkt'].length)
data is the JSON data which I got after hitting your API. I hope it helps.

How to display label on mapbox map polygon with GeoJSON

I want to display a custom label on mapbox map using GeoJSON data, I have added name under feature properties with a color which I want to show as polygon fill color for a zone, I have no Idea how to do it, I have searced a lot but found nothing on this topic, I am very new to MapBox need your help:
JSFiddle Demo
Here is code
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [55.2324,25.073], // starting position
zoom: 12 // starting zoom
});
// Draw map
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: false,
trash: false
}
});
map.addControl(draw);
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
var featureCollection = {
"type": "FeatureCollection",
"features": [
{
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
53.34234777435083,
24.03841558494339
],
[
53.63384239941877,
23.980642073807147
],
[
53.87583793720404,
24.01330148955786
],
[
53.67509163882116,
23.678780532068288
],
[
53.691591334582085,
23.436787672921128
],
[
53.13885152669846,
23.55531902255817
],
[
53.136101577392935,
23.980642073807147
],
[
53.34234777435083,
24.03841558494339
]
]
]
},
"properties":{
"id":1,
"name":"East Zone",
"color":"#ccccff",
"is_shutdown":false,
"is_active":true
}
},
{
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
54.41277432573249,
24.17109802219355
],
[
54.40221419428706,
23.93479580896283
],
[
54.40190486287914,
23.752296533243648
],
[
54.24386990803268,
23.813378685606605
],
[
54.12084722599417,
24.09616522759087
],
[
54.41277432573249,
24.17109802219355
]
]
]
},
"properties":{
"id":2,
"name":"West Zone",
"color":"#ffcc33",
"is_shutdown":false,
"is_active":true
}
},
{
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
55.01084972481446,
24.07274717129389
],
[
55.04794143668033,
23.858563232484837
],
[
54.967647759445896,
23.5905998890601
],
[
54.901748431837575,
23.38814119539755
],
[
54.58976976470866,
23.47439441289948
],
[
54.41317073001387,
23.67920953874405
],
[
54.43980120450599,
24.219099932016256
],
[
54.72318029018409,
24.176836888624475
],
[
55.01084972481446,
24.07274717129389
]
]
]
},
"properties":{
"id":3,
"name":"South Zone",
"color":"#07ac25",
"is_shutdown":false,
"is_active":true
}
}
]
};
var bbox = turf.bbox(featureCollection);
map.on('load', function () {
featureCollection.features.forEach(function (feature) {
draw.add(feature);
})
});
map.fitBounds(bbox, { padding: 40});

You need to define the a Point representing the labels for your polygons and use a Symbol layer. One way to generate the label points is https://github.com/mapbox/polylabel

You can use turf library to find the centroid of the polygon then you can use Symbol layer.

Visualizing Linestrings with properties in Leaflet

I want to visualize the following GeoJSON-Object that is sent to my Leaflet/JavaScript application. How can I visualize all the linestrings, showing the properties.name parameter for each linestring (e.g., by ToolTip).
{"features":[{"type":"Feature","properties":{"name":"0"},"geometry":{"type":"LineString","coordinates":[[10.941445541381836,52.438697814941406],[10.941454124450684,52.4387092590332],[10.941451263427734,52.43870544433594],[10.941445541381836,52.438697814941406],[10.941254806518555,52.440738677978516]]}},{"type":"Feature","properties":{"name":"0"},"geometry":{"type":"LineString","coordinates":[[10.941445541381836,52.438697814941406],[10.941454124450684,52.4387092590332],[10.941451263427734,52.43870544433594],[10.941445541381836,52.438697814941406],[10.941254806518555,52.440738677978516]]}}}
Any help would be great!
Thanks

You're not using GeoJSON correctly. If you have multiple feature you should use a feature collection : https://geojson.org/geojson-spec.html
Then use this website to have the correct format : https://jsonformatter.curiousconcept.com/
Then if you want to add tooltip refer to this tutorial : http://leafletjs.com/examples/geojson/
var geojsonFeature = {
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"LineString",
"coordinates":[
[
10.941445541381836,
52.438697814941406
],
[
10.941454124450684,
52.4387092590332
],
[
10.941451263427734,
52.43870544433594
],
[
10.941445541381836,
52.438697814941406
],
[
10.941254806518555,
52.440738677978516
]
]
},
"properties":{
"name":"0"
}
},
{
"type":"Feature",
"geometry":{
"type":"LineString",
"coordinates":[
[
10.941445541381836,
52.438697814941406
],
[
10.941454124450684,
52.4387092590332
],
[
10.941451263427734,
52.43870544433594
],
[
10.941445541381836,
52.438697814941406
],
[
10.941254806518555,
52.440738677978516
]
]
},
"properties":{
"name":"0"
}
}
]
};
function onEachFeature(feature, layer) {
// This is where it loop through your features
if (feature.properties) {
// If there is a properties document we bind a tooltip with your property : name
layer.bindTooltip(feature.properties.name);
}
}
L.geoJSON(geojsonFeature, {
onEachFeature: onEachFeature
}).addTo(map);

Load JSON file and append it to a map

I want to load in a json file and append it to a Leaflet-Map.
<input type='file' accept='Json' onchange='loadFile(event)'>
I'm struggling to work with the content of the JSON file, once it is uploaded.
An example of a JSON file would be :
{
"type": "FeatureCollection",
"features":
[
{
"type": "Feature",
"properties": {
"name": "Lagoa Stadium",
"coordinate":"-22.975801, -43.217316",
"venue_type": "Outdoor area",
"event": [{"name":"Canoe Sprint","date_start":"2016-08-15", "date_end":"2016-08-20"},
{"name":"Rowing","date_start":"2016-08-6", "date_end":"2016-08-13"}],
"link": "https://www.rio2016.com/en/venues/lagoa-stadium",
"images":["http://secure.rio2016.com/sites/default/files/imagecache/360x270_maps_cities/lagoa_aereas_secao01_alexferro_05032015-9156_1.jpg", "https://upload.wikimedia.org/wikipedia/commons/6/6a/1_lagoa_rodrigo_de_freitas_rio_de_janeiro_2010.jpg","http://www.rio-de-janeiro-travel-information.com/images/marina-da-gloria-rio-de-janeiro-2016-olympics.jpg"],
"capacity": "14,000",
"parking": "-22.983465, -43.198912"
},
"geometry":
{
"type": "Polygon",
"coordinates": [
[
[
-43.21497917175292,
-22.979493188378516
],
[
-43.21643829345703,
-22.9790190701661
],
[
-43.21772575378418,
-22.97870299043356
],
[
-43.217811584472656,
-22.977596705547032
],
[
-43.21695327758788,
-22.976411390260754
],
[
-43.2161808013916,
-22.975068020367633
],
[
-43.21592330932617,
-22.971828073334315
],
[
-43.216352462768555,
-22.970089533152084
],
[
-43.21738243103027,
-22.968667074553263
],
[
-43.21703910827637,
-22.967323627688746
],
[
-43.21566581726074,
-22.96558502957624
],
[
-43.21446418762207,
-22.96432058054304
],
[
-43.212318420410156,
-22.96337223600826
],
[
-43.21051597595215,
-22.962977090489098
],
[
-43.20914268493652,
-22.96313514883533
],
[
-43.2063102722168,
-22.962819031958123
],
[
-43.20510864257812,
-22.96305611968531
],
[
-43.204078674316406,
-22.964083495032888
],
[
-43.20356369018555,
-22.966138222309887
],
[
-43.20356369018555,
-22.96740265434445
],
[
-43.20845603942871,
-22.971828073334315
],
[
-43.207340240478516,
-22.974830953706174
],
[
-43.204593658447266,
-22.973803660034452
],
[
-43.201160430908196,
-22.974830953706174
],
[
-43.20047378540039,
-22.97609530442847
],
[
-43.20004463195801,
-22.97751768485142
],
[
-43.20124626159668,
-22.978623970384902
],
[
-43.202362060546875,
-22.979256129480273
],
[
-43.207426071166985,
-22.980441419812312
],
[
-43.214378356933594,
-22.980125343407142
],
[
-43.21497917175292,
-22.979493188378516
]
]
]
}
}
]
}
How do I read out the content of this file and load it into my Map?
I managed to load a JSON file that is on my server by using this:
$.getJSON('CompleteList.json', function (geojson) {
jsonlayer = L.geoJson(geojson, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
Right now I loaded in the file and saved it in a variable... But what now?
var loadFile = function(event) {
// Init
var input = event.target;
var reader = new FileReader();
// Read the file
reader.readAsText(input.files[0]);
// Invoked when file is loading.
reader.onload = function(){
// parse file to JSON object
var jsonObject = reader.result;
console.log(jsonObject);
};
};
I hope I'm not missing anything and that it is not too much of a stupid question :D
It is too much code to post my whole project but right now it looks like this:

I guess once you included the Leaflet-Map library, JSON object will have function addTo(), so you need to parse the json object first.
var loadFile = function(event) {
// Init
var input = event.target;
var reader = new FileReader();
// Read the file
reader.readAsText(input.files[0]);
// Invoked when file is loading.
reader.onload = function(){
// parse file to JSON object
var jsonObject = reader.result;
var json = JSON.parse(jsonObject);
jsonlayer = L.geoJson(json, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}).addTo(map);
console.log(jsonObject);
};
};

You successfully read the content of your user file as text.
Now you need to convert that text into a JS object (actually GeoJSON, but it is really just a plain JS object that follows a specific convention).
For that, you simply use JSON.parse().
Then you can feed it into Leaflet L.geoJson() factory.

Create a tapered line with OpenLayers and GeoJSON

I am trying to create an offline map through the following steps:
Download data from Natural Earth Data
Convert the shape files to GeoJSON
Add the GeoJSON files as layers in OpenLayers3
I am struggling to get the rivers right, I can display them, but only as a line with a fixed width. However, when looking at the file I created from Natural Earth Data I see that there are in fact many short lines, and each has a width (strokeweig) specified. See snippet below for illustration.
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "strokeweig": 0.20000000300000001, "scalerank": 5, "featurecla": "River", "name": null, "dissolve": "River_untitled_77", "note": "_untitled_77" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.991327277300684, 46.177440090512803 ], [ -73.078557095009359, 46.160128485695026 ], [ -73.146304897744017, 46.123541571632373 ], [ -73.177181566038399, 46.070624904965499 ], [ -73.163952399371681, 46.044166571632061 ] ] } },
{ "type": "Feature", "properties": { "strokeweig": 0.149999991, "scalerank": 5, "featurecla": "River", "name": "Ebro", "dissolve": "RiverEbro", "note": null }, "geometry": { "type": "LineString", "coordinates": [ [ -4.188860236009816, 43.011173407557422 ], [ -4.10225053548865, 43.001484076502706 ], [ -4.054759894212424, 42.952520656906145 ], [ -4.017449510097691, 42.861053371749534 ], [ -3.96267249186829, 42.825034898442098 ], [ -3.890377163091955, 42.844413560551544 ], [ -3.821957566737524, 42.841855577153098 ], [ -3.757387864588821, 42.81728343359832 ], [ -3.70925126790894, 42.832631333988999 ], [ -3.677521938481732, 42.887899278325165 ], [ -3.626775681971111, 42.89800202083822 ], [ -3.52213090658006, 42.845447089197393 ] ] } },
....
]
So, my question is twofold:
How do I work with this types of data in the first place to display a line with a width as specified in the strokeweig property of a features array item?
How do I deal with this value when zooming in and out?
Thanks,
Hendrik

You can find an example here http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html that is very near to your needs.
There is not a built-in solution. I can imagine at least two ways: Instead of creating one layer for the whole rivers featurecollection, create one layer for each "scalerank", and set their min/maxResolution accordingly. Otherwise, you can listen to the MapView change:resolution event, and add/remove or show/hide the features accordingly.

The code snippet below does sort of what I wanted:
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'maps/rivers.json',
format: new ol.format.GeoJSON()
}),
style: function(feature, resolution) {
var strokeWeight, scaleRank, width, style;
strokeWeight = feature.get('strokeweig');
scaleRank = feature.get('scalerank');
// strokeWeight is multiplied by scaleRanks because I think this is why this property was included in the GeoJSON
// This number is then corrected for different zoom levels, max-resolution~611.5 based on map.MaxZoom=18
// The calculation with dividers represents the amount of times the current resolution is SMALLER than
// the max-resolution. Note that the value 611.5 will need to be changed when we decide the
// map.maxZoom needs to be increased
width = strokeWeight * scaleRank * (611.5 / resolution));
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgb(35, 51, 60)',
width: width
})
});
return [style];
}
});
I am not super happy with the formula that computes the width. Obviously taking a static value is not ideal and I don't know how the properties actually should have been combined to produce the correct line width.
I think I will be looking into the solution that Francesco suggested to improve it. This still won't be ideal because the max scaleRank in the file is 6 and I will be allowing zoom up to 18 (I know it won't be a very detailed map but that's OK).
Many thanks to Francesco for his help!!!!!

Categories