<head>
<title>Untitled</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<style type="text/css">
<!--
#map {
width: 500px;
height: 500px;
}
-->
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
// create the map object itself
centerCoordinates = new L.LatLng(41.307, -72.928);
var map = new L.Map("map", {
center: centerCoordinates,
zoom: 14,
zoomControl: false
});
// position the zoom controls in the bottom right hand corner
L.control.zoom({
position: 'bottomright',
zoom: 14,
maxZoom: 20,
minZoom: 12,
}).addTo(map);
map.addLayer(new L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
}));
// specify the coordinates of the overlay's bounding box
var upperLeft = L.latLng(41.329785, -72.927220);
var lowerLeft = L.latLng(41.304414, -72.945686);
var upperRight = L.latLng(41.319186, -72.903268);
var lowerRight = L.latLng(41.293816, -72.921718);
/*
// create a red polyline from an array of LatLng points
var polyline = L.polyline(
[upperLeft, upperRight, lowerRight, lowerLeft, upperLeft], {
color: 'red',
className: 'bounding-box',
weight: 2
}
).addTo(map);
*/
//---CREATE SVG---
map._initPathRoot() //---creates an svg layer---
var MySVG=document.querySelector("svg") //---access svg element---
var NS="http://www.w3.org/2000/svg"
//---place svg elems in here---
var SvgElemG=document.createElementNS(NS,"g")
MySVG.appendChild(SvgElemG)
//---zooming the map's SVG elements---
map.on("viewreset", adjustSVGElements);
//---add svg polygon---
var polygon=document.createElementNS(NS,"polyline")
polygon.setAttribute("stroke-width",1)
polygon.setAttribute("fill","none")
polygon.setAttribute("stroke","red")
//---convert latLng to x,y---
var xyUL=map.latLngToLayerPoint(upperLeft)
var xyLL=map.latLngToLayerPoint(lowerLeft)
var xyLR=map.latLngToLayerPoint(lowerRight)
var xyUR=map.latLngToLayerPoint(upperRight)
var points=[xyUL.x,xyUL.y,xyLL.x,xyLL.y,xyLR.x,xyLR.y,xyUR.x,xyUR.y,xyUL.x,xyUL.y].toString()
polygon.setAttribute('points',points)
//--required for zoom---
var svgPnt=L.point(0,0) //--reference for translate--
var latLng=map.layerPointToLatLng(svgPnt)
var lat=latLng.lat
var lng=latLng.lng
polygon.setAttribute("lat",lat)
polygon.setAttribute("lng",lng)
//---retain the zoom level at its creation--
polygon.setAttribute('initZoom',map.getZoom())
SvgElemG.appendChild(polygon)
//--- on map zoom - fired via map event: viewreset---
function adjustSVGElements()
{
var mapZoom=map.getZoom()
var svgElems=SvgElemG.childNodes
for(var k=0;k<svgElems.length;k++)
{
var svgElem=svgElems.item(k)
var lat=parseFloat(svgElem.getAttribute("lat"))
var lng=parseFloat(svgElem.getAttribute("lng"))
var latLng= new L.latLng(lat, lng)
var transX=map.latLngToLayerPoint(latLng).x
var transY=map.latLngToLayerPoint(latLng).y
//---trash previous transform---
svgElem.setAttribute("transform","") //---required for IE
svgElem.removeAttribute("transform")
var transformRequestObj=MySVG.createSVGTransform()
var animTransformList=svgElem.transform
//---get baseVal to access/place object transforms
var transformList=animTransformList.baseVal
//---translate----
transformRequestObj.setTranslate( transX, transY)
transformList.appendItem(transformRequestObj)
transformList.consolidate()
//---scale---
var initZoom=parseFloat(svgElem.getAttribute("initZoom"))
var scale = (Math.pow(2, mapZoom)/2)/(Math.pow(2, initZoom)/2);
transformRequestObj.setScale(scale,scale)
transformList.appendItem(transformRequestObj)
transformList.consolidate()
}
}
</script>