SVG/Vector map indoor navigational routing

Question

I've been searching the web for tutorials or methods on how to to implement my own point to point navigation system for an SVG-based indoor floor plan map. I have searched the web but the only options work with google maps. However I created my map using Illustrator as an SVG image using paths/vectors. I don't need to implement any navigational instructions for the user, just a simple route from one point to another. There must be a way to use the vectors to plot points on the map that the navigational path can take for turns etc.

Any advice appreciated

Thanks

Economically

Answer 1

Yes! You can do this with JavaScript, as well as add event listeners and do other DOM manipulation similar to with a normal HTML page. (See the bottom of this answer for how to draw a line on the SVG given two points.)

I am working on a project that does exactly this. The user is able to enter their starting room number and destination room number, and the route is plotted on the SVG.

It was a bit tedious, but what we did was put circle elements on the SVG. There were elements outside of each doorway, and also at hallway intersections.

A typical element is as follows.

    <circle
        id="route3287-1"
        style="fill:#000000;stroke:none"
        cx="2014.0000"
        cy="239.6"
        r=".05"
        data-neighbors="route3296-1,06-07" />

Note that the radius attribute is small enough to where it won't be seen on the SVG (unless the user decides to zoom in alot). We also manually entered into the data-neighbors attribute the ids of adjacent points. This is because our back end parses the SVG file, builds a graph using these points, and uses Dijkstra's algorithm to generate the route. We used the cx and cy attributes to calculate the distance between nodes on the graph.

Here is a close up of what the points look like (when the radius is big enough to see them)

Now, when a route is generated we are simply drawing lines on the SVG between each of the points. We put each of the lines in a group so that we can reference it by id later and remove the entire route when we decide to draw a new one.

Here is an example. Where "svg" is a reference to the SVG element, here is how we draw a line between two points (x1,y1,x2,y2), you could easily iterate through a list of points and draw all the lines in a similar fashion.

    var newElement = svg.createElementNS('http://www.w3.org/2000/svg', 'path');
     newElement.setAttribute('d', 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2);
     newElement.style.stroke = '#000000';
     newElement.style.strokeWidth = '15px'; 
     svg.appendChild(newElement);

Goodwin

Answer 2

You can manipulate the SVG with JS and CSS and this way add more interactions with the SVG. SVG is XML an can be traversed with JS as normal DOM tree, so you can create functions to handle your requirements. You can even place the SVG you've created as Layer in Google Maps.

The article uses simple example for FloorMaps. Interface with SVG

Merilee

Answer 3

You can draw a SVG and with javascript add be interative

https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines

Bimbo