Import SVG Paths into the Leaflet World Map

This places svg paths that have been created in another application, and locates them in the Leaflet map. The imported paths must include two(2) Key Points that are also shown on the Leaflet Map. These points allow for the imported paths to be properly located. This example uses two street intersections in nearby the Yale University Campus in New Haven, Conn. as the key points. SVG paths have been placed at the Yale Law School.

1). Another application has created SVG paths related to the Yale Law School.
2). The Leaflet Map is set so the initial viewing area is the Yale Campus in New Haven, Conn at zoom level 17.
3.) The SVG element is added via initPathRoot, creating the SVG layer
4.) Two Key Points are placed at two street intersections.
  4a.) A red/dashed line is shown connecting the two points in the map.
NOTE: Exact latitude/longitude of street intersections are available via, by providing a nearby latitude/longitude:>&lng=myNearbyLng&username=myUserName
This api, called via an XMLHTTPRequest will return a JSON string similar to:
{"intersection":{"street2Bearing":"290","lng":"-72.9271193","distance":"0","highway1":"residential","highway2":"secondary","street1":"High Street","street2":"Grove Street","street1Bearing":"208","lat":"41.3123954"}}
5.) An SVG file, containing the added paths and key points, is called into the map via an XMLHTTPRequest.
  5a.) The two(2) imported key points include their x,y values in the svg file are then added to the map, via a blue/dashed connecting line.
  5b.) The imported key line and the imported paths are shown with no tranforms.
6.) Select . The line created via the imported key points is then transformed so it 'matches' the map's key line and the following transforms occur:
7.) The <g> element SvgElemG which contains the imported paths is transformed via the above.
8.) All svg paths from the svg file are shown in the above group at their desired location.
9.) However, to assure the added paths track during map zooming, each element's related point values are re-computed via pathSegList and the path's matrix transform.
  9a.) This will remove all transforms from the paths, using their 'native' values for placement and size. All paths will now be automatically located and sized as the map is zoomed/panned.

SVG File:

SVG Source: Javascript:
OK in:IE11/CH40/FF35