diff --git a/README.md b/README.md index 2217ca54..a85e3be0 100644 --- a/README.md +++ b/README.md @@ -465,6 +465,22 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc You can customize the style of GeoJSON features using `style` property. The list of all available properties can be found in the [Leaflet documentation](https://leafletjs.com/reference.html#geojson). +- `bookmarkableActions` + + Configuration for adding url fragments when a node is clicked. + + ```JS + bookmarkableActions:{ + enabled: boolean, + id: string + } + ``` + + You can enable or disable adding url fragments by setting enabled to true or false. When enabled, the following parameters are added to the URL: + 1. id – A prefix used to uniquely identify the map. + 2. nodeId – The id of the selected node. + When a URL containing these fragments is opened, the click event associated with the given nodeId is triggered, and if the map is based on Leaflet, the view will automatically center on that node. + - `onInit` The callback function executed on initialization of `NetJSONGraph` instance. diff --git a/index.html b/index.html index cb3c8b16..0173dfc7 100644 --- a/index.html +++ b/index.html @@ -181,6 +181,11 @@

NetJSONGraph.js Example Demos

>Indoor map +
+ Indoor map as Ovelay of Geographic map +
Leaflet plugins { data.links.map((link) => { link.properties = link.properties || {}; diff --git a/public/example_templates/netjsonmap-indoormap-overlay.html b/public/example_templates/netjsonmap-indoormap-overlay.html new file mode 100644 index 00000000..04cfa5e8 --- /dev/null +++ b/public/example_templates/netjsonmap-indoormap-overlay.html @@ -0,0 +1,201 @@ + + + + Network Map Visualization + + + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/public/example_templates/netjsonmap-indoormap.html b/public/example_templates/netjsonmap-indoormap.html index 84c072f6..23d7df73 100644 --- a/public/example_templates/netjsonmap-indoormap.html +++ b/public/example_templates/netjsonmap-indoormap.html @@ -106,6 +106,10 @@ ], }, }, + bookmarkableActions: { + enabled: true, + id: "indoorMap" + }, // Convert to internal json format prepareData: function (data) { @@ -117,25 +121,23 @@ }); }, - onReady: function presentIndoormap() { + onReady: async function presentIndoormap() { const netjsonmap = this.leaflet; const image = new Image(); const imageUrl = "../assets/images/floorplan.png"; image.src = imageUrl; + await image.decode() + const aspectRatio = image.width / image.height; + const h = 700; + const w = aspectRatio * h; + const zoom = netjsonmap.getMaxZoom() - 1; + const bottomLeft = netjsonmap.unproject([0, h * 2], zoom); + const upperRight = netjsonmap.unproject([w * 2, 0], zoom); + const bounds = new L.LatLngBounds(bottomLeft, upperRight); - image.onload = function () { - const aspectRatio = image.width / image.height; - const h = 700; - const w = aspectRatio * h; - const zoom = netjsonmap.getMaxZoom() - 1; - const bottomLeft = netjsonmap.unproject([0, h * 2], zoom); - const upperRight = netjsonmap.unproject([w * 2, 0], zoom); - const bounds = new L.LatLngBounds(bottomLeft, upperRight); - - L.imageOverlay(imageUrl, bounds).addTo(netjsonmap); - netjsonmap.fitBounds(bounds); - netjsonmap.setMaxBounds(bounds); - }; + L.imageOverlay(imageUrl, bounds).addTo(netjsonmap); + netjsonmap.fitBounds(bounds); + netjsonmap.setMaxBounds(bounds); // Remove any default tile layers and show only the floorplan image. netjsonmap.eachLayer((layer) => { diff --git a/public/example_templates/netjsonmap.html b/public/example_templates/netjsonmap.html index b88f0c94..8597e923 100644 --- a/public/example_templates/netjsonmap.html +++ b/public/example_templates/netjsonmap.html @@ -71,7 +71,10 @@