1

I have a dwg (I can change the file format to svg or other formats if needed) file that I want to show on my web page. After this file is displayed in the page, I want to be able to zoom in, zoom out, pan and put links that request the api where necessary. In fact, it looks like information and links about the relevant place appear when you hover over the landmarks on Google maps.

How should I go about doing this job?

Ümit Yılmaz
  • 19
  • 4
  • You can't. DWG is a proprietary AutoDesk file-format that web-browsers do not natively support. There *are* JavaScript and `` applications which parse and display DWG files, but to my knowledge the only _reliable_ and supported implementation is from AutoDesk themselves and they charge a lot of money for it... – Dai Aug 26 '21 at 19:17
  • I take that back... I found these: https://cadviewerjs.com/cv-js_api/index_cvjs_24_getting_started.html http://www.html5cad.org/ – Dai Aug 26 '21 at 19:18
  • If you can change the format, change it to SVG. – Robert Longson Aug 26 '21 at 19:19
  • I can convert the file to svg format. There is no problem with this. After converting to svg, how should I go about doing the operations I mentioned, such as zooming in, zooming out, pan, adding request links where I want? – Ümit Yılmaz Aug 26 '21 at 19:42
  • With javascript and CSS. Asking for all of those things is too broad a question though. – Robert Longson Aug 27 '21 at 06:10

2 Answers2

1

If you can translate the DWG file to DXF (there are several tools to do this) then you can use MapServer to render it on a web map compatible way. Have a look at MS4W for an easy way to install and configure MapServer on Windows. Since you want pop-ups, I'd recommend using Leaflet as the client side browser tool kit for providing pan, zoom, pop-ups etc to communicate to MapServer. figuring out the coordinate system of the DWG file will likely be the hardest part.

Use this method if integrating your DWG with other mapping data (roads, etc) is important. Otherwise look for something easier to implement.

Brent Fraser
  • 51
  • 3
0

There are libraries that let you easily zoom and pan an SVG image. For example svg-pan-zoom.

As for the links, you would need to do a bit of extra work. IIRC DXF files don't have the concept of a whole element that you could hover over. All the lines in the file are discrete object. So, if I am remembering that correctly, you may need to load the SVG into an editor and add elements on top of the diagram that correspond to your hover areas. They don't need to be visible. They can be transparent and still hoverable. You just need to then add the interactivity. Ie.

  • Optionally add hover effects with CSS.
  • Add a mouseover or click event handling to implement the link handling, or
  • use standard SVG <a> linking instead.
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181