cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
2112
Views
0
Helpful
3
Replies

D3 Geomap Integration?

xamerten
Cisco Employee
Cisco Employee

Hi,

I was looking at the options of the adding a map to the topology. Today it looks like you only support the AlbersUSA map?

Documentation seems also to state it requires D3 libs.

Would there be an easy to get the global geo map from D3 as background in the topology services instead of the USA only map?

Below would be already a good start I assume, but no idea how I could put this into NextUI and if the license would even alow me to do so.

d3.geomap - Create Geographic Maps for the Web

Any hints welcome. Would be great if they just included is out of the box in NextUI too.

I like the style of the artzub one even more: http://d3.artzub.com/wbca/

Thanks,

Xavier

3 Replies 3

aaikepae
Cisco Employee
Cisco Employee

Hi Xavier,

Actually  NeXt support global geo map. Because of performance issue, I removed those from documentation but code is still there. Source code : next/WorldMapLayout.js at master · opendaylight/next · GitHub

And an example : World Map - JSFiddle 

You need to do is register a WorldMap layout when topo is ready. and then use 'WorldMap' layout. You need to put the json file to you server.

topo.registerLayout('WorldMap', new nx.graphic.Topology.WorldMapLayout())

layoutType: 'WorldMap',

layoutConfig: {

     longitude: 'model.longitude',

     latitude: 'model.latitude',

     worldTopoJson: '//bl.ocks.org/mbostock/raw/4090846/world-50m.json'

}

P.S. The performance of Global map is quite bad, so i have two different approach.

1. I use Canvas/WebGL to rendering the map. Zooming performance is quit good, but not fully developed yet. Once I finished, i will commit that to code repo.

2. Use leafletjs as an background. Not deep dive into this, if you are interested, we could work on this together.

Abu

I am interested in this as well, may i have some pointers on how to start (is it just a layer?)

Hi Mohamad,

Could you provide more details about your project?