javascript - Plotly: Create map based on GeoJSON file - Stack Overflow

admin管理员组

文章数量:1404073

I've found a GeoJSON file containing all cities in The Netherlands. I'm now trying to plot this map using Plotly, but I can't seem to figure out how to do this. I know it's possible to set the scope on a specific country, but Plotly's default map doesn't seem to contain the individual cities for each country.

I'm working based on this JSFiddle I would elsewhere on Stackoverflow. I know the data is not relevant for The Netherlands, but that doesn't matter at this moment: all I want is a map that looks somewhat like this (but I like to do it in Plotly, since Plotly's supported in Python).

Any help is greatly appreciated!

Plotly.d3.csv('.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

 var data = [{
              type: 'choropleth',
              locations: unpack(rows, 'CODE'),
              z: unpack(rows, 'GDP (BILLIONS)'),
              text: unpack(rows, 'COUNTRY'),
              colorscale: [[0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'],[0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'],[0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']],
              autocolorscale: false,
              reversescale: true,
              marker: {
                line: {
                  color: 'rgb(180,180,180)',
                  width: 0.5
                }
              },
              tick0: 0,
              zmin: 0,
              dtick: 1000,
              colorbar: {
                autotic: false,
                tickprefix: '$',
                title: 'GDP<br>Billions US$'
              }
          }];

console.log(data.locations);
  var layout = {
          title: '2014 Global GDP<br>Source: <a href=".html"> CIA World Factbook</a>',
          geo:{
            showframe: false,
            showcoastlines: false,
            projection:{
              type: 'mercator'
            }
          }
      };
      Plotly.plot(myDiv, data, layout, {showLink: false});
  });

I've found a GeoJSON file containing all cities in The Netherlands. I'm now trying to plot this map using Plotly, but I can't seem to figure out how to do this. I know it's possible to set the scope on a specific country, but Plotly's default map doesn't seem to contain the individual cities for each country.

I'm working based on this JSFiddle I would elsewhere on Stackoverflow. I know the data is not relevant for The Netherlands, but that doesn't matter at this moment: all I want is a map that looks somewhat like this (but I like to do it in Plotly, since Plotly's supported in Python).

Any help is greatly appreciated!

Plotly.d3.csv('https://raw.githubusercontent./plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

 var data = [{
              type: 'choropleth',
              locations: unpack(rows, 'CODE'),
              z: unpack(rows, 'GDP (BILLIONS)'),
              text: unpack(rows, 'COUNTRY'),
              colorscale: [[0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'],[0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'],[0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']],
              autocolorscale: false,
              reversescale: true,
              marker: {
                line: {
                  color: 'rgb(180,180,180)',
                  width: 0.5
                }
              },
              tick0: 0,
              zmin: 0,
              dtick: 1000,
              colorbar: {
                autotic: false,
                tickprefix: '$',
                title: 'GDP<br>Billions US$'
              }
          }];

console.log(data.locations);
  var layout = {
          title: '2014 Global GDP<br>Source: <a href="https://www.cia.gov/library/publications/the-world-factbook/fields/2195.html"> CIA World Factbook</a>',
          geo:{
            showframe: false,
            showcoastlines: false,
            projection:{
              type: 'mercator'
            }
          }
      };
      Plotly.plot(myDiv, data, layout, {showLink: false});
  });

• javascript
• python
• plotly

Share Improve this question Follow asked Mar 11, 2016 at 13:31 TheLeonKingTheLeonKing 3,61188 gold badges3535 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In plotly, you can use scope to limit the base map that is shown. Unfortunately, out of the box, only a few scopes are available listed here: https://plot.ly/python/reference/#layout-geo-scope

To limit what is shown as the base map, there is a workaround which employs using lonaxis and lataxis as shown here: http://codepen.io/etpinard/pen/XKamdk. This issue is documented here for reference: https://github./plotly/plotly.js/issues/719.

To get from geoJSON to points, simple use the coordinates in geoJSON as lon and lat in your data variable. Also, if you are trying to do a scatter map of cities, you should use data type: 'scattergeo' rather than type: 'choropleth'. Here is a link to a tutorial from plotly: https://plot.ly/javascript/scatter-plots-on-maps/.

本文标签： javascriptPlotly Create map based on GeoJSON fileStack Overflow