I tried to convert this SVG image Stockholm City border SVG (Stockholm City border) to Google map Polygon.
But final polygon is not ok. There is the code:
var width = 735, // width of SVG
height = 682; // height of SVG
function toLongitude(x) {
return x / height + 18.0780778;
}
function toLatitude(y) {
return y / width + 59.3325755;
}
function onLoad() {
// The SVG path;
var path = "M735.4,682.4 l0-1.2-0.2-2,0-2.5l1.5-2.9,0.3-6,1.3-9l0.9-2.8,0.1-5.8,0.7-8.8 l0.6-3.3,0.3-6.8,0.9-10.2l0.4-2.4-0.5-4.9,0.8-7.2l-0.6-3.1,0.7-5.7,2.7-8.1l0.4-0.5,0.6-1.2,0.9-1.9l-2.8,0.2-5.2,0.2-7.7,0.6 l-4.1,0.7-8.2,1.4-12.2,2.5l-0.8,0.2-2.1,0.4-2.7,0l-1-0.7-2.2,0-2.8-0.4l-1.8-2.1-3.6-3.9-4.9-5.9l-0.8-1.2-2.3-2.1-2.3-3.9 l0-1.2-1.1-2.5-1.6-3.4l-2-0.9-3.9-1.8-5.8-2.7l1-3.2-2-6.3,0-9.5l-2.7-3.5-2-7.5-2.1-11.4l1.5-1.2,0.6-2.7,0.7-4.1 l0.1-1.4,0-2.9,0-4.1l-9-2.7-17.7-5.3-26.3-7.9l-0.3-0.1-0.5-0.5-0.8-0.7l-0.7-3.6,0.7-7.3-0.8-10.7l0.4-1,0.8-2,1.2-3 l-0.1-0.1-0.6-0.4-0.6-0.6l0.5-2.9,1.2-5.8,2.2-8.4l-1.8-2.5-3.5-4.8-5.2-7.1l-0.7-1-1.5-1.9-2.3-2.9l-0.9-1-2-1.9-2.5-3.1 l-0.5-1.3-1.8-1.5-2.7-2.3l-4.1-3.7-7.8-7.7-12.4-10.8l-2-1.4-3.6-3.3-5.5-5l-2.1-1.8-3.9-3.9-6.4-5.3l-1.4-0.8-2.7-2.3-3.4-3.7 l-1.6-3.3-2.5-6.9-3.8-10.4l-0.6-1.5-0.6-3.1-0.8-4.2l4.7-6,8.4-12.1,12.5-17.8l0.3-0.5,0.6-1,0.9-1.8l-1.1,0.2-1.8,0.4-2.5,0.6 l-1.5,0.3-2.7-0.6-4.1-0.6l-2.9-0.1-5.9-0.1-8.8,0l-0.6,0-1.3,0.5-1.8,0.7l-2.8-1.4-6.4-1.1-9.1-3.4l1.1-0.7,1.8-1.2,2.7-1.8 l0-0.6,0-1.3,0-2.5l0.5-0.4,1.3-1.1,2-1.6l-0.4-2.1-1-4.2-1.2-6.3l-0.2-2.3,0-4.7,0-6.7l-0.9-1.3-1.6-2.3-2.4-3.2 l-0.7-0.9-1.2-2.1-2.1-2.5l-2.5-1-2.8-2.9-3-4.8l-0.8-1.3-3.4-0.9-2.7-3.4l1.9-1,2.1-4,4.8-4.6l0.7-2.3,1.3-4.4,1.9-6.5 l1.7,0,3.1,0,4.6,0l2.2,0.1,4.3,0,6.3-0.7l1.4-0.4,2.8-1.1,4.2-1.3l1.2-0.1,2.6-0.3,3.9,0.3l1,0.4,2.4,0.4,3.4,0.1 l2.7-0.8,5.2-1.9,6.9-3.6l1.4-0.3,2.6-0.3,3.7-0.7l1.2-0.6,2.6,0.4,3.8-0.6l0.5-0.4,2-0.5,2.3-0.1l1.4,1.3,3.2,0.2,4.7,1.1 l1.3,0.8,3.4,0.5,5.1,0.8l2.6,0.5,5.1,1.3,7.7,2l4.7-2.7,10.4-4,14.5-7.7l0-0.8-0.2-1.4,0-1.9l1.5-3.4,2.6-6.9,3.9-10.4 l0.4-1,0.4-1.8,0.4-2.1l-1.4-2.4-2.5-4.3-3.7-6.2l0-4.4,0-8.9,0-13.3l-5.1-4.7-10.1-9.3-15.2-13.9l-4.2-3.9-8.3-7.8-13-11.2 l-0.5-0.4-1.2-0.7-1.8-1l-1-0.5-2.1-0.9-3-1.5l-4.1-2.4-8.2-4.6-12.4-6.7l-1-0.5-2-1.2-2.8-1.9l-1.9-1.6-2.9-3.8-4.2-5.8 l-4.2-6-8.5-12-12.5-18.3l-0.8-1.2-1.8-2.2-2.7-3.3l-0.4-2.6-0.7-5-1.1-7.5l-0.6-1-1-2.1-1.7-3l-3.1-3.6-6.2-7.1-9.4-10.7 l-2.2-2.5-4.7-4.9-6.7-7.6l-1-1.4-2.2-2.6-3.5-3.7l-1.4-1.2-3.5-1.2-5.2-1.5l-4.5-0.8-8.9-2.5-13.5-2.8l-0.7-1.3-2.3-0.3-3.3-0.9 l-1-0.7-2.2-1.1-3.2-1.8l-1.1-0.8-2.1-1.9-3.2-2.7l-1.9-1.4-4-2.7-6.1-4.1l-2.6-0.2-5.5-0.2-8.3-0.8l-1.3-0.3-2.5-0.4-3.8-0.6 l-1.4-0.2-2.8-0.7-4.1-0.6l-3.6,0.1-7.1-1.2-10.7-0.7l-0.2,0-0.5,0-0.7,0l-4.3-0.9-5.5-0.9-8.6,0l-1.1,0.3-2.2,0.6-3.4,1 l-0.4,1-1.6,2.3-0.7,3.4l0.9,1.2,0.2,2.3,0.6,3.4l-2.2,1.7-4.7,2.2-7.2,2.5l-0.2,1-0.4,2-0.7,3.1l2.3,3.8,4.1,8.2,7.1,12 l0.4,0.6,0.5,1.4,0.8,2.1l1.6,4.8,3.5,9.5,5,14.3l1.1,3.4,3.1,6.8,2.3,10.6l-0.7,2.5-3.8,2.8-4.9,4.6l-0.4,2.9-0.7,5.6-1.1,8.5 l-1.9,0.8-0.2,4.7-4,4.2l-0.4-0.9-0.9-1.7-1.4-2.9l-0.7,0.3-1.5,0.4-2.1,0.8l-2.3,1.5-4.3,3.4-6.7,4.7l-2.8,1.5-4.9,3.7-6.9,5.9 l-1.8,2-3.3,4.2-5,5.8l-0.4,2-0.9,3.7-1,5.4l-0.2,1.9,0.2,3.9-0.1,5.7l-0.2,1.3-1,2.5-1.4,3.5l-0.9-0.3-1.4-0.5-2-0.6 l-2-0.1-3.9,0-5.9,0l-2.8-0.1-5.2-0.9-7.1-2.6l-4.4-0.7-8.7-0.8-12.8-2.2l-1.6,0.7-3.1,1.4-4.7,2.1l-1.5,0.6-2.9,1.9-4.9,1.3 l-0.6-0.6-1.1-1.3-1.8-1.6l-2.7-1.4-4.8-3.5-7.1-5.3l-4-3.2-8.4-5.6-13.4-7.2l-1-0.3-2.1-0.7-2.6-1.5l-1.6-2.3-2.9-4.8-4.3-7.2 l-1.2-0.6-2.1-1.4-3.1-2.2l-1.1-0.8-2.3-1.5-3.3-2.4l-3.1-3-6.1-6-9.1-9.1l-0.6-0.7-1-1.7-1.2-2.6l-1.3-4.9-3.5-9.5-5.9-14 l-0.7-1.2-1.9-2.3-2.1-3.6l-0.3-2.1-1.6-3.3-3-4.6l-1.2-1.1-2.5-2.2-3.6-3.4l-1.1-1.2-2.7-2-3.8-3.2l-1-1.1-2.4-1.9-3.7-2.9 l0.3-0.3,0.5-0.5,0.8-0.9l-2.7-1.4-5.2-2.8-7.9-4.3l-0.4-1.1-0.7-2.3-1.1-3.5l-0.8-1.1-1.5-2.2-2.5-3.1l-1-0.9-2.1-1.8-3.3-2.4 l-2.1-1.1-3.9-2.6-6.3-3.1l-3.8-0.7-7.3-1.8-9.4-5.2l-0.3-0.6-1.3-0.8-2.2-1.4l0.6-1,1.2-2,1.7-2.9l-0.5-1-1.1-1.9-1.5-2.7 l2.4-6.3,2.4-6.4,6.8-9.1l0.3-0.2,0.7-0.1,1-0.3l1.8-1.5,3.4-2.9,3.5-5.4l0.1-2,0.7-4,1.4-5.8l0.6-1.5,1.6-2.7,2.6-4.3 l0.6,0,1.4,0,1.6,0l1.8-1,3.1-1.7,4.5-2.4l0.1-0.2,0-0.6,0.2-0.8l4.4-4.3,6.7-9.6,8-15.2l0.7-3,1.5-5.9,3.2-8.6 l1-1.6,2.2-3.2,3.1-4.9l0.7-1.4,1.8-2.5,3.3-3.3l2.7-1.4,5.4-2.8,7.9-4.1l1.1,0.4,2,1.3,3.2,0.3l0-0.7,0-1.4,0-2.1 l3.5-1.6,6.9-3.1,10.6-4.7l0.6,0.8,1.1,1.4,1.7,2l0.3,0.3,0.9,0.4,1.4,0.5l-5.6-5.6-11.5-10.7-17.3-15.8l-0.1-0.1-0.2-0.2-0.3-0.2 l-2.8-1.8-5.5-3.8-8-6l-1.6-1.4-3.7-2.3-5.3-3.8l-2.6-2.4-6-3.8-8.9-5.7l-6.1-4.1-11.7-8.6-17.2-13.2l-0.9-0.7-1.9-1.3-2.8-1.9 l-0.6,0.5-1.2,1-1.9,1.6l-4.2-3.5-7.3-7.6-10.2-11.8l-1.3-1.9-2.9-3.9-2.2-6.5l-2.6-2-5-4-7.7-6.1l0.6-1.9,1-3.9,1.8-5.8 l1.3-3.2,1.6-6.8,3.6-9.8l0.7-1.1,0.6-2.6,0.9-4l-1.9-1.6-3.7-3.1-5.3-4.4l-1.6,0-2.8,0-4.1,0l-0.3-0.3-0.7-0.6-1.1-1 l0-0.6,0-1.3,0-1.7l-1.3-2.4-3.7-2.5-5.8-3.2l-0.1,0.4-0.2,0.7-0.4,1.2l-1.8-0.2-3.5-0.5-4.9-1.7l0-1.2,0-2.3,0-3.4 l-0.6-0.9-1.2-1.7-1.7-2.4l-1.4,0-2.6,0-3.9,0l-2.1,2.2-4.3,4.4-6.4,6.7l-0.2,0.2-0.3,0.6-0.5,0.8l-1.7,2.6-2.6,5.3-2.2,8.3 l0.2,1.9-0.5,3.4-2,4.6l-0.6,0.5-1.4,0.9-2.1,1.4l0.2,0.1,0.4,0.3,0.5,0.4l-0.3,1.5-0.7,2.9-1.1,4.6l0.9,0.6,1.7,1.3,2.4,1.8 l0,0.9,0,1.6,0,2l2.1,2.4,4,4.7,5.9,7l-1.9,1.4-3.6,2.7-5.3,4l0.9,0.9,1.7,1.6,2.3,2.4l0.8,0.8,1.5,1.7,2.3,2.6 l-0.4,1.9,0.5,3.8,0.6,5.7l0.3,4.7,2.4,8.8,5.2,12.6l0,0.6,0,1.1,0,2l-0.7,0.5-1.5,1.1-2.4,1.8l-0.2,2-0.2,4-0.6,5.9 l-0.3,1.3-0.6,2.6-1.6,3.8l-1.8,2.2-3.7,4.4-4.7,7l-1,2.4-2.7,4.3-4.5,6l-3.2,3.1-7.4,5.2-11.5,7.2l-1.2,0.6-2.6,0.7-3.8,1.5 l-1.6,1-3.4,1.3-4.8,0.1l-1.6,1.4-3,2.7-4.4,4l1.3,2.6,3.8,4.6,6.1,6.7l1.2,1.1,2.2,2.2,1.8,4.4l-1,0.8-2.7,1.7-3.5,2.9 l-0.9,1.5-2.5,2.4-3.6,3.9l-1.2-0.7-2-2.4-3.5-1.6l-0.9,2.3-1.5,4.6-2.7,6.6l-1.3,2.2-2.8,4.3-4.7,6l-1.6,1.5-3,3.1-4.3,4.8 l-1.6,0.2-3.3,0.4-4.8,0.8l-2.7,0.7-5.4,1.2-7.3,3.4l-1.2,1.4-2.5,2.8-4.2,3.8l-3.9,2.3-6.6,5.6-9.3,9l-1.7,2-2.7,4.5-4.5,5.8 l-4.2,0.7-7.9,0.9-11.6,1l-3.9,0.1-7.3-1.7-11.1-1.5l0-1.3-0.4-2.7,0.1-3.5l0.9-1.3,0.4-2.6,0.6-3.8l0.2-1.3,0.6-2.5,0.7-3.8 l0.2-1.7,0.3-3.4,0.6-5.2l0.8-3.9,0.7-7.9,1-11.6l-0.6-0.6-1.3-0.9-1.5-1.4l-1.6-3.5-3.8-6.5-6.5-9.4l-0.7-0.8-1.4-1.8-1.7-2.7 l-0.9-3-0.8-3-3.6-5l0,1.9-1.7,1.8-2.9,2l-0.3,1.6-1.8,2.2-2.6,3.2l-0.9,1-1.6,2.1-2.6,3l-1.9,1.8-3.9,3.5-6.1,5.1 l-3.7,2.7-7,5.8-10.6,8.8l-0.4,0-0.9,0-1,0l-9.2-7.2-18.2-14.2-27.3-21.3l-8.4,6-16.6,11.8-24.7,17.6l0.2,0.4,0.4,0.9,0.5,1.4 l0.5,3,1.4,5.8,4.2,7.9l2.8,2.1,5.4,4.4,8.1,6.7l0.3,0.3,0.9,0.3,1.2,0.6l2.5,2.5,5.5,4.4,7.2,7.7l2.7,5.1,5.4,10.1,8,15.2 l1.7,3.4,3.6,6.7,5.4,10.1l1.4,2.6,2.6,5.3,4.2,8.5l-0.5,2.7,0.9,6-0.7,9.3l-0.2,0.3,0.1,0.8,0.2,1.2l1.1,3.3,2.3,6.6,3.4,9.9 l1.3,3.8,2.5,7.6,3.7,11.4l0.6,1.7,1.2,3.4,1.8,5.2l0.8-0.1,1.7,0.1,2.4-0.2l2.6-1.2,5.6-1,8.1-2.5l4.8-0.5,9.3-2.4,13.9-3.4 l1.5-0.3,2.9-0.8,4.2-0.6l4.5,3.6,8.9,7,13.2,10.4l-0.1,1.1,0.3,2,0.6,2.9l1.5,4.2,5.5,6.5,8.2,9.4l3.8-1.1,7.5-1.9,10.9-3.2 l2.5-1,4.2-0.4,6,1.1l1.5,1.3,3,2.6,4.7,3.6l2.8,1.7,5.4,3.8,8.2,5.5l2.5,1.6,4.8,3.4,7.3,4.9l2.2,1.3,4.5,2.9,5.9,4.8 l1.5,2.1,3.6,3.7,5.2,5.7l2.3,2.9,5.1,5.5,7.5,8.4l0.4,0.5,1.1,1.3,1.6,1.2l1.9-0.1,3.1,1.3,4.9,1.6l1.7,0.2,3.7,1,4.4,3.1 l0.5,1.4,1.7,2.5,2.8,4.1l4.4,1.1,8.4,3.4,11.2,6.9l2.6-0.8,4.9-1.5,7.2-2.2l5.9,5.4,11.7,10.8,17.5,16.1l0.6,0.6,1.1,1.3,1.8,1.6 l6.1,2.5,11.1,6.5,16.5,9.9l3,1.8,5.8,3.9,8.9,5.7l4.1,2.4,8.3,4.5,12.4,6.8l2.8,1.6,5.6,3,8,5l4,3.2,7.5,7,11.7,10 l3.9,2.9,6.3,6.9,9.2,10.6l-1.2,5.7-5.3,9.2-9.6,11.9l-4.6,0.7-8.6,1.3-12.6,1.9l-1,1.6-1.7,3.5-3.1,4.8l-1.5,1.4-3.7,2.1-5.4,3.1 l-1.6,0-3.1,0-4.6,0l-1.5,0-2.9,0-4,0l-1.2,0.8-2,1.5-2.8,2l-2.6,1.7-5.6,2.8-8.4,4.1l-2,0.9-3.9,1.7-6.1,2 l-1.7,0.2-3.6,0.5-4.9,1.4l-2.3,1.7-4.7,3.4-6.1,6l-1.7,3.3-3.3,4.5-6.7,6.1l-2.5,1.2-5.2,2.1-7.6,3.6l-1.5,1-3.6,1.3-5.8,2.2 l-0.5,0.7-1.5,1.5-2.4,2.6l-1.8,2.2-2.6,4.7-3.5,7.1l-1.2,3-2.6,4.5-5.2,4.8l-4,0.5-8,1.2-12,2l-4.1,0.7-8.2,1.5-12.3,2.3 l-0.3,3.8,1.2,7.5,0.7,11.3l0,0.3,0.4,0.6,0.4,0.8l0.1,2.2,0.5,4.5,0,6.5l-0.8,2.8-2.3,5.4-3.5,8.1l-0.6,1.3-1,2.5-1.5,3.8 l2,0.8,3.7,1.7,5.6,2.2l1.9,0.5,3.6,1.4,5.4,2.1l1.4,3.4,2.8,6.9,4,9.6l1.6,1.3,2.7,2.1,3.8,2.9l2.8-1.2,5-3,6.8-4.8 l2.7,0,5.2,0,7.6,0l0.1,0,0.2,0.1,0.4,0.3l0,0.9,0,1.9,0,3l1.9,0,3.7,0,5.4,0l0.4,1.7,0.8,3.2,1.2,4.7l2,0,3.7,0,5.5,0 l1.7-2.5,4.8-3,7.6-3.3l2.6-0.2,5.1-0.4,7.1-1.7l2.6-3.1,3.9-6.5,5.1-10l0.9-2.5,1.5-5,2.5-7.5l0.9-2.1,1.7-4.3,2.6-6.7 l0.1-0.1,0.3-0.5,0.6-0.5l2.2-0.5,3.4-1.9,4.6-3.5l3.5-4.7,8-8.4,13.8-10.8l2.7-1.1,5.4-2.2,8-3.4l3.2-1.4,6.2-3.1,9.4-4.4 l2.9-1.2,5.7-2.5,8.6-3.8l0.7-0.3,1.4-0.4,2-0.5l1.4,2.1-2.3,2.8-0.8,4.7l0.9-0.3,1.9-0.5,2.8-0.8l0.6,0.4,1,0.8,1.5,1.2 l-0.4,0.9-0.7,1.7-0.9,2.4l2.5,3.4,6.5,5.1,9.5,7.6l0.1,2.1,0.4,3.9,0.6,5.7l0.3,2.8-0.3,5.7-0.6,8.5l-1.4,1.3-0.1,3.1-0.8,4.4 l-0.8,1.5-0.6,3-0.6,3.9l0.8,1.8,1.3,3,2,4.6l4.5,1,4.8,5.1,6.3,8.3l1.7,0.3,2.5,1.5,3.1,2.7l0.4,0.1,0.7,0.2,1,0.3 l2.8,1,5,2.9,7.7,4.3l1.2,0.6,2.1,1.2,2.8,2.3l1.3,1.8,3,3.3,5.1,4.4l2.7,1.5,5.2,3.2,8,5l2,0,4.4,0,6.7,0l0.7,0,1.4,0,2.1,0.2 l2,0.7,4.1,1.3,6,2.1l5.6,2.3,11,4.9,16.7,7l4.1,1.5,6.7,4.6,10.5,6.8l1.7,0,3.7,0,5.8,0l0.7,0.8,1.4,1.6,2.3,2.7l0.5,0,1.3,0,2.3,0 l0,2.8,1.2,5.1,3.5,6.9l2.9,2.3,5.7,4.8,8.6,7.2l0.5,0.5,1,1,1.6,1.4l0.3,0.3,0.7,0.7,1.1,0.7l3,0.5,5.4,2.2,8.2,3.2 l5.8,2.1,11.4,4.6,17.1,7.1l1.1,0.5,2.1,0.8,3.5,0.5l0.9-1.1,1.9-2.2,3.1-3.7l5.5,5.9,10.7,11.5,16,17.1l-0.4,0.4-0.9,0.8-1.4,1.3 l1,2.1-1.4,4.2-0.3,6.6l1.2-0.6,2.2-1.2,3.2-1.7l0.1-1,0.2-1.8,0.3-2.6l0.7,0,1.2,0,1.9,0l0.3,0.6,0.6,1.3,1.1,1.9 l2.4,2.4,3.9,5.3,5.8,7.9l2.5,3.4,4.3,7.6,9.4,8.8l0.2,0,0.3,0.3,0.5,0.5l1.8,1.3,4.1,2.4,6.2,2.5l2.9,0.1,5.6,0.9,8.1,0.9 l8.7,3.8,17.1,7.5,26.1,9.5l0.5-1.8,0.9-3.3,1.2-4.5l5.5-2.5,10.7-4.9,15.9-7.3l0.4-1.2,0.8-2.5,1-3.4l1.1-0.5,1.8-0.8,2.5-1.1 l0.8-0.3,1.7-0.6,2.2-0.8l0.4-0.8,0.7-1.4,1-1.9l-1.2-1.9-1.3-4.3-2.9-6.1l-0.6-0.7-0.9-1.9-0.7-2.7l0.5-2.2,1.5-4.4,2.1-6.6 l0.3-1,0.3-2,1.5-2.2l1.3,0.6,2.6,1.1,4,1.7l0.8-0.9,1.5-1.7,2-2.4l0.6,0.4,1,0.6,1.3,0.8l2.1-1.5,4-2.9,5.7-4.2 l2.4,1.3,4.5,2.3,6.5,3.5l3.4,1.9,7,3.6,10.3,5.6l3.1,1.9,6.5,3,9.9,4.4l3.3,1.3,6.9,2.1,10.3,3.4l3.3,1.3,6.9,2.2,10.3,3.4 l4.9,1.7,9.7,3.5,14.7,4.9l0.3,0.8,0.6,1.6,0.9,2.4l0.3,1.2,1.2,1.8,2.4,2.2l4.6,1.7,9.3,3.4,13.9,5.1 C731.8,681.6,733.4,681.9,735.4,682.4z";
var points = path.match(/(\d+)/g);
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(59.3325755, 18.0780778),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// Map polygon coordinates
var polyCoordinates = [];
for (var i = 0; i < points.length; i += 2) {
var longitude = toLongitude(parseInt(points[i])),
latitude = toLatitude(parseInt(points[i + 1]));
console.log(latitude + ', ' + longitude);
polyCoordinates.push(new google.maps.LatLng(latitude, longitude));
}
var polygon = new google.maps.Polygon({
paths: polyCoordinates,
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#ffff99',
fillOpacity: 0.85
});
polygon.setMap(map);
}
#map{
height: 100 %;
}
html, body{
height: 100 %;
margin : 0;
padding : 0;
}
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=onLoad" async defer></script>
</body>
From SVG image I extracted path from path id="City_border", remove absolute coordinates from the start and end of SVG path and replace "c" with "l" (curve to lines).
But I did something wrong.
Any idea?
Your code seems not ok with polygon , Try out this points:
<!DOCTYPE html>
<html>
<body>
<svg height="1000" width="1000">
<polygon points="735.400 682.400, 735.400 679.900, 736.700 670.900, 737.400 662.100, 738.300 651.900, 739.100 644.700, 741.800 636.600, 742.700 634.700, 735.000 635.300, 722.800 637.800, 720.100 637.800, 717.300 637.400, 712.400 631.500, 710.100 627.600, 708.500 624.200, 702.700 621.500, 702.700 612.000, 700.600 600.600, 701.300 596.500, 701.300 592.400, 675.000 584.500, 674.200 583.800, 673.400 573.100, 674.600 570.100, 674.000 569.500, 676.200 561.100, 671.000 554.000, 668.700 551.100, 666.200 548.000, 663.500 545.700, 651.100 534.900, 645.600 529.900, 639.200 524.600, 635.800 520.900, 632.000 510.500, 631.200 506.300, 643.700 488.500, 644.600 486.700, 642.100 487.300, 638.000 486.700, 629.200 486.700, 627.400 487.400, 618.300 484.000, 621.000 482.200, 621.000 479.700, 623.000 478.100, 621.800 471.800, 621.800 465.100, 619.400 461.900, 617.300 459.400, 614.300 454.600, 611.600 451.200, 616.400 446.600, 618.300 440.100, 622.900 440.100, 629.200 439.400, 633.400 438.100, 637.300 438.400, 640.700 438.500, 647.600 434.900, 651.300 434.200, 655.100 433.600, 657.400 433.500, 662.100 434.600, 667.200 435.400, 674.900 437.400, 689.400 429.700, 689.400 427.800, 693.300 417.400, 693.700 415.300, 690.000 409.100, 690.000 395.800, 674.800 381.900, 661.800 370.700, 660.000 369.700, 657.000 368.200, 644.600 361.500, 641.800 359.600, 637.600 353.800, 625.100 335.500, 622.400 332.200, 621.300 324.700, 619.600 321.700, 610.200 311.000, 603.500 303.400, 600.000 299.700, 594.800 298.200, 581.300 295.400, 578.000 294.500, 574.800 292.700, 571.600 290.000, 565.500 285.900, 557.200 285.100, 553.400 284.500, 549.300 283.900, 538.600 283.200, 537.900 283.200, 529.300 283.200, 525.900 284.200, 525.200 287.600, 525.800 291.000, 518.600 293.500, 517.900 296.600, 525.000 308.600, 525.800 310.700, 530.800 325.000, 533.100 335.600, 528.200 340.200, 527.100 348.700, 523.100 352.900, 521.700 350.000, 519.600 350.800, 512.900 355.500, 506.000 361.400, 501.000 367.200, 500.000 372.600, 499.900 378.300, 498.500 381.800, 496.500 381.200, 490.600 381.200, 483.500 378.600, 470.700 376.400, 466.000 378.500, 461.100 379.800, 459.300 378.200, 452.200 372.900, 438.800 365.700, 436.200 364.200, 431.900 357.000, 428.800 354.800, 425.500 352.400, 416.400 343.300, 415.200 340.700, 409.300 326.700, 407.200 323.100, 404.200 318.500, 400.600 315.100, 396.800 311.900, 393.100 309.000, 393.900 308.100, 386.000 303.800, 384.900 300.300, 382.400 297.200, 379.100 294.800, 372.800 291.700, 363.400 286.500, 361.200 285.100, 362.900 282.200, 361.400 279.500, 368.200 270.400, 369.200 270.100, 372.700 264.700, 374.100 258.900, 376.700 254.600, 378.300 254.600, 382.800 252.200, 383.000 251.400, 391.000 236.200, 394.200 227.600, 397.300 222.700, 400.600 219.400, 408.500 215.300, 411.700 215.600, 411.700 213.500, 422.300 208.800, 424.000 210.800, 425.400 211.300, 408.100 195.500, 407.800 195.300, 399.800 189.300, 394.500 185.500, 385.600 179.800, 368.400 166.600, 365.600 164.700, 363.700 166.300, 353.500 154.500, 351.300 148.000, 343.600 141.900, 345.400 136.100, 349.000 126.300, 349.900 122.300, 344.600 117.900, 340.500 117.900, 339.400 116.900, 339.400 115.200, 333.600 112.000, 333.200 113.200, 328.300 111.500, 328.300 108.100, 326.600 105.700, 322.700 105.700, 316.300 112.400, 315.800 113.200, 313.600 121.500, 311.600 126.100, 309.500 127.500, 310.000 127.900, 308.900 132.500, 311.300 134.300, 311.300 136.300, 317.200 143.300, 311.900 147.300, 314.200 149.700, 316.500 152.300, 317.100 158.000, 322.300 170.600, 322.300 172.600, 319.900 174.400, 319.300 180.300, 317.700 184.100, 313.000 191.100, 308.500 197.100, 297.000 204.300, 293.200 205.800, 288.400 205.900, 284.000 209.900, 290.100 216.600, 291.900 221.000, 288.400 223.900, 284.800 227.800, 281.300 226.200, 278.600 232.800, 273.900 238.800, 269.600 243.600, 264.800 244.400, 257.500 247.800, 253.300 251.600, 244.000 260.600, 239.500 266.400, 227.900 267.400, 216.800 265.900, 216.900 262.400, 217.500 258.600, 218.200 254.800, 218.800 249.600, 219.800 238.000, 218.300 236.600, 211.800 227.200, 210.100 224.500, 206.500 219.500, 203.600 221.500, 201.000 224.700, 198.400 227.700, 192.300 232.800, 181.700 241.600, 180.700 241.600, 153.400 220.300, 128.700 237.900, 129.200 239.300, 133.400 247.200, 141.500 253.900, 142.700 254.500, 149.900 262.200, 157.900 277.400, 163.300 287.500, 167.500 296.000, 166.800 305.300, 167.000 306.500, 170.400 316.400, 174.100 327.800, 175.900 333.000, 178.300 332.800, 186.400 330.300, 200.300 326.900, 204.500 326.300, 217.700 336.700, 218.300 339.600, 226.500 349.000, 237.400 345.800, 243.400 346.900, 248.100 350.500, 256.300 356.000, 263.600 360.900, 269.500 365.700, 274.700 371.400, 282.200 379.800, 283.800 381.000, 288.700 382.600, 293.100 385.700, 295.900 389.800, 307.100 396.700, 314.300 394.500, 331.800 410.600, 333.600 412.200, 350.100 422.100, 359.000 427.800, 371.400 434.600, 379.400 439.600, 391.100 449.600, 400.300 460.200, 390.700 472.100, 378.100 474.000, 375.000 478.800, 369.600 481.900, 365.000 481.900, 361.000 481.900, 358.200 483.900, 349.800 488.000, 343.700 490.000, 338.800 491.400, 332.700 497.400, 326.000 503.500, 318.400 507.100, 312.600 509.300, 310.200 511.900, 306.700 519.000, 301.500 523.800, 289.500 525.800, 277.200 528.100, 277.900 539.400, 278.300 540.200, 278.300 546.700, 274.800 554.800, 273.300 558.600, 278.900 560.800, 284.300 562.900, 288.300 572.500, 292.100 575.400, 298.900 570.600, 306.500 570.600, 306.900 570.900, 306.900 573.900, 312.300 573.900, 313.500 578.600, 319.000 578.600, 326.600 575.300, 333.700 573.600, 338.800 563.600, 341.300 556.100, 343.900 549.400, 344.500 548.900, 349.100 545.400, 362.900 534.600, 370.900 531.200, 380.300 526.800, 388.900 523.000, 390.900 522.500, 390.100 527.200, 392.900 526.400, 394.400 527.600, 393.500 530.000, 403.000 537.600, 403.600 543.300, 403.000 551.800, 402.200 556.200, 401.600 560.100, 403.600 564.700, 409.900 573.000, 413.000 575.700, 414.000 576.000, 421.700 580.300, 424.500 582.600, 429.600 587.000, 437.600 592.000, 444.300 592.000, 446.400 592.200, 452.400 594.300, 469.100 601.300, 479.600 608.100, 485.400 608.100, 487.700 610.800, 490.000 610.800, 493.500 617.700, 502.100 624.900, 503.700 626.300, 504.800 627.000, 513.000 630.200, 530.100 637.300, 533.600 637.800, 536.700 634.100, 552.700 651.200, 551.300 652.500, 551.000 659.100, 554.200 657.400, 554.500 654.800, 556.400 654.800, 557.500 656.700, 563.300 664.600, 572.700 673.400, 573.200 673.900, 579.400 676.400, 587.500 677.300, 613.600 686.800, 614.800 682.300, 630.700 675.000, 631.700 671.600, 634.200 670.500, 636.400 669.700, 637.400 667.800, 634.500 661.700, 633.800 659.000, 635.900 652.400, 637.400 650.200, 641.400 651.900, 643.400 649.500, 644.700 650.300, 650.400 646.100, 656.900 649.600, 667.200 655.200, 677.100 659.600, 687.400 663.000, 697.700 666.400, 712.400 671.300, 713.300 673.700, 715.700 675.900, 729.600 681.000, 735.400 682.400" style="fill:white;stroke:black;stroke-width:2" />
</svg>
</body>
</html>
Related
I have multiple Geoserver layers, let 3 here (Rainfall, Maximum Temperature and Minimum Temperature)
The name of layer and values assigned in the radio button to switch the layers is same.
As I check the radio button, I am getting the value of that specific layer
but when I pass this value, I am unable to fetch the URL of that layer
how to make this layer value string work in GetFeatureInfo function of Openlayers 6, to get the URL of that specific layer which we select from sidebar?
Any other suggestions are highly appreciated.
<body>
<div class="grid-container">
<div class="grid-1">
<div class="sidebar">
<h3>Weather Parameters</h3>
<input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_rainfall_layer" checked> Rainfall <br>
<input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_maximum_temperature_layer"> Maximum Temperature <br>
<input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_minimum_temperature_layer"> Minimum Temperature <br>
</div>
<div class="grid-2">
<div id= 'js-map' class='map'></div>
</div>
</div>
</body>
window.onload = init;
function init(){
// 1.1 Rainfall
var india_dist_rainfall_layer_source = new ol.source.TileWMS({
url: "http://localhost:8080/geoserver/agrodss/wms",
params: {"LAYERS":" agrodss:Rainfall (mm)", "tiled": true},
serverType: "geoserver",
})
var india_dist_rainfall_layer = new ol.layer.Tile({
source: india_dist_rainfall_layer_source,
opacity: 0.0,
visible:true,
title: "Rainfall"
})
// 1.2 Maximum Temperature
var india_dist_maximum_temperature_layer_source = new ol.source.TileWMS({
url: "http://localhost:8080/geoserver/agrodss/wms",
params: {"LAYERS":"agrodss:Maximum Temperature (°C)", "tiled": true},
serverType: "geoserver",
})
var india_dist_maximum_temperature_layer = new ol.layer.Tile({
source: india_dist_maximum_temperature_layer_source,
opacity: 0.0,
visible:true,
title: "Maximum_Temperature"
})
var myview = new ol.View({
center: ol.proj.fromLonLat([80, 22]),
zoom: 3,
maxZoom: 9,
minZoom: 2,
});
var map = new ol.Map({
target: 'js-map',
view: myview,
});
var weatherParameterLayerGroup = new ol.layer.Group({
layers: [
india_dist_rainfall_layer,
india_dist_maximum_temperature_layer
]
})
map.on('click',function(evt){
var resolution=map.getView().getResolution();
var coordinate=evt.coordinate;
var projection=map.getView().getProjection();
//console.log(resolution, coord, projection)
//switching layers to get layer value
var weatherParameterLayerURLs = document.querySelectorAll('.sidebar > input[type=radio]');
for (let weatherParameterLayerURL of weatherParameterLayerURLs){
weatherParameterLayerURL.addEventListener('change', function(){
var weatherParameterLayerURLpass = this.value;
//GET URL (not working)
var district_url=weatherParameterLayerURLpass.getSource().getFeatureInfoUrl()
//GET URL (working)
var district_url=india_dist_maximum_temperature_layer.getSource().getFeatureInfoUrl()
If you have the GetFeatureInfo URL you can get at the GetMap URL, just by changing the value of the request parameter from GetFeatureInfo to GetMap
I am working on Jquery project using Leaflet map . My project is getting data json coordinates for flights position . My code below is working fine , but the problem is l have repeat markers on map while data is updating . l did some steps to remove previous markers position then shows new markers position, but l have error 'types' can only be used in a .ts file.
markers repeated on map while data is updating
My code
$(document).ready(function () {
var heading ;
coords: L.Marker[]
var type ;
// map initializing
var coords = [33,44]; // the geographic center of our map
var zoomLevel = 6 // the map scale.
var map = L.map('map').setView(coords, zoomLevel);
L.tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
attribution: 'Map data ©',
maxZoom: 18
}).addTo(map);
// Aircraft data
setInterval(function(){
$.ajax('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
type: 'GET',
dataType: 'jsonp',
timeout: 5000
}).done(function (data, textStatus, jqXHR) {
// Error is here ------------ under marker //
coords ? coords.forEach((marker:marker) => {
marker.remove();
}) : '';
coords = [];
Object.keys(data)
.map(key => data[key])
.map((position) => ({
lat: position[1],
lng: position[2],
callSign: position[13],
heading: position[3],
AircraftType: position[8]
})).filter(position => position.lat && position.lng && position.callSign
&& position.heading
&& position.AircraftType).forEach(i => {
console.log(i.lat, i.lng, i.heading)
coords.push( new L.Marker([i.lat, i.lng], {
icon: new L.DivIcon({
html: ` <div style="width:120px;";>
<div class="temp-${i.heading} ${type}"></div>
<span style="color:white;background-color: midnightblue;margin: 4px;padding: 4px;border-radius: 3px;">
${i.callSign}
</span
></div>`
})
}).addTo(marker))
})
},5000)
});
Looks like you are using a type here:
coords ? coords.forEach((marker:marker) => {
The first marker is your variable and the second one after the colon is the type used in TypeScrypt. Try removing the colon and the marker there.
coords ? coords.forEach((marker) => {
I'm new to programming in general and workig with p5.js and Leaflet.
I am trying to draw multiple circles on a map with Leaflet.
I have the coordinates of the capitals of all the countries in the world in a 2D-array.
I am looping through the array to create a circle marker for each row of coordinates. It works so far, but the problem is, that i really only get one circle object, called "circle" with only one pair of coordinates.
My Question: How can i create a new object with a different name for every loop, so every circle is really an individual object, that can handle events individually?
Here is the code so far:
var coords = [
[+41.3317, +19.8172],
[+42.5075, +1.5218],
[+53.9678, +27.5766],
[+50.8371, +4.3676],
[+43.8608, +18.4214],
[+42.7105, +23.3238],
[+55.6763, +12.5681],
[+52.5235, +13.4115],
[+59.4389, +24.7545],
[+60.1699, +24.9384],
[+48.8567, +2.3510],
[+37.9792, +23.7166],
[+51.5002, -0.1262],
[+53.3441, -6.2675],
[+64.1353, -21.8952],
[+41.8955, +12.4823],
[+42.6740, +21.1788],
[+45.8150, +15.9785],
[+56.9465, +24.1049],
[+47.1411, +9.5215],
[+54.6896, +25.2799],
[+49.6100, +6.1296],
[+35.9042, +14.5189],
[+47.0167, +28.8497],
[+43.7325, +7.4189],
[+42.4602, +19.2595],
[+52.3738, +4.8910],
[+42.0024, +21.4361],
[+59.9138, +10.7387],
[+48.2092, +16.3728],
[+52.2297, +21.0122],
[+38.7072, -9.1355],
[+44.4479, +26.0979],
[+55.7558, +37.6176],
[+43.9424, +12.4578],
[+59.3328, +18.0645],
[+46.9480, +7.4481],
[+44.8048, +20.4781],
[+48.2116, +17.1547],
[+46.0514, +14.5060],
[+40.4167, -3.7033],
[+50.0878, +14.4205],
[+50.4422, +30.5367],
[+47.4984, +19.0408],
[+62.0177, -6.7719],
[+36.1377, -5.3453],
[+49.4660, -2.5522],
[+54.1670, -4.4821],
[+49.1919, -2.1071],
[+78.2186, +15.6488],
[+34.5155, +69.1952],
[+40.1596, +44.5090],
[+40.3834, +49.8932],
[+26.1921, +50.5354],
[+23.7106, +90.3978],
[+27.4405, +89.6730],
[+4.9431, +114.9425],
[+39.9056, +116.3958],
[+41.7010, +44.7930],
[+28.6353, +77.2250],
[-6.1862, +106.8063],
[+33.3157, +44.3922],
[+35.7061, +51.4358],
[+31.7857, +35.2007],
[+35.6785, +139.6823],
[+15.3556, +44.2081],
[+31.9394, +35.9349],
[+11.5434, +104.8984],
[+51.1796, +71.4475],
[+25.2948, +51.5082],
[+42.8679, +74.5984],
[+29.3721, +47.9824],
[+17.9689, +102.6137],
[+33.8872, +35.5134],
[+3.1502, +101.7077],
[+4.1742, +73.5109],
[+47.9138, +106.9220],
[+19.7378, +96.2083],
[+27.7058, +85.3157],
[+39.0187, +125.7468],
[+23.6086, +58.5922],
[+33.6751, +73.0946],
[+14.5790, +120.9726],
[+24.6748, +46.6977],
[+1.2894, +103.8500],
[+6.9155, +79.8572],
[+33.5158, +36.2939],
[+37.5139, +126.9828],
[+38.5737, +68.7738],
[+13.7573, +100.5020],
[-8.5662, +125.5880],
[+39.9439, +32.8560],
[+37.9509, +58.3794],
[+41.3193, +69.2481],
[+24.4764, +54.3705],
[+21.0341, +105.8372],
[+35.1676, +33.3736],
[+25.0338, +121.5645],
[+17.1175, -61.8456],
[-34.6118, -58.4173],
[+25.0661, -77.3390],
[+13.0935, -59.6105],
[+17.2534, -88.7713],
[-19.0421, -65.2559],
[-15.7801, -47.9292],
[-33.4691, -70.6420],
[+9.9402, -84.1002],
[+15.2976, -61.3900],
[+18.4790, -69.8908],
[-0.2295, -78.5243],
[+13.7034, -89.2073],
[+12.0540, -61.7486],
[+14.6248, -90.5328],
[+6.8046, -58.1548],
[+18.5392, -72.3288],
[+14.0821, -87.2063],
[+17.9927, -76.7920],
[+45.4235, -75.6979],
[+4.6473, -74.0962],
[+23.1333, -82.3667],
[+19.4271, -99.1276],
[+12.1475, -86.2734],
[+8.9943, -79.5188],
[-25.3005, -57.6362],
[-12.0931, -77.0465],
[+17.2968, -62.7138],
[+13.9972, -61.0018],
[+13.2035, -61.2653],
[+5.8232, -55.1679],
[+10.6596, -61.4789],
[-34.8941, -56.0675],
[+10.4961, -66.8983],
[+38.8921, -77.0241],
[+18.3405, -64.9326],
[+18.2249, -63.0669],
[+12.5246, -70.0265],
[+32.2930, -64.7820],
[+18.4328, -64.6235],
[+19.3022, -81.3857],
[-51.7010, -57.8492],
[+4.9346, -52.3303],
[+64.1836, -51.7214],
[+15.9985, -61.7220],
[+14.5997, -61.0760],
[+16.6802, -62.2014],
[+12.1034, -68.9335],
[+18.4500, -66.0667],
[+46.7878, -56.1968],
[+21.4608, -71.1363],
[+30.0571, +31.2272],
[+36.7755, +3.0597],
[-8.8159, +13.2306],
[+3.7523, +8.7741],
[+9.0084, +38.7575],
[+6.4779, +2.6323],
[-24.6570, +25.9089],
[+12.3569, -1.5352],
[-3.3818, +29.3622],
[+6.8067, -5.2728],
[+11.5806, +43.1425],
[+15.3315, +38.9183],
[+0.3858, +9.4496],
[+13.4399, -16.6775],
[+5.5401, -0.2074],
[+9.5370, -13.6785],
[+11.8598, -15.5875],
[+3.8612, +11.5217],
[+14.9195, -23.5153],
[-1.2762, +36.7965],
[-11.7004, +43.2412],
[-4.2767, +15.2662],
[-4.3369, +15.3271],
[-29.2976, +27.4854],
[+6.3106, -10.8047],
[+32.8830, +13.1897],
[-18.9201, +47.5237],
[-13.9899, +33.7703],
[+12.6530, -7.9864],
[+33.9905, -6.8704],
[+18.0669, -15.9900],
[-20.1654, +57.4896],
[-25.9686, +32.5804],
[-22.5749, +17.0805],
[+13.5164, +2.1157],
[+9.0580, +7.4891],
[-1.9441, +30.0619],
[-15.4145, +28.2809],
[+0.3360, +6.7311],
[+14.6953, -17.4439],
[-4.6167, +55.4500],
[+8.4697, -13.2659],
[-17.8227, +31.0496],
[+2.0411, +45.3426],
[+15.5501, +32.5322],
[+4.8496, +31.6046],
[-26.3186, +31.1410],
[-25.7463, +28.1876],
[-6.1670, +35.7497],
[+6.1228, +1.2255],
[+12.1121, +15.0355],
[+36.8117, +10.1761],
[+0.3133, +32.5714],
[+4.3621, +18.5873],
[-12.7806, +45.2278],
[-20.8732, +55.4603],
[-15.9244, -5.7181],
[+27.1536, -13.2033],
[-35.2820, +149.1286],
[-18.1416, +178.4419],
[+1.3282, +172.9784],
[+7.1167, +171.3667],
[+6.9177, +158.1854],
[-0.5434, +166.9196],
[-41.2865, +174.7762],
[+7.5007, +134.6241],
[-9.4656, +147.1969],
[-9.4333, +159.9500],
[-13.8314, -171.7518],
[-21.1360, -175.2164],
[-8.5210, +179.1983],
[-17.7404, +168.3210],
[-14.2793, -170.7009],
[-21.2039, -159.7658],
[-17.5350, -149.5696],
[+13.4667, +144.7470],
[-12.1869, +96.8283],
[-22.2758, +166.4581],
[-19.0565, -169.9237],
[+15.2069, +145.7197],
[-29.0545, +167.9666],
[-25.0662, -130.1027],
[-13.2784, -176.1430],
[-10.4286, +105.6807],
[+32.3754, -86.2996],
[+58.3637, -134.5721],
[+33.4483, -112.0738],
[+34.7244, -92.2789],
[+38.5737, -121.4871],
[+39.7551, -104.9881],
[+41.7665, -72.6732],
[+39.1615, -75.5136],
[+30.4382, -84.2806],
[+33.7545, -84.3897],
[+21.2920, -157.8219],
[+43.6021, -116.2125],
[+39.8018, -89.6533],
[+39.7670, -86.1563],
[+41.5888, -93.6203],
[+39.0474, -95.6815],
[+38.1894, -84.8715],
[+30.4493, -91.1882],
[+44.3294, -69.7323],
[+38.9693, -76.5197],
[+42.3589, -71.0568],
[+42.7336, -84.5466],
[+44.9446, -93.1027],
[+32.3122, -90.1780],
[+38.5698, -92.1941],
[+46.5911, -112.0205],
[+40.8136, -96.7026],
[+39.1501, -119.7519],
[+43.2314, -71.5597],
[+40.2202, -74.7642],
[+35.6816, -105.9381],
[+42.6517, -73.7551],
[+35.7797, -78.6434],
[+46.8084, -100.7694],
[+39.9622, -83.0007],
[+35.4931, -97.4591],
[+44.9370, -123.0272],
[+40.2740, -76.8849],
[+41.8270, -71.4087],
[+34.0007, -81.0353],
[+44.3776, -100.3177],
[+36.1589, -86.7821],
[+30.2687, -97.7452],
[+40.7716, -111.8882],
[+44.2627, -72.5716],
[+37.5408, -77.4339],
[+47.0449, -122.9016],
[+38.3533, -81.6354],
[+43.0632, -89.4007],
[+41.1389, -104.8165]
];
var newCoords = [];
var circleIndex = [];
var circle;
function setup() {
//Initializig the map
mapId = createDiv();
mapId.id("mapid");
mapId.size(windowWidth, windowHeight);
mapId.position(0, 0)
mymap = L.map('mapid').setView([0, 0], 2.5);
//Loading tiles from mapbox
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoib3NrYXItcXVpcmluLWthY2tlYmFydCIsImEiOiJjazV4b2EyM2UyMWdtM2VtbG0wdzFvM2p2In0.SrMgYWTBUYDq3f703br1aQ'
}).addTo(mymap);
//creating the circles on the map
for (i = 0; i < coords.length; i++) {
circleIndex[i] = []
for (j = 0; j < coords[i].length; j++) {
circleIndex[i].push(coords[i][j]);
newCoords.push(coords[i][j]);
}
circle = L.circle(newCoords, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.3,
radius: 50000
}).addTo(mymap);
newCoords = []
//adding callback function to a click event for the circle. This will only work for the circle with the Index 1 of the array.
}
circle.on('click', function(click) {
alert(this.latlng);
});
}
Any suggestions, how to get a grasp on that? Can I maybe change the constructor somehow to add a different name-index for each row-index or something?
Sorry for the messy code ^^ I am open to edit-suggestions as well.
Cheers!
If you want to keep a reference to each circle, you can either add them to an array or a dict. I would use an array since you don't have anything to distinguish each circle like a string name.
Here is how I would edit the code.
Remember to also declare as var i or let i the variables inside the loops.
var coords = [
[+41.3317, +19.8172],
[+42.5075, +1.5218],
[+53.9678, +27.5766],
[+50.8371, +4.3676],
[+43.8608, +18.4214],
[+42.7105, +23.3238],
[+55.6763, +12.5681],
[+52.5235, +13.4115],
[+59.4389, +24.7545],
[+60.1699, +24.9384],
[+48.8567, +2.3510],
[+37.9792, +23.7166],
[+51.5002, -0.1262],
[+53.3441, -6.2675],
[+64.1353, -21.8952],
[+41.8955, +12.4823],
[+42.6740, +21.1788],
[+45.8150, +15.9785],
[+56.9465, +24.1049],
[+47.1411, +9.5215],
[+54.6896, +25.2799],
[+49.6100, +6.1296],
[+35.9042, +14.5189],
[+47.0167, +28.8497],
[+43.7325, +7.4189],
[+42.4602, +19.2595],
[+52.3738, +4.8910],
[+42.0024, +21.4361],
[+59.9138, +10.7387],
[+48.2092, +16.3728],
[+52.2297, +21.0122],
[+38.7072, -9.1355],
[+44.4479, +26.0979],
[+55.7558, +37.6176],
[+43.9424, +12.4578],
[+59.3328, +18.0645],
[+46.9480, +7.4481],
[+44.8048, +20.4781],
[+48.2116, +17.1547],
[+46.0514, +14.5060],
[+40.4167, -3.7033],
[+50.0878, +14.4205],
[+50.4422, +30.5367],
[+47.4984, +19.0408],
[+62.0177, -6.7719],
[+36.1377, -5.3453],
[+49.4660, -2.5522],
[+54.1670, -4.4821],
[+49.1919, -2.1071],
[+78.2186, +15.6488],
[+34.5155, +69.1952],
[+40.1596, +44.5090],
[+40.3834, +49.8932],
[+26.1921, +50.5354],
[+23.7106, +90.3978],
[+27.4405, +89.6730],
[+4.9431, +114.9425],
[+39.9056, +116.3958],
[+41.7010, +44.7930],
[+28.6353, +77.2250],
[-6.1862, +106.8063],
[+33.3157, +44.3922],
[+35.7061, +51.4358],
[+31.7857, +35.2007],
[+35.6785, +139.6823],
[+15.3556, +44.2081],
[+31.9394, +35.9349],
[+11.5434, +104.8984],
[+51.1796, +71.4475],
[+25.2948, +51.5082],
[+42.8679, +74.5984],
[+29.3721, +47.9824],
[+17.9689, +102.6137],
[+33.8872, +35.5134],
[+3.1502, +101.7077],
[+4.1742, +73.5109],
[+47.9138, +106.9220],
[+19.7378, +96.2083],
[+27.7058, +85.3157],
[+39.0187, +125.7468],
[+23.6086, +58.5922],
[+33.6751, +73.0946],
[+14.5790, +120.9726],
[+24.6748, +46.6977],
[+1.2894, +103.8500],
[+6.9155, +79.8572],
[+33.5158, +36.2939],
[+37.5139, +126.9828],
[+38.5737, +68.7738],
[+13.7573, +100.5020],
[-8.5662, +125.5880],
[+39.9439, +32.8560],
[+37.9509, +58.3794],
[+41.3193, +69.2481],
[+24.4764, +54.3705],
[+21.0341, +105.8372],
[+35.1676, +33.3736],
[+25.0338, +121.5645],
[+17.1175, -61.8456],
[-34.6118, -58.4173],
[+25.0661, -77.3390],
[+13.0935, -59.6105],
[+17.2534, -88.7713],
[-19.0421, -65.2559],
[-15.7801, -47.9292],
[-33.4691, -70.6420],
[+9.9402, -84.1002],
[+15.2976, -61.3900],
[+18.4790, -69.8908],
[-0.2295, -78.5243],
[+13.7034, -89.2073],
[+12.0540, -61.7486],
[+14.6248, -90.5328],
[+6.8046, -58.1548],
[+18.5392, -72.3288],
[+14.0821, -87.2063],
[+17.9927, -76.7920],
[+45.4235, -75.6979],
[+4.6473, -74.0962],
[+23.1333, -82.3667],
[+19.4271, -99.1276],
[+12.1475, -86.2734],
[+8.9943, -79.5188],
[-25.3005, -57.6362],
[-12.0931, -77.0465],
[+17.2968, -62.7138],
[+13.9972, -61.0018],
[+13.2035, -61.2653],
[+5.8232, -55.1679],
[+10.6596, -61.4789],
[-34.8941, -56.0675],
[+10.4961, -66.8983],
[+38.8921, -77.0241],
[+18.3405, -64.9326],
[+18.2249, -63.0669],
[+12.5246, -70.0265],
[+32.2930, -64.7820],
[+18.4328, -64.6235],
[+19.3022, -81.3857],
[-51.7010, -57.8492],
[+4.9346, -52.3303],
[+64.1836, -51.7214],
[+15.9985, -61.7220],
[+14.5997, -61.0760],
[+16.6802, -62.2014],
[+12.1034, -68.9335],
[+18.4500, -66.0667],
[+46.7878, -56.1968],
[+21.4608, -71.1363],
[+30.0571, +31.2272],
[+36.7755, +3.0597],
[-8.8159, +13.2306],
[+3.7523, +8.7741],
[+9.0084, +38.7575],
[+6.4779, +2.6323],
[-24.6570, +25.9089],
[+12.3569, -1.5352],
[-3.3818, +29.3622],
[+6.8067, -5.2728],
[+11.5806, +43.1425],
[+15.3315, +38.9183],
[+0.3858, +9.4496],
[+13.4399, -16.6775],
[+5.5401, -0.2074],
[+9.5370, -13.6785],
[+11.8598, -15.5875],
[+3.8612, +11.5217],
[+14.9195, -23.5153],
[-1.2762, +36.7965],
[-11.7004, +43.2412],
[-4.2767, +15.2662],
[-4.3369, +15.3271],
[-29.2976, +27.4854],
[+6.3106, -10.8047],
[+32.8830, +13.1897],
[-18.9201, +47.5237],
[-13.9899, +33.7703],
[+12.6530, -7.9864],
[+33.9905, -6.8704],
[+18.0669, -15.9900],
[-20.1654, +57.4896],
[-25.9686, +32.5804],
[-22.5749, +17.0805],
[+13.5164, +2.1157],
[+9.0580, +7.4891],
[-1.9441, +30.0619],
[-15.4145, +28.2809],
[+0.3360, +6.7311],
[+14.6953, -17.4439],
[-4.6167, +55.4500],
[+8.4697, -13.2659],
[-17.8227, +31.0496],
[+2.0411, +45.3426],
[+15.5501, +32.5322],
[+4.8496, +31.6046],
[-26.3186, +31.1410],
[-25.7463, +28.1876],
[-6.1670, +35.7497],
[+6.1228, +1.2255],
[+12.1121, +15.0355],
[+36.8117, +10.1761],
[+0.3133, +32.5714],
[+4.3621, +18.5873],
[-12.7806, +45.2278],
[-20.8732, +55.4603],
[-15.9244, -5.7181],
[+27.1536, -13.2033],
[-35.2820, +149.1286],
[-18.1416, +178.4419],
[+1.3282, +172.9784],
[+7.1167, +171.3667],
[+6.9177, +158.1854],
[-0.5434, +166.9196],
[-41.2865, +174.7762],
[+7.5007, +134.6241],
[-9.4656, +147.1969],
[-9.4333, +159.9500],
[-13.8314, -171.7518],
[-21.1360, -175.2164],
[-8.5210, +179.1983],
[-17.7404, +168.3210],
[-14.2793, -170.7009],
[-21.2039, -159.7658],
[-17.5350, -149.5696],
[+13.4667, +144.7470],
[-12.1869, +96.8283],
[-22.2758, +166.4581],
[-19.0565, -169.9237],
[+15.2069, +145.7197],
[-29.0545, +167.9666],
[-25.0662, -130.1027],
[-13.2784, -176.1430],
[-10.4286, +105.6807],
[+32.3754, -86.2996],
[+58.3637, -134.5721],
[+33.4483, -112.0738],
[+34.7244, -92.2789],
[+38.5737, -121.4871],
[+39.7551, -104.9881],
[+41.7665, -72.6732],
[+39.1615, -75.5136],
[+30.4382, -84.2806],
[+33.7545, -84.3897],
[+21.2920, -157.8219],
[+43.6021, -116.2125],
[+39.8018, -89.6533],
[+39.7670, -86.1563],
[+41.5888, -93.6203],
[+39.0474, -95.6815],
[+38.1894, -84.8715],
[+30.4493, -91.1882],
[+44.3294, -69.7323],
[+38.9693, -76.5197],
[+42.3589, -71.0568],
[+42.7336, -84.5466],
[+44.9446, -93.1027],
[+32.3122, -90.1780],
[+38.5698, -92.1941],
[+46.5911, -112.0205],
[+40.8136, -96.7026],
[+39.1501, -119.7519],
[+43.2314, -71.5597],
[+40.2202, -74.7642],
[+35.6816, -105.9381],
[+42.6517, -73.7551],
[+35.7797, -78.6434],
[+46.8084, -100.7694],
[+39.9622, -83.0007],
[+35.4931, -97.4591],
[+44.9370, -123.0272],
[+40.2740, -76.8849],
[+41.8270, -71.4087],
[+34.0007, -81.0353],
[+44.3776, -100.3177],
[+36.1589, -86.7821],
[+30.2687, -97.7452],
[+40.7716, -111.8882],
[+44.2627, -72.5716],
[+37.5408, -77.4339],
[+47.0449, -122.9016],
[+38.3533, -81.6354],
[+43.0632, -89.4007],
[+41.1389, -104.8165]
];
//var newCoords = []; // this is only used inside the loop so it can be declared there
//var circleIndex = []; // this is not being used
//var circle; // this gets overridden on each iteration
var circles = []; // Use this array to store the created circles
function setup() {
//Initializig the map
mapId = createDiv();
mapId.id("mapid");
mapId.size(windowWidth, windowHeight);
mapId.position(0, 0)
mymap = L.map('mapid').setView([0, 0], 2.5);
//Loading tiles from mapbox
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoib3NrYXItcXVpcmluLWthY2tlYmFydCIsImEiOiJjazV4b2EyM2UyMWdtM2VtbG0wdzFvM2p2In0.SrMgYWTBUYDq3f703br1aQ'
}).addTo(mymap);
//creating the circles on the map
// Tip: Instead of looking at the coords multidimensional array as a matrix, think of
// it as a list of coordinate pairs, which you can loop without using indexes
for (let newCoordPair of coords) {
var circle = L.circle(newCoordPair, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.3,
radius: 50000
}).addTo(mymap);
circles.push(circle);
// Add here the event to the circle if you want all the circles to have it
circle.on('click', function(click) {
alert(this.latlng);
});
}
}
I am working with the javascript Google maps API and I am looking to restrict the viewing area of the map to only show PA. I currently have some kml data being used to display the county lines in PA. Now I just need to keep the user within the state of PA. How do I go about setting a restriction on the map in javascript?
I have looked up other posts regarding holes? Like cutting PA out of the map and the rest of the world is a polygon that gets its colored changed and then PA is still the main focus. I have no idea how to implement such a feature though. I am very new with working with Google Maps API.
get a source for the geographic coordinates for the state's boundaries (One source would be http://www.gadm.org).
Invert that polygon (example) and display it on a Google Maps Javascript API v3 map (note that KmlLayer doesn't seem to handle KML with holes, so the example uses a third party KML parser).
Restrict the map to the area of Pennsylvania
proof of concept fiddle
code snippet (state polygon simplified to fit):
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
minZoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(39.719429, -80.519562),
new google.maps.LatLng(42.267879, -74.690033));
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var geoxml = new geoXML3.parser({
map: map,
zoom: false,
suppressInfoWindows: true,
});
geoxml.parseKmlString(PAstr);
var lastCenter = bounds.getCenter();
var polygon = new google.maps.Polygon({
path: geoxml.docs[0].gpolygons[0].getPaths().getAt(1)
});
google.maps.event.addListener(map, 'center_changed', function() {
var center = map.getCenter();
if (!google.maps.geometry.poly.containsLocation(center, polygon)) {
map.setCenter(lastCenter);
} else {
lastCenter = center;
}
});
});
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var PAstr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.2"><Document><name>United States divisions. Level 1</name><description><![CDATA[GADM boundaries.]]></description><Style id="14"><LineStyle><width>1.5</width><color>ff000000</color></LineStyle><PolyStyle><color>FF6E6E6E</color><fill>1</fill></PolyStyle></Style><Placemark><name>Pennsylvania</name><description><![CDATA[State]]></description><styleUrl>#14</styleUrl><visibility>1</visibility><MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>180,85 90,85 0,85 -90,85 -180,85 -180,0 -180,-85 -90,-85 0,-85 90,-85 180,-85 180,0 180,85</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs><LinearRing><coordinates>-79.7624969482421,42.2678794860841 -79.7633285522461,42.1857109069827 -79.7627868652343,42.0479621887208 -79.7625885009766,42.0206985473635 -79.7624206542968,41.9984512329102 -79.6110916137694,41.99813079834 -79.5225830078124,41.9979400634767 -79.2611694335937,41.9980888366699 -79.1505813598633,41.9985389709475 -79.0634460449219,41.9986991882325 -78.9991912841796,41.998649597168 -78.9788131713866,41.9985809326172 -78.9694213867187,41.998561859131 -78.9465789794921,41.9988212585449 -78.9441986083984,41.9988021850587 -78.922492980957,41.9987907409671 -78.7538909912109,41.9986915588379 -78.7409210205078,41.9986801147462 -78.6284790039062,41.9990615844728 -78.4834060668945,41.9995422363281 -78.3443069458007,41.9997291564943 -78.3060302734375,42.0001220703126 -78.2905731201172,41.9997901916504 -78.2265167236328,41.9998817443848 -78.2086181640624,41.9999809265137 -77.9942932128906,41.9989509582521 -77.9662170410156,41.9988098144534 -77.8686218261718,41.9989204406741 -77.7512664794922,41.9990386962892 -77.7030868530273,41.9990921020507 -77.688362121582,41.9991989135744 -77.6096191406249,41.9997901916504 -77.4394073486328,42.0010490417482 -77.1767425537108,42.000171661377 -77.113296508789,42.0009918212892 -76.965103149414,42.0023117065431 -76.9291076660156,42.0024108886719 -76.9095230102538,42.0024719238282 -76.8965530395507,42.0026092529297 -76.6476364135742,42.001880645752 -76.6334381103514,42.001720428467 -76.5963821411133,42.0013122558594 -76.5618438720703,42.000919342041 -76.55313873291,42.0008316040039 -76.5228729248046,42.0004920959474 -76.4660491943359,41.9998512268067 -76.3826065063476,41.9989204406741 -76.1466979980469,41.9991302490234 -76.1165161132812,41.9991607666016 -76.1060333251953,41.9990615844728 -75.8490295410156,41.9986610412598 -75.7614364624023,41.9986991882325 -75.6029205322266,41.9987716674805 -75.6015090942383,41.9987716674805 -75.5984268188477,41.998779296875 -75.4833908081054,41.9989700317383 -75.3545074462891,41.9991912841799 -75.3483428955078,41.9969100952151 -75.34464263916,41.9946403503418 -75.342788696289,41.9928207397461 -75.3403320312499,41.990089416504 -75.3398513793945,41.9870719909669 -75.3393020629882,41.9847908020022 -75.3391265869141,41.9825401306153 -75.3400497436523,41.9807090759277 -75.3406372070311,41.9798889160156 -75.3413391113281,41.9789199829102 -75.3422088623047,41.9769287109376 -75.3418579101562,41.9753417968751 -75.3410568237305,41.9741287231445 -75.339859008789,41.97274017334 -75.3385162353515,41.9714698791504 -75.3360366821288,41.9706497192384 -75.3342132568359,41.9697189331054 -75.3305130004882,41.9682807922364 -75.3248672485351,41.9647903442383 -75.3203277587889,41.9594917297364 -75.3184585571289,41.9573097229004 -75.3167572021484,41.9553413391113 -75.3143920898437,41.9521217346191 -75.3125839233398,41.9507293701172 -75.310188293457,41.9500885009766 -75.3083724975585,41.9494209289551 -75.3077163696288,41.9491806030273 -75.304588317871,41.9496917724609 -75.3027801513671,41.9505310058594 -75.3003082275391,41.9518890380862 -75.2979278564453,41.9528999328613 -75.2959823608398,41.9532508850098 -75.2941360473633,41.9532508850098 -75.2927932739258,41.9522094726562 -75.2922821044921,41.9514312744141 -75.2916107177733,41.9503707885744 -75.289207458496,41.9482421875001 -75.2855072021483,41.9450607299806 -75.2813873291015,41.9415702819827 -75.2787475585936,41.9391403198243 -75.2776336669922,41.9370803833009 -75.2766876220703,41.9342193603517 -75.2749633789062,41.9305496215821 -75.2750167846679,41.928279876709 -75.2745285034179,41.9246406555176 -75.2734222412109,41.920539855957 -75.2716598510742,41.917781829834 -75.2695770263671,41.9150619506837 -75.2677307128906,41.9123306274414 -75.2671966552733,41.9099311828613 -75.2670593261719,41.9072494506837 -75.2671432495117,41.9046096801758 -75.2677612304687,41.9027900695803 -75.2689971923828,41.9000701904298 -75.2708587646484,41.8982620239258 -75.272102355957,41.8964500427246 -75.2721099853516,41.8937187194824 -75.2706527709961,41.8914184570313 -75.2676696777343,41.8894805908203 -75.2671585083008,41.8892288208007 -75.2639770507812,41.8876686096191 -75.2622680664062,41.886890411377 -75.2609863281249,41.8848915100099 -75.2598571777343,41.881690979004 -75.2592773437499,41.8798713684083 -75.2587890624999,41.8782005310059 -75.2591857910155,41.8761901855469 -75.260513305664,41.8746719360352 -75.2617568969726,41.8733291625977 -75.2625198364257,41.8713111877444 -75.2622528076172,41.8687705993652 -75.2613525390624,41.8673210144044 -75.259147644043,41.8653297424316 -75.2574157714844,41.8646392822266 -75.2536239624023,41.8647804260254 -75.2505264282227,41.8651809692386 -75.2469329833984,41.8659706115725 -75.2445907592773,41.8662109375 -75.2426071166992,41.8664207458499 -75.2376861572266,41.8664093017578 -75.2357330322264,41.8653793334962 -75.2338638305664,41.8644905090333 -75.2334060668945,41.8641014099122 -75.2326965332031,41.8634986877444 -75.2309188842773,41.8623085021973 -75.2278366088867,41.860939025879 -75.2253799438477,41.8604888916016 -75.2229232788085,41.8613891601562 -75.2210159301757,41.86238861084 -75.2178878784179,41.8641510009768 -75.2154922485351,41.8668212890627 -75.2121887207031,41.8685989379884 -75.2116775512695,41.8687400817871 -75.2093276977539,41.8690795898438 -75.2066116333007,41.869400024414 -75.2060089111328,41.8694801330568 -75.2031631469727,41.8695106506348 -75.1974029541016,41.8683319091797 -75.193717956543,41.866970062256 -75.1913299560547,41.8655014038088 -75.1895294189453,41.8641014099122 -75.1876983642578,41.8636207580566 -75.1859283447265,41.8631210327148 -75.1833267211914,41.8638801574709 -75.1811370849609,41.865909576416 -75.1797409057617,41.8680992126466 -75.1787033081054,41.8697204589845 -75.1763229370116,41.8710594177246 -75.1741790771484,41.8717193603516 -75.1717071533203,41.871711730957 -75.1698989868163,41.87073135376 -75.1682815551757,41.8688201904296 -75.1678771972656,41.8659896850586 -75.1674270629882,41.8639793395996 -75.1674880981445,41.8617019653321 -75.1663131713867,41.857780456543 -75.1641082763671,41.8547821044922 -75.16153717041,41.8526992797852 -75.1584930419922,41.8517799377441 -75.1551666259766,41.8512992858887 -75.1511230468749,41.851718902588 -75.1502761840819,41.8518218994142 -75.1477661132812,41.8521194458008 -75.1436614990234,41.8528289794922 -75.1431121826171,41.8526802062989 -75.1409912109374,41.8521003723146 -75.1397628784179,41.8516502380372 -75.1381988525391,41.8508796691895 -75.1354293823242,41.8489799499512 -75.1321105957031,41.8476791381836 -75.1293106079102,41.8470802307131 -75.1259994506836,41.8465995788574 -75.1219177246093,41.8461494445801 -75.1182327270507,41.8452301025391 -75.1157684326172,41.844310760498 -75.1145401000977,41.8429489135742 -75.1144714355469,41.8411598205567 -75.1139068603515,41.8395614624026 -75.1140365600585,41.8359298706057 -75.1139907836914,41.8323020935058 -75.1142272949218,41.8297996520999 -75.1133270263672,41.8275489807129 -75.1118927001953,41.8254890441895 -75.1101303100585,41.8240509033205 -75.1087570190429,41.8229904174806 -75.1078567504883,41.8225402832031 -75.1059036254882,41.8217010498048 -75.1034774780273,41.8202896118166 -75.1004333496094,41.8193321228027 -75.0986175537109,41.8183784484863 -75.0962066650389,41.8165206909181 -75.094367980957,41.8160896301269 -75.0912933349609,41.8152198791504 -75.0907135009766,41.8151817321779 -75.0882568359374,41.8150100708009 -75.0857772827148,41.8154220581054 -75.0833206176757,41.8153686523439 -75.0808563232421,41.8153305053713 -75.077796936035,41.8148193359376 -75.0741424560546,41.813388824463 -75.0729370117186,41.8124504089357 -75.0724029541016,41.810619354248 -75.0722427368163,41.8087615966797 -75.0727081298828,41.8067588806152 -75.0731658935547,41.8056411743165 -75.0741195678711,41.8033218383791 -75.0752029418945,41.8006896972657 -75.0772171020507,41.7992401123047 -75.079116821289,41.7978591918946 -75.0796966552734,41.7974319458009 -75.0821533203124,41.7972412109376 -75.0827102661133,41.7971992492675 -75.0852432250975,41.7972412109376 -75.0857772827148,41.7971687316896 -75.0882720947265,41.7968406677246 -75.0914077758788,41.796112060547 -75.0932464599608,41.7952117919922 -75.0951080322266,41.7938499450684 -75.0969696044921,41.7920417785646 -75.0988311767578,41.7893218994141 -75.099639892578,41.7878494262696 -75.1000671386719,41.7870597839357 -75.101676940918,41.7830200195312 -75.1019668579102,41.7798004150392 -75.1013565063475,41.777069091797 -75.100227355957,41.7745094299316 -75.0971221923828,41.7720298767089 -75.0940093994139,41.7711486816409 -75.0897598266602,41.7714385986329 -75.0842132568359,41.7717895507814 -75.0792694091797,41.7721519470215 -75.0749664306641,41.7716102600099 -75.0700759887694,41.7706108093264 -75.0646286010742,41.7682418823243 -75.0614166259766,41.766040802002 -75.0586929321288,41.762218475342 -75.0560684204102,41.7582702636719 -75.0546874999999,41.7530708312989 -75.0537033081055,41.7478294372559 -75.0538482666015,41.7426109313966 -75.0539474487304,41.7389717102052 -75.0542373657226,41.735149383545 -75.0542526245116,41.730350494385 -75.0530624389648,41.7260589599612 -75.0519332885742,41.7226295471191 -75.0506362915039,41.7196998596192 -75.0500488281249,41.7165222167971 -75.0498580932616,41.7152786254882 -75.0511474609375,41.7134895324707 -75.0536270141602,41.7126312255859 -75.0567169189453,41.7122306823733 -75.0580978393555,41.7124595642091 -75.0592727661132,41.7126502990724 -75.0597610473632,41.7125816345215 -75.063606262207,41.7120208740237 -75.0659408569335,41.7116889953614 -75.0665969848633,41.7115097045898 -75.0679168701172,41.7093200683595 -75.0673294067383,41.7065887451172 -75.0648880004882,41.7038612365723 -75.0618286132812,41.7011184692384 -75.0590820312499,41.6977386474609 -75.0564880371094,41.6940803527832 -75.0561981201172,41.6935806274414 -75.0533981323242,41.6871910095215 -75.053337097168,41.6829299926758 -75.0535507202148,41.6808395385743 -75.0542068481445,41.6785812377932 -75.0561370849609,41.676342010498 -75.057746887207,41.6748390197754 -75.0587463378906,41.6729698181153 -75.0587997436523,41.6712989807132 -75.0571670532226,41.669719696045 -75.0553665161132,41.6674308776856 -75.0547790527343,41.6669197082521 -75.052848815918,41.6634101867678 -75.0517578124999,41.6608200073243 -75.0510711669921,41.6572189331057 -75.0504531860352,41.6529617309572 -75.050308227539,41.6494407653809 -75.0493621826171,41.6412506103517 -75.0487365722656,41.6344490051271 -75.0473098754883,41.6298599243164 -75.0462036132812,41.6262016296387 -75.0450973510741,41.6225509643556 -75.044563293457,41.620719909668 -75.0446166992186,41.6189002990723 -75.0465240478514,41.6171302795413 -75.0496063232422,41.6167297363281 -75.0520629882812,41.6167793273926 -75.0537490844726,41.6175689697267 -75.0568237304686,41.618480682373 -75.0588073730468,41.6169090270997 -75.0604858398438,41.6155700683594 -75.0603561401366,41.6133995056152 -75.0618133544922,41.611270904541 -75.0630111694335,41.6103286743165 -75.0652389526367,41.6099319458008 -75.068260192871,41.6103515625001 -75.0703659057616,41.6103591918948 -75.0728378295897,41.6090087890626 -75.0734558105469,41.6081008911133 -75.0728607177734,41.6053695678712 -75.0710372924804,41.603099822998 -75.0699462890624,41.6019592285157 -75.0679931640625,41.599910736084 -75.0644531249999,41.5961189270021 -75.0612716674804,41.5935287475587 -75.0582122802734,41.5921592712402 -75.0550079345702,41.5905685424805 -75.0524597167969,41.5877189636232 -75.0503692626953,41.5856819152831 -75.0472259521484,41.5821304321292 -75.0461273193359,41.5805091857913 -75.0429687499999,41.5748596191407 -75.0408172607422,41.5710296630861 -75.0388565063476,41.5699310302736 -75.0359497070312,41.5670890808108 -75.0326385498047,41.5656814575196 -75.0293807983398,41.5636405944825 -75.0246658325195,41.5598106384278 -75.0216369628905,41.5562515258789 -75.0191879272461,41.552978515625 -75.0175704956055,41.5498199462893 -75.0167770385742,41.5470695495608 -75.0174026489257,41.5447998046875 -75.0189361572265,41.543312072754 -75.0198287963867,41.5429191589357 -75.0215377807616,41.5417213439944 -75.0229568481445,41.5402908325198 -75.0227890014648,41.5377197265625 -75.0217590332031,41.5352897644044 -75.0199890136718,41.5335197448733 -75.017578125,41.5321121215821 -75.0133361816405,41.5306701660156 -75.0080032348633,41.5277519226074 -75.0055770874023,41.525489807129 -75.0035095214843,41.5229301452636 -75.0022430419921,41.5202293395997 -75.001609802246,41.518180847168 -75.0016632080078,41.5156898498535 -75.0022506713867,41.5145606994629 -75.0029067993163,41.5125198364259 -75.0042266845703,41.5105094909671 -75.0030364990233,41.5091514587403 -75.0025024414062,41.5086212158205 -74.999412536621,41.5081520080569 -74.9963302612304,41.508541107178 -74.991958618164,41.0772590637208 -74.9956970214843,41.076099395752 -74.9993362426758,41.0747184753418 -75.0023803710938,41.0728988647461 -75.0046005249023,41.0712203979494 -75.0061264038086,41.069839477539 -75.0039901733397,40.4113121032716 -75.0009689331055,40.4117393493652 -74.9982070922852,40.4120216369629 -74.9973373413086,40.4120216369629 -74.9956665039062,40.0347900390626 -74.996696472168,40.0338020324708 -75.0004806518555,40.031120300293 -75.0047912597656,40.0286598205568 -75.7875213623046,39.7230796813965 -76.0148086547852,39.7228012084962 -76.13916015625,39.7222785949708 -76.2241516113281,39.7219314575195 -76.8401412963867,39.7205390930176 -76.9962158203124,39.7196922302247 -76.9998092651367,39.7196807861328 -77.1211929321289,39.7194290161132 -77.2151565551757,39.7196121215821 -77.3926773071289,39.7199516296387 -77.4596481323242,39.7204093933106 -77.4674224853514,39.7204818725588 -77.6719360351562,39.7214889526368 -77.9380493164062,39.7240104675295 -78.1007080078125,39.7235412597659 -78.2101516723632,39.7232208251954-78.9146423339844,39.7231597900393 -79.0408172607422,39.7225494384766 -79.3213195800781,39.7221603393555 -79.3889007568359,39.7220687866212 -79.3900909423828,39.721950531006 -79.3912963867188,39.7220306396485 -79.9146881103516,39.7221107482912 -80.1911468505859,39.7216796875001 -80.4243698120117,39.7213516235352 -80.5170516967773,39.7212219238282 -80.5178604125977,39.7543106079103 -80.5192489624023,39.9298896789554 -80.5189361572266,40.1081695556641 -80.5188827514648,40.1618995666504 -80.5187301635742,40.2882804870608 -80.5189819335937,40.4013214111328 -80.2618408203124,42.0687103271484 -80.2473526000976,42.0776519775392 -80.2314605712889,42.0825309753419 -80.2185974121094,42.0859794616699 -80.1485519409179,42.130599975586 -80.1496505737305,42.1269416809083 -80.1514205932617,42.1246299743653 -80.1537933349609,42.1218605041504 -80.011848449707,42.1669502258303 -80.0039520263672,42.1711921691896 -79.7869415283203,42.2569999694825 -79.7752685546875,42.2603797912598 -79.7673492431641,42.2646102905273 -79.7624969482421,42.2678794860841</coordinates></LinearRing></innerBoundaryIs></Polygon></MultiGeometry></Placemark></Document></kml>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script>
function dummy() {}
window.dummy = dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map_canvas"></div>
I am trying to draw a Google Map with a state (Texas) filled with a grey background, and a city (San Antonio) with a lighter background (white). my approach is this:
var stateLayer = new google.maps.Data();
var countyLayer = new google.maps.Data();
stateLayer.loadGeoJson('state.json');
countyLayer.loadGeoJson('county.json');
stateLayer.setStyle({
fillColor: 'gray',
strokeColor: '#000',
strokeOpacity: 1,
strokeWeight: 1
});
countyLayer.setStyle({
fillColor: '#fff',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1
});
stateLayer.setMap(map);
countyLayer.setMap(map);
but the result that i get is gray all over the state (including the county).
please see this jsFiddle
One option would be to make a "hole" in the Texas MultiPolygon where San Antonio is:
proof of concept fiddle
code snippet: (note due to character limitations in the post the code snippet includes a simplified polygon for Texas, the fiddle contains the full MultiPolygon)
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 29.424122,
lng: -98.493629
},
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
// Load GeoJSON.
var stateLayer = new google.maps.Data();
var countyLayer = new google.maps.Data();
stateLayer.addGeoJson(stateGeoJson);
countyLayer.loadGeoJson('https://api.myjson.com/bins/3inb5');
stateLayer.setStyle({
fillColor: 'gray',
strokeColor: '#000',
strokeOpacity: 1,
strokeWeight: 1
});
countyLayer.setStyle({
fillColor: 'red', // make red so I can see that it is working
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1
});
stateLayer.setMap(map);
countyLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
var stateGeoJson = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"GEO_ID":"0400000US48","STATE":"48","NAME":"Texas"},"geometry":{"type":"MultiPolygon","coordinates":[
// simplified texas
[[[-106.6552734375,32.0639555946604],[-103.0078125,32.0639555946604],[-103.0078125,36.491973470593685],[-99.9755859375,36.491973470593685],[-99.9755859375,34.59704151614417],[-99.0087890625,34.23451236236984],[-97.822265625,33.90689555128866],[-96.240234375,33.687781758439364],[-95.09765625,33.870415550941836],[-94.0869140625,33.43144133557529],[-94.0869140625,31.989441837922904],[-93.3837890625,31.05293398570514],[-93.9990234375,29.611670115197377],[-97.1630859375,27.916766641249065],[-97.470703125,26.745610382199025],[-97.03125,26.03704188651584],[-97.5146484375,25.878994400196202],[-99.140625,26.509904531413927],[-99.5361328125,27.68352808378776],[-100.3271484375,28.34306490482549],[-100.72265625,29.19053283229458],[-101.42578125,29.726222319395507],[-102.6123046875,29.76437737516313],[-103.095703125,28.998531814051795],[-104.6337890625,29.649868677972304],[-104.8974609375,30.524413269923986],[-106.6552734375,32.0639555946604]],
// san antonio
[[-98.68846,29.21083],
[-98.682015,29.20863],
[-98.63851,29.193774],
[-98.625318,29.189273],
[-98.590587,29.177251],
[-98.585943,29.175655],
[-98.58573,29.175582],
[-98.557348,29.165861],
[-98.547608,29.162526],
[-98.526902,29.155435],
[-98.52462,29.154688],
[-98.524215,29.154515],
[-98.497539,29.14541],
[-98.484266,29.140821],
[-98.484041,29.140744],
[-98.465819,29.134476],
[-98.441548,29.126127],
[-98.441456,29.126092],
[-98.431298,29.122507],
[-98.407336,29.114435],
[-98.397585,29.125244],
[-98.372654,29.1555],
[-98.330197,29.206269],
[-98.327196,29.209868],
[-98.304559,29.237003],
[-98.303019,29.23885],
[-98.300464,29.24191],
[-98.295924,29.247353],
[-98.29568,29.250546],
[-98.29246,29.251235],
[-98.28702,29.257626],
[-98.283214,29.26233],
[-98.255615,29.296176],
[-98.249288,29.303938],
[-98.237988,29.317737],
[-98.20469,29.358113],
[-98.204587,29.358236],
[-98.188143,29.378514],
[-98.138033,29.439391],
[-98.137187,29.440428],
[-98.134171,29.441751],
[-98.129128,29.444268],
[-98.128681,29.445363],
[-98.12512,29.446405],
[-98.120922,29.446476],
[-98.121075,29.449048],
[-98.124107,29.453224],
[-98.126771,29.454736],
[-98.126864,29.457223],
[-98.125594,29.45824],
[-98.123575,29.457675],
[-98.120243,29.457468],
[-98.117774,29.46023],
[-98.117033,29.461925],
[-98.116902,29.463884],
[-98.118722,29.469263],
[-98.120577,29.470841],
[-98.121138,29.473542],
[-98.122276,29.473019],
[-98.124087,29.474003],
[-98.12488,29.475642],
[-98.123057,29.47638],
[-98.122322,29.477646],
[-98.12514,29.480196],
[-98.125881,29.481648],
[-98.128986,29.482453],
[-98.131106,29.481381],
[-98.131861,29.480127],
[-98.134125,29.478923],
[-98.136269,29.479265],
[-98.137092,29.481191],
[-98.136802,29.482495],
[-98.135481,29.483089],
[-98.13565,29.484216],
[-98.137172,29.484234],
[-98.139449,29.482485],
[-98.14058,29.484152],
[-98.139491,29.485549],
[-98.141786,29.486485],
[-98.143622,29.485743],
[-98.142793,29.484027],
[-98.144466,29.484231],
[-98.143982,29.482492],
[-98.142467,29.481611],
[-98.142959,29.479741],
[-98.144229,29.47813],
[-98.150015,29.475667],
[-98.150989,29.476278],
[-98.150156,29.479752],
[-98.150786,29.48058],
[-98.152409,29.478616],
[-98.155754,29.477809],
[-98.159124,29.478651],
[-98.1613,29.477716],
[-98.164638,29.478091],
[-98.166581,29.479439],
[-98.166832,29.482036],
[-98.168767,29.487092],
[-98.166943,29.489622],
[-98.168288,29.491169],
[-98.168344,29.496153],
[-98.169381,29.497528],
[-98.171507,29.496747],
[-98.172583,29.494503],
[-98.173764,29.496627],
[-98.176336,29.496688],
[-98.178625,29.497662],
[-98.181543,29.497392],
[-98.183807,29.495747],
[-98.184914,29.493393],
[-98.184323,29.492716],
[-98.180456,29.492782],
[-98.179092,29.490911],
[-98.179651,29.489569],
[-98.177608,29.487176],
[-98.176923,29.485399],
[-98.178017,29.484442],
[-98.18311,29.484899],
[-98.187592,29.488212],
[-98.188694,29.491363],
[-98.189964,29.492843],
[-98.18975,29.49665],
[-98.188285,29.499412],
[-98.186324,29.5012],
[-98.1899,29.505719],
[-98.190148,29.509328],
[-98.195356,29.51111],
[-98.195891,29.510103],
[-98.198573,29.509365],
[-98.200237,29.511445],
[-98.19969,29.513596],
[-98.19701,29.514757],
[-98.196923,29.515731],
[-98.198571,29.517326],
[-98.201885,29.516869],
[-98.202533,29.517705],
[-98.201332,29.519048],
[-98.204779,29.52215],
[-98.208403,29.522529],
[-98.209975,29.523365],
[-98.214272,29.522963],
[-98.216354,29.524349],
[-98.218467,29.523369],
[-98.219147,29.52393],
[-98.219368,29.528533],
[-98.221078,29.531246],
[-98.222182,29.534811],
[-98.222146,29.537986],
[-98.224399,29.540312],
[-98.229439,29.54195],
[-98.229455,29.543401],
[-98.224413,29.543463],
[-98.22168,29.544381],
[-98.221332,29.544362],
[-98.220965,29.545248],
[-98.22094,29.546194],
[-98.221589,29.547932],
[-98.222653,29.549032],
[-98.224912,29.549681],
[-98.225432,29.549718],
[-98.226352,29.549642],
[-98.226666,29.54941],
[-98.227105,29.547141],
[-98.229565,29.54669],
[-98.230589,29.548108],
[-98.230695,29.550837],
[-98.233899,29.554893],
[-98.239204,29.556575],
[-98.242992,29.557058],
[-98.246402,29.556],
[-98.248931,29.554596],
[-98.248885,29.551521],
[-98.250755,29.550017],
[-98.253796,29.550311],
[-98.255361,29.552332],
[-98.254636,29.554009],
[-98.255605,29.554917],
[-98.25853,29.554935],
[-98.259621,29.552449],
[-98.260075,29.549621],
[-98.25937,29.547487],
[-98.257806,29.545714],
[-98.253881,29.544211],
[-98.253021,29.54321],
[-98.253882,29.540982],
[-98.255377,29.540491],
[-98.259746,29.541265],
[-98.260658,29.542349],
[-98.264818,29.543949],
[-98.267432,29.544178],
[-98.270389,29.54573],
[-98.27084,29.548822],
[-98.272924,29.550878],
[-98.272973,29.550913],
[-98.273036,29.550913],
[-98.27333,29.551006],
[-98.279069,29.551141],
[-98.284329,29.553365],
[-98.287782,29.559373],
[-98.294766,29.561531],
[-98.298524,29.561141],
[-98.298328,29.56322],
[-98.29985,29.566868],
[-98.2999,29.566918],
[-98.301539,29.568342],
[-98.301882,29.568759],
[-98.301938,29.568828],
[-98.302308,29.569476],
[-98.302903,29.574654],
[-98.305066,29.576303],
[-98.306073,29.579114],
[-98.303927,29.582426],
[-98.304431,29.58522],
[-98.310636,29.589182],
[-98.312058,29.590854],
[-98.310928,29.594473],
[-98.31095,29.59456],
[-98.310837,29.598332],
[-98.312033,29.601543],
[-98.313292,29.602236],
[-98.31348,29.602263],
[-98.313494,29.602279],
[-98.314806,29.602844],
[-98.320456,29.601939],
[-98.326234,29.604079],
[-98.328651,29.608233],
[-98.328736,29.610537],
[-98.335328,29.611301],
[-98.339187,29.6131],
[-98.34234,29.617193],
[-98.345121,29.618092],
[-98.345673,29.619742],
[-98.342715,29.62195],
[-98.342271,29.62556],
[-98.340861,29.627541],
[-98.340604,29.630237],
[-98.343052,29.634768],
[-98.343351,29.635138],
[-98.343401,29.63532],
[-98.343672,29.635611],
[-98.343874,29.635952],
[-98.344178,29.63638],
[-98.346072,29.639313],
[-98.347618,29.645018],
[-98.3434,29.650993],
[-98.342733,29.653442],
[-98.345108,29.655058],
[-98.356629,29.658648],
[-98.359781,29.662987],
[-98.360802,29.665226],
[-98.363764,29.666732],
[-98.370994,29.664303],
[-98.377117,29.662728],
[-98.378906,29.662949],
[-98.380541,29.668434],
[-98.380854,29.671906],
[-98.381646,29.674085],
[-98.382419,29.674429],
[-98.382452,29.674443],
[-98.382566,29.67446],
[-98.384341,29.676534],
[-98.384113,29.678591],
[-98.381781,29.680455],
[-98.377325,29.682918],
[-98.376315,29.687055],
[-98.376711,29.689041],
[-98.380827,29.696283],
[-98.380523,29.699539],
[-98.380965,29.701485],
[-98.380161,29.703929],
[-98.375874,29.706215],
[-98.374595,29.706273],
[-98.371274,29.705],
[-98.368087,29.705647],
[-98.362327,29.70597],
[-98.35722,29.703912],
[-98.354557,29.703864],
[-98.35128,29.704867],
[-98.347273,29.706777],
[-98.344689,29.707239],
[-98.342868,29.708384],
[-98.34135,29.70965],
[-98.340367,29.711795],
[-98.340361,29.715819],
[-98.338724,29.71705],
[-98.338006,29.719146],
[-98.338618,29.721786],
[-98.341505,29.723337],
[-98.346283,29.726703],
[-98.349208,29.727511],
[-98.350208,29.728748],
[-98.352406,29.731884],
[-98.352205,29.73415],
[-98.355817,29.734072],
[-98.35672,29.732885],
[-98.356825,29.732614],
[-98.35692,29.732452],
[-98.359382,29.729037],
[-98.364366,29.724332],
[-98.369828,29.720693],
[-98.37521,29.719975],
[-98.375644,29.722654],
[-98.374999,29.724619],
[-98.3735,29.726022],
[-98.373248,29.729186],
[-98.373729,29.730594],
[-98.376967,29.732618],
[-98.384353,29.735141],
[-98.388262,29.733943],
[-98.390972,29.73648],
[-98.393632,29.736481],
[-98.399172,29.738111],
[-98.398262,29.742842],
[-98.402087,29.746859],
[-98.403272,29.748824],
[-98.407786,29.748599],
[-98.410834,29.747426],
[-98.416064,29.746549],
[-98.418984,29.744937],
[-98.420673,29.743529],
[-98.421765,29.740377],
[-98.421803,29.738842],
[-98.42048,29.733814],
[-98.417851,29.733318],
[-98.416887,29.731695],
[-98.418627,29.729489],
[-98.421048,29.728879],
[-98.425908,29.727015],
[-98.429955,29.723588],
[-98.426842,29.71769],
[-98.430926,29.715754],
[-98.438955,29.715765],
[-98.441217,29.716627],
[-98.443852,29.71965],
[-98.444704,29.722466],
[-98.444606,29.726149],
[-98.442918,29.730471],
[-98.442681,29.732286],
[-98.443671,29.734646],
[-98.446778,29.735983],
[-98.451203,29.734403],
[-98.452479,29.733207],
[-98.452595,29.732802],
[-98.457494,29.731564],
[-98.459366,29.731773],
[-98.462127,29.733505],
[-98.464959,29.738115],
[-98.465974,29.738538],
[-98.468471,29.737861],
[-98.471647,29.736298],
[-98.473972,29.734366],
[-98.476991,29.733436],
[-98.479778,29.73508],
[-98.485332,29.735832],
[-98.487935,29.735897],
[-98.48975,29.73534],
[-98.492354,29.735934],
[-98.493023,29.737034],
[-98.496957,29.73849],
[-98.50115,29.738241],
[-98.503974,29.738644],
[-98.507188,29.739795],
[-98.509728,29.741259],
[-98.514491,29.742856],
[-98.516226,29.743083],
[-98.520241,29.744905],
[-98.523374,29.745242],
[-98.526086,29.743416],
[-98.525381,29.740786],
[-98.526781,29.740445],
[-98.528192,29.742228],
[-98.528286,29.743659],
[-98.533959,29.74679],
[-98.533625,29.750505],
[-98.534015,29.752353],
[-98.536575,29.752843],
[-98.538996,29.751903],
[-98.543718,29.752052],
[-98.547306,29.753615],
[-98.547867,29.754391],
[-98.546882,29.757301],
[-98.548067,29.759997],
[-98.550489,29.760713],
[-98.553017,29.76019],
[-98.554997,29.758633],
[-98.555117,29.755255],
[-98.558359,29.751975],
[-98.559304,29.751482],
[-98.562614,29.751476],
[-98.562967,29.752153],
[-98.565545,29.752659],
[-98.566838,29.751922],
[-98.569321,29.748274],
[-98.572107,29.749715],
[-98.574567,29.750419],
[-98.575216,29.750001],
[-98.576407,29.747107],
[-98.579294,29.745478],
[-98.578928,29.743597],
[-98.581475,29.742782],
[-98.582849,29.741137],
[-98.586682,29.742451],
[-98.587496,29.746418],
[-98.588493,29.747595],
[-98.591412,29.747215],
[-98.593113,29.745679],
[-98.596972,29.747362],
[-98.600406,29.74998],
[-98.603404,29.749522],
[-98.604739,29.747255],
[-98.60129,29.744874],
[-98.599997,29.743031],
[-98.600469,29.741265],
[-98.603381,29.739933],
[-98.607473,29.740455],
[-98.611599,29.740063],
[-98.614198,29.737591],
[-98.617092,29.739098],
[-98.616924,29.742916],
[-98.619232,29.744142],
[-98.623339,29.743933],
[-98.628756,29.744146],
[-98.63288,29.741936],
[-98.640969,29.740228],
[-98.644736,29.741184],
[-98.646119,29.744587],
[-98.64613,29.744736],
[-98.646098,29.745071],
[-98.646124,29.745181],
[-98.645551,29.747977],
[-98.64776,29.749809],
[-98.649778,29.7535],
[-98.652501,29.75354],
[-98.653347,29.75135],
[-98.653051,29.748831],
[-98.655989,29.747775],
[-98.658515,29.749207],
[-98.658826,29.749239],
[-98.6593,29.749211],
[-98.661108,29.7493],
[-98.663738,29.746275],
[-98.663391,29.745131],
[-98.660567,29.743722],
[-98.659704,29.742137],
[-98.663241,29.741027],
[-98.668479,29.743476],
[-98.670875,29.743272],
[-98.673832,29.742117],
[-98.674501,29.738805],
[-98.675762,29.737414],
[-98.68141,29.738305],
[-98.682935,29.739351],
[-98.687549,29.73872],
[-98.692725,29.735208],
[-98.699994,29.737441],
[-98.701135,29.735719],
[-98.699888,29.732706],
[-98.701624,29.732343],
[-98.701892,29.732388],
[-98.702695,29.732655],
[-98.703109,29.732883],
[-98.703602,29.733023],
[-98.707789,29.732372],
[-98.710692,29.730851],
[-98.712852,29.728209],
[-98.715592,29.72582],
[-98.717234,29.725275],
[-98.719691,29.726762],
[-98.72302,29.729565],
[-98.726063,29.727748],
[-98.732525,29.729534],
[-98.73383,29.729539],
[-98.733709,29.7279],
[-98.730532,29.725667],
[-98.728797,29.722587],
[-98.733117,29.721566],
[-98.735403,29.719633],
[-98.73777,29.716747],
[-98.743771,29.716359],
[-98.744659,29.718427],
[-98.748051,29.720555],
[-98.750359,29.721016],
[-98.751543,29.720257],
[-98.752918,29.721094],
[-98.757052,29.722026],
[-98.75946,29.722148],
[-98.762252,29.722011],
[-98.766665,29.719554],
[-98.767755,29.720748],
[-98.770843,29.721365],
[-98.771518,29.720458],
[-98.775124,29.719689],
[-98.778782,29.720167],
[-98.802771,29.694835],
[-98.806552,29.690709],
[-98.806415,29.675817],
[-98.805934,29.633678],
[-98.805935,29.633273],
[-98.805941,29.631567],
[-98.805848,29.580936],
[-98.805799,29.572047],
[-98.805743,29.561199],
[-98.805653,29.540013],
[-98.805578,29.522711],
[-98.805341,29.483027],
[-98.805173,29.463057],
[-98.805092,29.447384],
[-98.805002,29.429509],
[-98.804944,29.403889],
[-98.804752,29.365679],
[-98.804751,29.365411],
[-98.804622,29.331826],
[-98.804592,29.323344],
[-98.804878,29.313552],
[-98.804898,29.313209],
[-98.804926,29.312923],
[-98.804868,29.303847],
[-98.804766,29.278959],
[-98.804758,29.250381],
[-98.804756,29.249003],
[-98.804756,29.248586],
[-98.799475,29.248702],
[-98.779769,29.241959],
[-98.775941,29.240645],
[-98.734966,29.22671],
[-98.711643,29.218746],
[-98.711339,29.218643],
[-98.711315,29.218611],
[-98.711234,29.218607],
[-98.68846,29.21083]]]
]}}]};
#map-canvas {
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>