JointJS with Leaflet

[Jonathan de Flaugergues]

Hi all, 

I would like to embedded the "leaflet" javascript library into my grap like background geolocalized.

But when I do that, I've my jointjs graph under my leaflet map.

Can I use leaflet with JointJS and how ?

Thanks a lot for yours answers

Jonathan.

Enter code here...

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

    el: $('#paper'),

    width: 640,

    height: 400,

    gridSize: 1,

    model: graph

});

var rb = new joint.shapes.basic.Rect({

    position: { x: 100, y: 100 },

    size: { width: 80, height: 40 },

    attrs: { rect: { fill: 'blue' }}

});

var map = L.map('paper').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

}).addTo(map);

graph.addCell(rb);

[Vladimír Talaš]

Hi, 

I affraid this couldn't be done so easily. You are trying to put paper (jointjs view)  above to leaflet view and this will not work as both libraries have own implementations of zooming, panning etc. and you have to synchronize it somehow to make it work. 

What I think it could work is to use only jointjs graph for the logic of creating graph then render the result using leaflet. Correct position of graph elements within the map should be able achieved by a mapping between coordinates in graph and latitude-longitude. 

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Vladimir Talas

Client IO

http://client.io

[Hiten Patel]

Helloz,

We kind of done the Leaflet based integration with JointJs using the openmapi layers.

Here is the codepen link for the same:

https://codepen.io/saranshgupta01/pen/vjmmRz?editors=0110

Hope it help!