We Keep Coding

d3-v6-tip: d3.event is not defined

I am trying to add tooltip to my map when mouseOver event occurs. The goal of the mouseOver function is that it will highlights the path and also show the tip.
I am using d3-v6-tip
This is how I select my svg and calls the tip function
var svg = d3.select("#mapDiv")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "white")
.style("border", "solid 1px black")
.call(d3.zoom()
.on("zoom", function (event) {
svg.attr("transform", event.transform);
})
.scaleExtent([1, 1])
)
.append("g");
const tip = d3.tip().attr('class', 'd3-tip').html(function (event, d) {
console.log(event.target.id);
return event.target.id;
});
svg.call(tip);
This is how I draw my map:
d3.json(path).then(function (json) {
var projection = d3.geoMercator();
var features = json.features;
var fixed = features.map(function (feature) {
return turf.rewind(feature, { reverse: true });
})
var geoPath = d3.geoPath().projection(projection);
projection.fitSize([width, height], { "type": "FeatureCollection", "features": fixed })
svg.selectAll("path")
.data(fixed)
.enter()
.append("path")
.attr("d", geoPath)
.attr("id", function (d) { return d.properties.FIPS_10_; })
.style("fill", "red")
.style("stroke", "transparent")
.on("mouseover", mouseOver)
.on("mouseleave", mouseLeave)
.on("click", mouseClick)
})
How I call tip.show in my mouseOver function:
let mouseOver = function (event, d) {
var countryCode = event.target.__data__.properties.FIPS_10_;
d3.selectAll("path#" + countryCode)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "black")
tip.show(event, d);
}
The problem: I put a console.log in my tip declaration. When my mouse hover over it, it shows the current country name in the console(event.target.id). However, the tooltip never show up due to the error: Uncaught TypeError: d3.event is undefined.
I am not completely sure if this has to do with the library itself because the source code calls d3.event when d3.event no longer exist in d3.v6 or am I doing something wrong in my code
Also, is there a better way to create tooltip than using the library?

I downgraded my D3 version to 5 and now it worked. I think there is a problem with the D3-v6-tip library, not sure why.

I believe you're just missing the step to invoke the tip.
Check the code underneath where the page says 'If you want to load it as standalone...' :
/* Invoke the tip in the context of your visualization */
svg.call(tip)
Your event handler code otherwise seems to work fine per this adaptation:
const width = 200;
const height = 200;
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
const tip = d3.tip()
.attr("class", "d3-tip")
.html((event, d) => event.target.id);
const projection = d3.geoMercator();
const mapJson = roi();
const features = mapJson.features;
const geoPath = d3.geoPath()
.projection(projection);
projection.fitSize([width, height], mapJson);
svg.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("id", d => d.properties.id)
.style("fill", "green")
.style("stroke", "red")
.on("mouseover", mouseOver)
.on("mouseleave", mouseLeave)
.on("click", mouseClick)
.call(tip);
function mouseOver(event, d) {
d3.selectAll(`path#${event.target.id}`)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "white");
tip.show(event, d);
}
function mouseLeave(event, d) {
d3.selectAll(`path#${event.target.id}`)
.transition()
.duration(200)
.style("stroke", "red");
tip.hide()
}
function mouseClick(event, d) {
window.alert(`Selected ${d.properties.id}`);
}
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/d3-v6-tip#1.0.6/build/d3-v6-tip.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6#4/d3-tip.min.css">
<script>
function roi() {
return {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "id": "Carlow" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.592415, 52.708085 ], [ -6.614788, 52.654218 ], [ -6.717890, 52.633128 ], [ -6.810019, 52.481218 ], [ -6.916185, 52.446304 ], [ -6.914688, 52.590519 ], [ -6.975609, 52.653791 ], [ -6.952951, 52.705377 ], [ -7.090468, 52.732311 ], [ -7.072441, 52.797934 ], [ -7.065957, 52.822872 ], [ -6.915828, 52.856717 ], [ -6.735489, 52.884007 ], [ -6.712332, 52.924335 ], [ -6.463234, 52.893982 ], [ -6.512470, 52.826791 ], [ -6.631176, 52.831494 ], [ -6.592415, 52.708085 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Cavan" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -7.311848, 54.114105 ], [ -7.188226, 54.079548 ], [ -7.035960, 54.086530 ], [ -6.753231, 53.901916 ], [ -6.753302, 53.900348 ], [ -6.779095, 53.873842 ], [ -6.942976, 53.874982 ], [ -6.955730, 53.766893 ], [ -7.275153, 53.783851 ], [ -7.282350, 53.795394 ], [ -7.394715, 53.781713 ], [ -7.471810, 53.835936 ], [ -7.577762, 53.872702 ], [ -7.606476, 53.937257 ], [ -7.604552, 54.005160 ], [ -7.760239, 54.105127 ], [ -7.853223, 54.098144 ], [ -8.034560, 54.238796 ], [ -7.952976, 54.306628 ], [ -7.878090, 54.289172 ], [ -7.820589, 54.199180 ], [ -7.696967, 54.202529 ], [ -7.554248, 54.127999 ], [ -7.414737, 54.150800 ], [ -7.311848, 54.114105 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Clare" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -9.014420, 53.143721 ], [ -8.995325, 53.094486 ], [ -8.898707, 53.061852 ], [ -8.825673, 52.973357 ], [ -8.610278, 53.039336 ], [ -8.448392, 52.981622 ], [ -8.301399, 53.004138 ], [ -8.315365, 52.923338 ], [ -8.415403, 52.895906 ], [ -8.486797, 52.717419 ], [ -8.542089, 52.683432 ], [ -8.736394, 52.676235 ], [ -8.862510, 52.697896 ], [ -8.966396, 52.683717 ], [ -8.941957, 52.735161 ], [ -9.043064, 52.749839 ], [ -9.077478, 52.671817 ], [ -9.162482, 52.618450 ], [ -9.417494, 52.602062 ], [ -9.546959, 52.639326 ], [ -9.700864, 52.612108 ], [ -9.696375, 52.582325 ], [ -9.939203, 52.558170 ], [ -9.650845, 52.677945 ], [ -9.613081, 52.742927 ], [ -9.495800, 52.750694 ], [ -9.446422, 52.877095 ], [ -9.347524, 52.929893 ], [ -9.476420, 52.941507 ], [ -9.392484, 53.007914 ], [ -9.282471, 53.145146 ], [ -9.152507, 53.119566 ], [ -9.127497, 53.157615 ], [ -9.014420, 53.143721 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Cork" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -8.160320, 52.302731 ], [ -8.088569, 52.215518 ], [ -8.137519, 52.159086 ], [ -7.927468, 51.990147 ], [ -7.849731, 51.978747 ], [ -7.904168, 51.911271 ], [ -7.865834, 51.880134 ], [ -7.997508, 51.860682 ], [ -8.001356, 51.825127 ], [ -8.170295, 51.784300 ], [ -8.264704, 51.815152 ], [ -8.202501, 51.874006 ], [ -8.319711, 51.842370 ], [ -8.273041, 51.798194 ], [ -8.339163, 51.716254 ], [ -8.563037, 51.639302 ], [ -8.658587, 51.634029 ], [ -8.706397, 51.570686 ], [ -8.867498, 51.576243 ], [ -9.107476, 51.537340 ], [ -9.227536, 51.479839 ], [ -9.535274, 51.529003 ], [ -9.644717, 51.520382 ], [ -9.773613, 51.446564 ], [ -9.838025, 51.483188 ], [ -9.653624, 51.542897 ], [ -9.539193, 51.612083 ], [ -9.850850, 51.542897 ], [ -9.444142, 51.692384 ], [ -9.451909, 51.731502 ], [ -9.639730, 51.675426 ], [ -9.906925, 51.652056 ], [ -9.935284, 51.614292 ], [ -10.166355, 51.580447 ], [ -10.055843, 51.632105 ], [ -10.097525, 51.671223 ], [ -9.974188, 51.685402 ], [ -10.004755, 51.719318 ], [ -9.908279, 51.749600 ], [ -9.856336, 51.719175 ], [ -9.727869, 51.792636 ], [ -9.595054, 51.796698 ], [ -9.330922, 51.890181 ], [ -9.305343, 51.970553 ], [ -9.153718, 52.007676 ], [ -9.229317, 52.180890 ], [ -9.294513, 52.237036 ], [ -9.234589, 52.308431 ], [ -9.132414, 52.338500 ], [ -8.961836, 52.321185 ], [ -8.842702, 52.378330 ], [ -8.640631, 52.360160 ], [ -8.519502, 52.284704 ], [ -8.341799, 52.321969 ], [ -8.160320, 52.302731 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Donegal" } , "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -8.541947, 55.023711 ], [ -8.486370, 54.973478 ], [ -8.569735, 54.975687 ], [ -8.541947, 55.023711 ] ] ], [ [ [ -8.161674, 54.457683 ], [ -8.282019, 54.479843 ], [ -8.223093, 54.572114 ], [ -8.109161, 54.612657 ], [ -8.115787, 54.649922 ], [ -8.299190, 54.600971 ], [ -8.288075, 54.646502 ], [ -8.463070, 54.605175 ], [ -8.586978, 54.605674 ], [ -8.793609, 54.659042 ], [ -8.807504, 54.697661 ], [ -8.653100, 54.775682 ], [ -8.434142, 54.755446 ], [ -8.568595, 54.825701 ], [ -8.384194, 54.882631 ], [ -8.460292, 54.918756 ], [ -8.462999, 55.002691 ], [ -8.348639, 55.039030 ], [ -8.286365, 55.159945 ], [ -8.159750, 55.146550 ], [ -8.026366, 55.173483 ], [ -7.981405, 55.227635 ], [ -7.873601, 55.202055 ], [ -7.631913, 55.278224 ], [ -7.617520, 55.191225 ], [ -7.517482, 55.122609 ], [ -7.633623, 55.057698 ], [ -7.559165, 55.034327 ], [ -7.680864, 54.951817 ], [ -7.472522, 55.046511 ], [ -7.526959, 55.059052 ], [ -7.462476, 55.137358 ], [ -7.555816, 55.197067 ], [ -7.528028, 55.285990 ], [ -7.428631, 55.279577 ], [ -7.348116, 55.357884 ], [ -7.194710, 55.348193 ], [ -7.153597, 55.294825 ], [ -6.920745, 55.237111 ], [ -7.158585, 55.148758 ], [ -7.273871, 55.056772 ], [ -7.353103, 55.048649 ], [ -7.443024, 54.934432 ], [ -7.457987, 54.857907 ], [ -7.552467, 54.791714 ], [ -7.537362, 54.744758 ], [ -7.648658, 54.749532 ], [ -7.750619, 54.705498 ], [ -7.834412, 54.738559 ], [ -7.925259, 54.702292 ], [ -7.855289, 54.634674 ], [ -7.710647, 54.630327 ], [ -7.829211, 54.544682 ], [ -8.003280, 54.546107 ], [ -8.052729, 54.489675 ], [ -8.161674, 54.457683 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": "Dublin" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.105263, 53.219391 ], [ -6.347948, 53.200936 ], [ -6.464161, 53.228939 ], [ -6.535199, 53.255302 ], [ -6.495512, 53.384126 ], [ -6.453473, 53.376858 ], [ -6.334767, 53.452528 ], [ -6.320516, 53.495493 ], [ -6.408085, 53.563468 ], [ -6.291089, 53.579998 ], [ -6.213638, 53.635504 ], [ -6.098637, 53.585128 ], [ -6.075836, 53.519006 ], [ -6.121936, 53.388757 ], [ -6.229171, 53.360470 ], [ -6.100276, 53.282877 ], [ -6.105263, 53.219391 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Galway" } , "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -9.780809, 53.152057 ], [ -9.654194, 53.131822 ], [ -9.654194, 53.088500 ], [ -9.830258, 53.138163 ], [ -9.780809, 53.152057 ] ] ], [ [ [ -9.630823, 53.320711 ], [ -9.648066, 53.227371 ], [ -9.744185, 53.235138 ], [ -9.630823, 53.320711 ] ] ], [ [ [ -8.020095, 53.261501 ], [ -7.956538, 53.216256 ], [ -8.068404, 53.175642 ], [ -8.301399, 53.004138 ], [ -8.448392, 52.981622 ], [ -8.610278, 53.039336 ], [ -8.825673, 52.973357 ], [ -8.898707, 53.061852 ], [ -8.995325, 53.094486 ], [ -9.014420, 53.143721 ], [ -8.903053, 53.221528 ], [ -9.051970, 53.220175 ], [ -8.936399, 53.271547 ], [ -9.525869, 53.220958 ], [ -9.622487, 53.326269 ], [ -9.550807, 53.342372 ], [ -9.649135, 53.387119 ], [ -9.774753, 53.291498 ], [ -9.908065, 53.328763 ], [ -10.071946, 53.420678 ], [ -10.198062, 53.405145 ], [ -10.093036, 53.467063 ], [ -10.130800, 53.574868 ], [ -10.014160, 53.567885 ], [ -10.056413, 53.611492 ], [ -9.669727, 53.614912 ], [ -9.610587, 53.632725 ], [ -9.409727, 53.541095 ], [ -9.265798, 53.544301 ], [ -9.203239, 53.487442 ], [ -9.117023, 53.486800 ], [ -8.983425, 53.621895 ], [ -8.814985, 53.663292 ], [ -8.664358, 53.670916 ], [ -8.611489, 53.709535 ], [ -8.438631, 53.687660 ], [ -8.263208, 53.516085 ], [ -8.242046, 53.361040 ], [ -8.152838, 53.328478 ], [ -8.129753, 53.262427 ], [ -8.020095, 53.261501 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": "Kerry" } , "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -10.349188, 51.935996 ], [ -10.286415, 51.921817 ], [ -10.430843, 51.880134 ], [ -10.349188, 51.935996 ] ] ], [ [ [ -9.328215, 52.572634 ], [ -9.303134, 52.515490 ], [ -9.339544, 52.373057 ], [ -9.234589, 52.308431 ], [ -9.294513, 52.237036 ], [ -9.229317, 52.180890 ], [ -9.153718, 52.007676 ], [ -9.305343, 51.970553 ], [ -9.330922, 51.890181 ], [ -9.595054, 51.796698 ], [ -9.727869, 51.792636 ], [ -9.856336, 51.719175 ], [ -9.908279, 51.749600 ], [ -9.863034, 51.748175 ], [ -9.745824, 51.849282 ], [ -10.125812, 51.736775 ], [ -10.228059, 51.781806 ], [ -10.208607, 51.844009 ], [ -10.343630, 51.782946 ], [ -10.335864, 51.845434 ], [ -10.408612, 51.878495 ], [ -10.252499, 51.904004 ], [ -10.321970, 51.952669 ], [ -10.258056, 51.991786 ], [ -9.916972, 52.066815 ], [ -9.889184, 52.111276 ], [ -9.753021, 52.156806 ], [ -9.985303, 52.143197 ], [ -10.193074, 52.106787 ], [ -10.287484, 52.140418 ], [ -10.452504, 52.096527 ], [ -10.475803, 52.176828 ], [ -10.361372, 52.235398 ], [ -10.178040, 52.291544 ], [ -10.181959, 52.231265 ], [ -10.026415, 52.271522 ], [ -9.955804, 52.232619 ], [ -9.736419, 52.256773 ], [ -9.876928, 52.274016 ], [ -9.833607, 52.385669 ], [ -9.943620, 52.422933 ], [ -9.828049, 52.434334 ], [ -9.687469, 52.482928 ], [ -9.620278, 52.581541 ], [ -9.364197, 52.591231 ], [ -9.328215, 52.572634 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": "Kildare" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.495512, 53.384126 ], [ -6.535199, 53.255302 ], [ -6.464161, 53.228939 ], [ -6.592771, 53.092704 ], [ -6.745464, 53.017747 ], [ -6.712332, 52.924335 ], [ -6.735489, 52.884007 ], [ -6.915828, 52.856717 ], [ -6.957939, 52.967443 ], [ -7.032896, 52.971932 ], [ -7.030687, 53.080235 ], [ -7.097237, 53.164598 ], [ -6.997626, 53.317006 ], [ -7.136140, 53.409563 ], [ -7.032112, 53.514019 ], [ -6.840586, 53.390539 ], [ -6.713757, 53.426378 ], [ -6.495512, 53.384126 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Kilkenny" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -7.072441, 52.797934 ], [ -7.090468, 52.732311 ], [ -6.952951, 52.705377 ], [ -6.975609, 52.653791 ], [ -6.914688, 52.590519 ], [ -6.916185, 52.446304 ], [ -6.975182, 52.291544 ], [ -7.191717, 52.251857 ], [ -7.338853, 52.342561 ], [ -7.400130, 52.455496 ], [ -7.386663, 52.502451 ], [ -7.454139, 52.640253 ], [ -7.649370, 52.790809 ], [ -7.559236, 52.834771 ], [ -7.414737, 52.792305 ], [ -7.284772, 52.865624 ], [ -7.181172, 52.893412 ], [ -7.065957, 52.822872 ], [ -7.072441, 52.797934 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Laois" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -7.097237, 53.164598 ], [ -7.030687, 53.080235 ], [ -7.032896, 52.971932 ], [ -6.957939, 52.967443 ], [ -6.915828, 52.856717 ], [ -7.065957, 52.822872 ], [ -7.181172, 52.893412 ], [ -7.284772, 52.865624 ], [ -7.414737, 52.792305 ], [ -7.559236, 52.834771 ], [ -7.649370, 52.790809 ], [ -7.686564, 52.851444 ], [ -7.656923, 52.939370 ], [ -7.692264, 52.982335 ], [ -7.555246, 53.100115 ], [ -7.617948, 53.144790 ], [ -7.541708, 53.181271 ], [ -7.354813, 53.202647 ], [ -7.265606, 53.140230 ], [ -7.097237, 53.164598 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Leitrim" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -8.282019, 54.479843 ], [ -8.161674, 54.457683 ], [ -7.952976, 54.306628 ], [ -8.034560, 54.238796 ], [ -7.853223, 54.098144 ], [ -7.760239, 54.105127 ], [ -7.604552, 54.005160 ], [ -7.606476, 53.937257 ], [ -7.663122, 53.937114 ], [ -7.822370, 53.819477 ], [ -7.899109, 53.815558 ], [ -8.000359, 53.926712 ], [ -8.100895, 53.953859 ], [ -8.040972, 54.077125 ], [ -8.133671, 54.101422 ], [ -8.170794, 54.102633 ], [ -8.333463, 54.185500 ], [ -8.310591, 54.272855 ], [ -8.377782, 54.348453 ], [ -8.373863, 54.468228 ], [ -8.282019, 54.479843 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Limerick" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -8.160320, 52.302731 ], [ -8.341799, 52.321969 ], [ -8.519502, 52.284704 ], [ -8.640631, 52.360160 ], [ -8.842702, 52.378330 ], [ -8.961836, 52.321185 ], [ -9.132414, 52.338500 ], [ -9.234589, 52.308431 ], [ -9.339544, 52.373057 ], [ -9.303134, 52.515490 ], [ -9.328215, 52.572634 ], [ -8.987487, 52.619305 ], [ -8.958060, 52.660702 ], [ -8.638066, 52.660702 ], [ -8.736394, 52.676235 ], [ -8.542089, 52.683432 ], [ -8.486797, 52.717419 ], [ -8.358258, 52.682648 ], [ -8.257080, 52.697682 ], [ -8.180698, 52.666545 ], [ -8.197941, 52.521333 ], [ -8.399157, 52.468464 ], [ -8.388968, 52.438751 ], [ -8.230361, 52.404265 ], [ -8.160320, 52.302731 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Longford" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -7.471810, 53.835936 ], [ -7.394715, 53.781713 ], [ -7.390725, 53.735827 ], [ -7.591442, 53.647545 ], [ -7.658348, 53.531119 ], [ -7.846454, 53.538601 ], [ -7.952620, 53.512380 ], [ -8.025938, 53.607359 ], [ -7.978912, 53.694999 ], [ -7.887424, 53.772237 ], [ -7.899109, 53.815558 ], [ -7.822370, 53.819477 ], [ -7.663122, 53.937114 ], [ -7.606476, 53.937257 ], [ -7.577762, 53.872702 ], [ -7.471810, 53.835936 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Louth" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.238576, 53.778721 ], [ -6.339042, 53.722788 ], [ -6.481475, 53.722788 ], [ -6.561562, 53.771453 ], [ -6.616427, 53.861516 ], [ -6.687038, 53.875481 ], [ -6.753302, 53.900348 ], [ -6.753231, 53.901916 ], [ -6.679699, 53.909469 ], [ -6.584434, 54.051902 ], [ -6.470146, 54.078835 ], [ -6.374739, 54.066366 ], [ -6.279760, 54.109901 ], [ -6.100846, 53.999603 ], [ -6.164688, 53.976802 ], [ -6.352508, 54.011502 ], [ -6.377518, 53.955711 ], [ -6.333627, 53.877049 ], [ -6.238576, 53.861801 ], [ -6.238576, 53.778721 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Mayo" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -9.138043, 54.130707 ], [ -8.963404, 54.145527 ], [ -9.027317, 54.030241 ], [ -8.913598, 54.017701 ], [ -8.835078, 53.972455 ], [ -8.661294, 54.025681 ], [ -8.590398, 53.968109 ], [ -8.682599, 53.958704 ], [ -8.608211, 53.885884 ], [ -8.690223, 53.874484 ], [ -8.696279, 53.722716 ], [ -8.814985, 53.663292 ], [ -8.983425, 53.621895 ], [ -9.117023, 53.486800 ], [ -9.203239, 53.487442 ], [ -9.265798, 53.544301 ], [ -9.409727, 53.541095 ], [ -9.610587, 53.632725 ], [ -9.669727, 53.614912 ], [ -9.774183, 53.600661 ], [ -9.915832, 53.656238 ], [ -9.912483, 53.752286 ], [ -9.651272, 53.800453 ], [ -9.554084, 53.889874 ], [ -9.764706, 53.900134 ], [ -9.905857, 53.861231 ], [ -10.066388, 53.971814 ], [ -10.259196, 53.973453 ], [ -10.189155, 54.015706 ], [ -10.100803, 54.000671 ], [ -9.974188, 54.030669 ], [ -9.966421, 53.951009 ], [ -9.838025, 53.960414 ], [ -9.993639, 54.102633 ], [ -9.899729, 54.117953 ], [ -10.012521, 54.226541 ], [ -10.010312, 54.181296 ], [ -10.129161, 54.096007 ], [ -10.055843, 54.218204 ], [ -10.109709, 54.238511 ], [ -9.995777, 54.309336 ], [ -9.880277, 54.257607 ], [ -9.805819, 54.344606 ], [ -9.382509, 54.294302 ], [ -9.341967, 54.327363 ], [ -9.211931, 54.285894 ], [ -9.224187, 54.217136 ], [ -9.159703, 54.201816 ], [ -9.138043, 54.130707 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Meath" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.687038, 53.875481 ], [ -6.616427, 53.861516 ], [ -6.561562, 53.771453 ], [ -6.481475, 53.722788 ], [ -6.339042, 53.722788 ], [ -6.238576, 53.778721 ], [ -6.213638, 53.635504 ], [ -6.291089, 53.579998 ], [ -6.408085, 53.563468 ], [ -6.320516, 53.495493 ], [ -6.334767, 53.452528 ], [ -6.453473, 53.376858 ], [ -6.495512, 53.384126 ], [ -6.713757, 53.426378 ], [ -6.840586, 53.390539 ], [ -7.032112, 53.514019 ], [ -6.962926, 53.639494 ], [ -7.250928, 53.711387 ], [ -7.275153, 53.783851 ], [ -6.955730, 53.766893 ], [ -6.942976, 53.874982 ], [ -6.779095, 53.873842 ], [ -6.753302, 53.900348 ], [ -6.687038, 53.875481 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Monaghan" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.584434, 54.051902 ], [ -6.679699, 53.909469 ], [ -6.753231, 53.901916 ], [ -7.035960, 54.086530 ], [ -7.188226, 54.079548 ], [ -7.311848, 54.114105 ], [ -7.237746, 54.203455 ], [ -7.142268, 54.227325 ], [ -7.202120, 54.297722 ], [ -7.025129, 54.416143 ], [ -6.876141, 54.345247 ], [ -6.795555, 54.211649 ], [ -6.636377, 54.172745 ], [ -6.670293, 54.070570 ], [ -6.584434, 54.051902 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Offaly" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.997626, 53.317006 ], [ -7.097237, 53.164598 ], [ -7.265606, 53.140230 ], [ -7.354813, 53.202647 ], [ -7.541708, 53.181271 ], [ -7.617948, 53.144790 ], [ -7.555246, 53.100115 ], [ -7.692264, 52.982335 ], [ -7.822513, 52.956256 ], [ -7.922337, 52.862560 ], [ -8.013326, 52.909729 ], [ -7.956681, 52.952907 ], [ -7.904738, 53.092491 ], [ -8.068404, 53.175642 ], [ -7.956538, 53.216256 ], [ -8.020095, 53.261501 ], [ -8.021734, 53.303326 ], [ -7.915640, 53.353416 ], [ -7.767649, 53.329048 ], [ -7.586953, 53.383770 ], [ -7.535224, 53.333751 ], [ -7.372769, 53.317719 ], [ -7.337927, 53.350709 ], [ -7.136140, 53.409563 ], [ -6.997626, 53.317006 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Roscommon" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -8.133671, 54.101422 ], [ -8.040972, 54.077125 ], [ -8.100895, 53.953859 ], [ -8.000359, 53.926712 ], [ -7.899109, 53.815558 ], [ -7.887424, 53.772237 ], [ -7.978912, 53.694999 ], [ -8.025938, 53.607359 ], [ -7.952620, 53.512380 ], [ -7.915640, 53.353416 ], [ -8.021734, 53.303326 ], [ -8.020095, 53.261501 ], [ -8.129753, 53.262427 ], [ -8.152838, 53.328478 ], [ -8.242046, 53.361040 ], [ -8.263208, 53.516085 ], [ -8.438631, 53.687660 ], [ -8.611489, 53.709535 ], [ -8.664358, 53.670916 ], [ -8.814985, 53.663292 ], [ -8.696279, 53.722716 ], [ -8.690223, 53.874484 ], [ -8.608211, 53.885884 ], [ -8.682599, 53.958704 ], [ -8.590398, 53.968109 ], [ -8.459722, 53.916024 ], [ -8.373008, 53.919088 ], [ -8.275606, 54.047627 ], [ -8.170794, 54.102633 ], [ -8.133671, 54.101422 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Sligo" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -8.373863, 54.468228 ], [ -8.377782, 54.348453 ], [ -8.310591, 54.272855 ], [ -8.333463, 54.185500 ], [ -8.170794, 54.102633 ], [ -8.275606, 54.047627 ], [ -8.373008, 53.919088 ], [ -8.459722, 53.916024 ], [ -8.590398, 53.968109 ], [ -8.661294, 54.025681 ], [ -8.835078, 53.972455 ], [ -8.913598, 54.017701 ], [ -9.027317, 54.030241 ], [ -8.963404, 54.145527 ], [ -9.138043, 54.130707 ], [ -9.057528, 54.295442 ], [ -8.930271, 54.294302 ], [ -8.827526, 54.253474 ], [ -8.661935, 54.272641 ], [ -8.583629, 54.207944 ], [ -8.508601, 54.217349 ], [ -8.626381, 54.255113 ], [ -8.681886, 54.355935 ], [ -8.490289, 54.418209 ], [ -8.469697, 54.470437 ], [ -8.373863, 54.468228 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Tipperary" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -8.013326, 52.909729 ], [ -7.922337, 52.862560 ], [ -7.822513, 52.956256 ], [ -7.692264, 52.982335 ], [ -7.656923, 52.939370 ], [ -7.686564, 52.851444 ], [ -7.649370, 52.790809 ], [ -7.454139, 52.640253 ], [ -7.386663, 52.502451 ], [ -7.400130, 52.455496 ], [ -7.338853, 52.342561 ], [ -7.545271, 52.355671 ], [ -7.760524, 52.314986 ], [ -7.722190, 52.222216 ], [ -7.944426, 52.236466 ], [ -8.088569, 52.215518 ], [ -8.160320, 52.302731 ], [ -8.230361, 52.404265 ], [ -8.388968, 52.438751 ], [ -8.399157, 52.468464 ], [ -8.197941, 52.521333 ], [ -8.180698, 52.666545 ], [ -8.257080, 52.697682 ], [ -8.358258, 52.682648 ], [ -8.486797, 52.717419 ], [ -8.415403, 52.895906 ], [ -8.315365, 52.923338 ], [ -8.301399, 53.004138 ], [ -8.068404, 53.175642 ], [ -7.904738, 53.092491 ], [ -7.956681, 52.952907 ], [ -8.013326, 52.909729 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Waterford" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -7.545271, 52.355671 ], [ -7.338853, 52.342561 ], [ -7.191717, 52.251857 ], [ -6.975182, 52.291544 ], [ -6.958651, 52.241525 ], [ -6.949175, 52.177612 ], [ -7.019714, 52.134006 ], [ -7.088615, 52.150679 ], [ -7.426921, 52.129588 ], [ -7.551398, 52.077645 ], [ -7.585243, 51.991501 ], [ -7.731951, 51.937635 ], [ -7.849731, 51.978747 ], [ -7.927468, 51.990147 ], [ -8.137519, 52.159086 ], [ -8.088569, 52.215518 ], [ -7.944426, 52.236466 ], [ -7.722190, 52.222216 ], [ -7.760524, 52.314986 ], [ -7.545271, 52.355671 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Westmeath" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -7.282350, 53.795394 ], [ -7.275153, 53.783851 ], [ -7.250928, 53.711387 ], [ -6.962926, 53.639494 ], [ -7.032112, 53.514019 ], [ -7.136140, 53.409563 ], [ -7.337927, 53.350709 ], [ -7.372769, 53.317719 ], [ -7.535224, 53.333751 ], [ -7.586953, 53.383770 ], [ -7.767649, 53.329048 ], [ -7.915640, 53.353416 ], [ -7.952620, 53.512380 ], [ -7.846454, 53.538601 ], [ -7.658348, 53.531119 ], [ -7.591442, 53.647545 ], [ -7.390725, 53.735827 ], [ -7.394715, 53.781713 ], [ -7.282350, 53.795394 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Wexford" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.958651, 52.241525 ], [ -6.975182, 52.291544 ], [ -6.916185, 52.446304 ], [ -6.810019, 52.481218 ], [ -6.717890, 52.633128 ], [ -6.614788, 52.654218 ], [ -6.592415, 52.708085 ], [ -6.446419, 52.698466 ], [ -6.325575, 52.799145 ], [ -6.144666, 52.770716 ], [ -6.225822, 52.648447 ], [ -6.193046, 52.562944 ], [ -6.353577, 52.408469 ], [ -6.358066, 52.344271 ], [ -6.465799, 52.377902 ], [ -6.429176, 52.293753 ], [ -6.311396, 52.240955 ], [ -6.358636, 52.174049 ], [ -6.489170, 52.190722 ], [ -6.596975, 52.169561 ], [ -6.706917, 52.217656 ], [ -6.836382, 52.216801 ], [ -6.823058, 52.174833 ], [ -6.931361, 52.122392 ], [ -6.903644, 52.201268 ], [ -6.958651, 52.241525 ] ] ] } },
{ "type": "Feature", "properties": { "id": "Wicklow" } , "geometry": { "type": "Polygon", "coordinates": [ [ [ -6.347948, 53.200936 ], [ -6.105263, 53.219391 ], [ -6.041421, 53.117928 ], [ -6.046409, 52.989887 ], [ -5.996960, 52.963738 ], [ -6.057524, 52.857358 ], [ -6.144666, 52.770716 ], [ -6.325575, 52.799145 ], [ -6.446419, 52.698466 ], [ -6.592415, 52.708085 ], [ -6.631176, 52.831494 ], [ -6.512470, 52.826791 ], [ -6.463234, 52.893982 ], [ -6.712332, 52.924335 ], [ -6.745464, 53.017747 ], [ -6.592771, 53.092704 ], [ -6.464161, 53.228939 ], [ -6.347948, 53.200936 ] ] ] } }
]
}
}
</script>
Regarding a 'better way', IMO it would depend on if you had specific use cases not covered by the library. Also, consider the amount of work already done for us by the library which they took the time to update for D3 v6.

I struggled with this too. I was importing d3 and d3-tip via NPM to use in my Next/React app.
The 'd3 is not defined' error is because d3 is not globally available on the window object. If importing d3 and d3-tip via NPM, make d3 available to the window. Put this in your code:
if (typeof window !== "undefined") { window.d3 = d3 }
Make sure you are following the new v6 API properly: calls to tip.html() and tip.show() need the event passed first before the data e.g.
function (event, d) {...}
not just d. That's why downgrading to v5 as per the OP's suggestion worked for me at first - I wasn't doing that. And that would also explain why the Tooltip was failing to position properly.
I hope that helps someone struggling like I was. I really appreciate this great little trusty, simple and elegant tooltip which I've used extensively over the years, and the efforts of the various forkers and maintainers to keep it compatible with the latest d3 versions.

How to push geoJSON data into empty arrays to construct multiple polygons on a google map?

I am trying to draw multiple polygon's (shells) onto a google map.
I have at a problem:
A nested loop, which draws each polygon multiple times onto the map.
Besides that the code is working more or less.
Tried to put the empty array into different positions and to clear the content with each iteration - but somehow I couldn't find the right approach... feels like this loop should be built differently... :-)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: 47.586, lng: 9},
mapTypeId: 'terrain'
});
//Coordinates
const array = [
[
[
47.42260606,
9.367119279999999
],
[
47.4230557,
9.36666964
],
[
47.4253039,
9.36891784
],
[
47.4253039,
9.372514959999998
],
[
47.42485426,
9.3729646
],
[
47.42125714,
9.3729646
],
[
47.4208075,
9.372514959999998
],
[
47.4208075,
9.37161568
],
[
47.419908219999996,
9.3707164
],
[
47.419908219999996,
9.36891784
],
[
47.42035786,
9.368468199999999
],
[
47.42125714,
9.368468199999999
],
[
47.42260606,
9.367119279999999
]
],
[
[
47.450034099999996,
9.418827879999998
],
[
47.45138302,
9.420176799999998
],
[
47.45093338,
9.420626439999998
],
[
47.44913482,
9.420626439999998
],
[
47.4477859,
9.419277519999998
],
[
47.44823554,
9.418827879999998
],
[
47.450034099999996,
9.418827879999998
]
],
[
[
47.52152686,
9.421975359999998
],
[
47.5219765,
9.421525719999998
],
[
47.52287578,
9.421525719999998
],
[
47.52332542,
9.421975359999998
],
[
47.52332542,
9.422874639999998
],
[
47.5242247,
9.423773919999999
],
[
47.5242247,
9.425572479999998
],
[
47.52287578,
9.426921399999998
],
[
47.52107722,
9.426921399999998
],
[
47.5197283,
9.425572479999998
],
[
47.5197283,
9.422874639999998
],
[
47.520177939999996,
9.422424999999999
],
[
47.52107722,
9.422424999999999
],
[
47.52152686,
9.421975359999998
]
],
[
[
47.510285859999996,
9.427820679999998
],
[
47.51118514,
9.428719959999999
],
[
47.51208442,
9.428719959999999
],
[
47.51253406,
9.429169599999998
],
[
47.51253406,
9.430968159999997
],
[
47.515231899999996,
9.433665999999999
],
[
47.51388298,
9.435014919999999
],
[
47.5129837,
9.435014919999999
],
[
47.51253406,
9.435464559999998
],
[
47.51343334,
9.436363839999999
],
[
47.51343334,
9.437263119999997
],
[
47.5129837,
9.437712759999998
],
[
47.51208442,
9.437712759999998
],
[
47.51118514,
9.436813479999998
],
[
47.510285859999996,
9.437712759999998
],
[
47.5084873,
9.437712759999998
],
[
47.50803766,
9.437263119999997
],
[
47.50803766,
9.436363839999999
],
[
47.5062391,
9.434565279999998
],
[
47.5062391,
9.432766719999998
],
[
47.50668874,
9.432317079999997
],
[
47.50758802,
9.432317079999997
],
[
47.50803766,
9.431867439999998
],
[
47.50803766,
9.430968159999997
],
[
47.50893694,
9.430068879999999
],
[
47.50893694,
9.428270319999998
],
[
47.50938658,
9.427820679999998
],
[
47.510285859999996,
9.427820679999998
]
],
[
[
47.45857726,
9.426471759999998
],
[
47.45857726,
9.427371039999999
],
[
47.4590269,
9.427820679999998
],
[
47.46082546,
9.427820679999998
],
[
47.46217438,
9.429169599999998
],
[
47.46217438,
9.430968159999997
],
[
47.4612751,
9.431867439999998
],
[
47.4612751,
9.433665999999999
],
[
47.45992618,
9.435014919999999
],
[
47.45767798,
9.432766719999998
],
[
47.45767798,
9.429169599999998
],
[
47.4567787,
9.428270319999998
],
[
47.4567787,
9.426471759999998
],
[
47.45812762,
9.425122839999998
],
[
47.45857726,
9.425572479999998
],
[
47.45857726,
9.426471759999998
]
],
[
[
47.49904486,
9.436363839999999
],
[
47.4994945,
9.435914199999997
],
[
47.50129306,
9.435914199999997
],
[
47.5017427,
9.436363839999999
],
[
47.50084342,
9.437263119999997
],
[
47.50084342,
9.438162399999998
],
[
47.50129306,
9.438612039999997
],
[
47.50219234,
9.438612039999997
],
[
47.50444054,
9.440860239999997
],
[
47.50444054,
9.442658799999998
],
[
47.50129306,
9.445806279999998
],
[
47.49814558,
9.442658799999998
],
[
47.49904486,
9.441759519999998
],
[
47.49904486,
9.440860239999997
],
[
47.49859522,
9.440410599999998
],
[
47.49769594,
9.440410599999998
],
[
47.49634702,
9.439061679999998
],
[
47.49904486,
9.436363839999999
]
],
[
[
47.49589738,
9.453899799999997
],
[
47.4972463,
9.455248719999998
],
[
47.4972463,
9.457047279999998
],
[
47.49814558,
9.457946559999998
],
[
47.49814558,
9.459745119999997
],
[
47.49994414,
9.461543679999997
],
[
47.49994414,
9.463342239999998
],
[
47.49904486,
9.464241519999998
],
[
47.49904486,
9.467838639999997
],
[
47.49679666,
9.470086839999997
],
[
47.49589738,
9.470086839999997
],
[
47.49544774,
9.470536479999998
],
[
47.49544774,
9.471435759999997
],
[
47.4949981,
9.471885399999998
],
[
47.4927499,
9.469637199999998
],
[
47.4927499,
9.468737919999997
],
[
47.49230026,
9.468288279999998
],
[
47.49140098,
9.468288279999998
],
[
47.48960242,
9.470086839999997
],
[
47.48780386,
9.470086839999997
],
[
47.48735422,
9.469637199999998
],
[
47.4882535,
9.468737919999997
],
[
47.4882535,
9.463342239999998
],
[
47.48735422,
9.462442959999997
],
[
47.48735422,
9.458845839999997
],
[
47.48780386,
9.458396199999997
],
[
47.48870314,
9.458396199999997
],
[
47.48915278,
9.457946559999998
],
[
47.48915278,
9.455248719999998
],
[
47.48960242,
9.454799079999997
],
[
47.4949981,
9.454799079999997
],
[
47.49589738,
9.453899799999997
]
]
];
for (var y = 0; y < array.length; y++){
var shell = array[y];
var latLngArray = [];
for (var i = 0; i < shell.length; i++) {
latLngArray.push(new google.maps.LatLng(shell[i][0], shell[i][1]));
// Polygon construction.
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
// latLngArray.length = 0
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>
</body>
</html>
How can I plot the polygon's only once?

You are currently creating a new polygon for each coordinate. Move the polygon creation outside of the loop that is creating the path array. So:
for each polygon
create/clear out the path array.
parse its path into an array of google.maps.LatLng objects.
create a google.maps.Polygon object using that path.
add the polygon to the map.
// for each polygon in the array
for (var y = 0; y < array.length; y++){
var shell = array[y];
var latLngArray = [];
// create path (array of LatLng objects) for this polygon
for (var i = 0; i < shell.length; i++) {
latLngArray.push(new google.maps.LatLng(shell[i][0], shell[i][1]));
}
// create polygon with the path
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
}
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 47.586,
lng: 9
},
mapTypeId: 'terrain'
});
var bounds = new google.maps.LatLngBounds();
for (var y = 0; y < array.length; y++) {
var shell = array[y];
var latLngArray = [];
for (var i = 0; i < shell.length; i++) {
var pt = new google.maps.LatLng(shell[i][0], shell[i][1]);
bounds.extend(pt);
latLngArray.push(pt);
}
// Polygon construction.
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
}
map.fitBounds(bounds);
}
//Coordinates
const array = [
[
[
47.42260606,
9.367119279999999
],
[
47.4230557,
9.36666964
],
[
47.4253039,
9.36891784
],
[
47.4253039,
9.372514959999998
],
[
47.42485426,
9.3729646
],
[
47.42125714,
9.3729646
],
[
47.4208075,
9.372514959999998
],
[
47.4208075,
9.37161568
],
[
47.419908219999996,
9.3707164
],
[
47.419908219999996,
9.36891784
],
[
47.42035786,
9.368468199999999
],
[
47.42125714,
9.368468199999999
],
[
47.42260606,
9.367119279999999
]
],
[
[
47.450034099999996,
9.418827879999998
],
[
47.45138302,
9.420176799999998
],
[
47.45093338,
9.420626439999998
],
[
47.44913482,
9.420626439999998
],
[
47.4477859,
9.419277519999998
],
[
47.44823554,
9.418827879999998
],
[
47.450034099999996,
9.418827879999998
]
],
[
[
47.52152686,
9.421975359999998
],
[
47.5219765,
9.421525719999998
],
[
47.52287578,
9.421525719999998
],
[
47.52332542,
9.421975359999998
],
[
47.52332542,
9.422874639999998
],
[
47.5242247,
9.423773919999999
],
[
47.5242247,
9.425572479999998
],
[
47.52287578,
9.426921399999998
],
[
47.52107722,
9.426921399999998
],
[
47.5197283,
9.425572479999998
],
[
47.5197283,
9.422874639999998
],
[
47.520177939999996,
9.422424999999999
],
[
47.52107722,
9.422424999999999
],
[
47.52152686,
9.421975359999998
]
],
[
[
47.510285859999996,
9.427820679999998
],
[
47.51118514,
9.428719959999999
],
[
47.51208442,
9.428719959999999
],
[
47.51253406,
9.429169599999998
],
[
47.51253406,
9.430968159999997
],
[
47.515231899999996,
9.433665999999999
],
[
47.51388298,
9.435014919999999
],
[
47.5129837,
9.435014919999999
],
[
47.51253406,
9.435464559999998
],
[
47.51343334,
9.436363839999999
],
[
47.51343334,
9.437263119999997
],
[
47.5129837,
9.437712759999998
],
[
47.51208442,
9.437712759999998
],
[
47.51118514,
9.436813479999998
],
[
47.510285859999996,
9.437712759999998
],
[
47.5084873,
9.437712759999998
],
[
47.50803766,
9.437263119999997
],
[
47.50803766,
9.436363839999999
],
[
47.5062391,
9.434565279999998
],
[
47.5062391,
9.432766719999998
],
[
47.50668874,
9.432317079999997
],
[
47.50758802,
9.432317079999997
],
[
47.50803766,
9.431867439999998
],
[
47.50803766,
9.430968159999997
],
[
47.50893694,
9.430068879999999
],
[
47.50893694,
9.428270319999998
],
[
47.50938658,
9.427820679999998
],
[
47.510285859999996,
9.427820679999998
]
],
[
[
47.45857726,
9.426471759999998
],
[
47.45857726,
9.427371039999999
],
[
47.4590269,
9.427820679999998
],
[
47.46082546,
9.427820679999998
],
[
47.46217438,
9.429169599999998
],
[
47.46217438,
9.430968159999997
],
[
47.4612751,
9.431867439999998
],
[
47.4612751,
9.433665999999999
],
[
47.45992618,
9.435014919999999
],
[
47.45767798,
9.432766719999998
],
[
47.45767798,
9.429169599999998
],
[
47.4567787,
9.428270319999998
],
[
47.4567787,
9.426471759999998
],
[
47.45812762,
9.425122839999998
],
[
47.45857726,
9.425572479999998
],
[
47.45857726,
9.426471759999998
]
],
[
[
47.49904486,
9.436363839999999
],
[
47.4994945,
9.435914199999997
],
[
47.50129306,
9.435914199999997
],
[
47.5017427,
9.436363839999999
],
[
47.50084342,
9.437263119999997
],
[
47.50084342,
9.438162399999998
],
[
47.50129306,
9.438612039999997
],
[
47.50219234,
9.438612039999997
],
[
47.50444054,
9.440860239999997
],
[
47.50444054,
9.442658799999998
],
[
47.50129306,
9.445806279999998
],
[
47.49814558,
9.442658799999998
],
[
47.49904486,
9.441759519999998
],
[
47.49904486,
9.440860239999997
],
[
47.49859522,
9.440410599999998
],
[
47.49769594,
9.440410599999998
],
[
47.49634702,
9.439061679999998
],
[
47.49904486,
9.436363839999999
]
],
[
[
47.49589738,
9.453899799999997
],
[
47.4972463,
9.455248719999998
],
[
47.4972463,
9.457047279999998
],
[
47.49814558,
9.457946559999998
],
[
47.49814558,
9.459745119999997
],
[
47.49994414,
9.461543679999997
],
[
47.49994414,
9.463342239999998
],
[
47.49904486,
9.464241519999998
],
[
47.49904486,
9.467838639999997
],
[
47.49679666,
9.470086839999997
],
[
47.49589738,
9.470086839999997
],
[
47.49544774,
9.470536479999998
],
[
47.49544774,
9.471435759999997
],
[
47.4949981,
9.471885399999998
],
[
47.4927499,
9.469637199999998
],
[
47.4927499,
9.468737919999997
],
[
47.49230026,
9.468288279999998
],
[
47.49140098,
9.468288279999998
],
[
47.48960242,
9.470086839999997
],
[
47.48780386,
9.470086839999997
],
[
47.48735422,
9.469637199999998
],
[
47.4882535,
9.468737919999997
],
[
47.4882535,
9.463342239999998
],
[
47.48735422,
9.462442959999997
],
[
47.48735422,
9.458845839999997
],
[
47.48780386,
9.458396199999997
],
[
47.48870314,
9.458396199999997
],
[
47.48915278,
9.457946559999998
],
[
47.48915278,
9.455248719999998
],
[
47.48960242,
9.454799079999997
],
[
47.4949981,
9.454799079999997
],
[
47.49589738,
9.453899799999997
]
]
];
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

GPS Coordinates to svg map

Is there a way to transform a GPS coordinates objects to an SVG map ?
I have Something like this object and I want to draw an svg map USING Javascript if it's possible (or any other language if it exists).
Thanks in advance for your help
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "area": 1.470000, "perimeter": 4.820000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -3.942000, 48.437000 ], [ -3.951000, 48.433998 ], [ -3.959000, 48.431999 ], [ -3.968000, 48.430000 ], [ -3.976000, 48.428001 ], [ -3.984000, 48.424999 ], [ -3.993000, 48.423000 ], [ -4.001000, 48.421001 ], [ -4.009000, 48.417999 ], [ -4.018000, 48.416000 ], [ -4.024000, 48.410999 ], [ -4.030000, 48.407001 ], [ -4.036000, 48.403000 ], [ -4.042000, 48.397999 ], [ -4.048000, 48.394001 ], [ -4.054000, 48.389000 ], [ -4.060000, 48.383999 ], [ -4.066000, 48.380001 ], [ -4.071000, 48.375000 ], [ -4.077000, 48.369999 ], [ -4.082000, 48.365002 ], [ -4.088000, 48.361000 ], [ -4.093000, 48.355999 ], [ -4.099000, 48.351002 ], [ -4.104000, 48.346001 ], [ -4.109000, 48.341000 ], [ -4.114000, 48.335999 ], [ -4.120000, 48.331001 ], [ -4.125000, 48.326000 ], [ -4.129000, 48.320999 ], [ -4.134000, 48.316002 ], [ -4.138000, 48.310001 ], [ -4.141000, 48.305000 ], [ -4.145000, 48.299000 ], [ -4.147000, 48.292999 ], [ -4.150000, 48.287998 ], [ -4.153000, 48.282001 ], [ -4.155000, 48.276001 ], [ -4.157000, 48.270000 ], [ -4.159000, 48.264000 ], [ -4.161000, 48.257999 ], [ -4.163000, 48.252998 ], [ -4.165000, 48.247002 ], [ -4.167000, 48.241001 ], [ -4.169000, 48.235001 ], [ -4.170000, 48.229000 ], [ -4.171000, 48.223000 ], [ -4.173000, 48.216999 ], [ -4.173000, 48.210999 ], [ -4.174000, 48.205002 ], [ -4.174000, 48.199001 ], [ -4.173000, 48.193001 ], [ -4.173000, 48.187000 ], [ -4.171000, 48.181000 ], [ -4.167000, 48.175999 ], [ -4.166000, 48.169998 ], [ -4.165000, 48.164001 ], [ -4.164000, 48.158001 ], [ -4.162000, 48.152000 ], [ -4.161000, 48.146000 ], [ -4.159000, 48.139999 ], [ -4.156000, 48.133999 ], [ -4.154000, 48.127998 ], [ -4.151000, 48.122002 ], [ -4.148000, 48.117001 ], [ -4.144000, 48.111000 ], [ -4.140000, 48.105999 ], [ -4.136000, 48.101002 ], [ -4.131000, 48.095001 ], [ -4.127000, 48.090000 ], [ -4.121000, 48.084999 ], [ -4.116000, 48.080002 ], [ -4.111000, 48.076000 ], [ -4.105000, 48.070999 ], [ -4.099000, 48.066002 ], [ -4.093000, 48.062000 ], [ -4.087000, 48.056999 ], [ -4.081000, 48.053001 ], [ -4.074000, 48.049000 ], [ -4.068000, 48.044998 ], [ -4.061000, 48.040001 ], [ -4.049000, 48.033001 ], [ -4.621000, 47.514000 ], [ -4.628000, 47.518002 ], [ -4.635000, 47.521999 ], [ -4.641000, 47.526001 ], [ -4.648000, 47.529999 ], [ -4.655000, 47.534000 ], [ -4.661000, 47.537998 ], [ -4.668000, 47.542000 ], [ -4.674000, 47.546001 ], [ -4.679000, 47.550999 ], [ -4.685000, 47.556000 ], [ -4.691000, 47.560001 ], [ -4.697000, 47.564999 ], [ -4.703000, 47.569000 ], [ -4.709000, 47.574001 ], [ -4.715000, 47.577999 ], [ -4.720000, 47.583000 ], [ -4.726000, 47.587002 ], [ -4.732000, 47.591999 ], [ -4.738000, 47.597000 ], [ -4.744000, 47.601002 ], [ -4.750000, 47.605999 ], [ -4.756000, 47.610001 ], [ -4.761000, 47.615002 ], [ -4.767000, 47.618999 ], [ -4.773000, 47.624001 ], [ -4.779000, 47.627998 ], [ -4.785000, 47.632999 ], [ -4.791000, 47.638000 ], [ -4.797000, 47.641998 ], [ -4.803000, 47.646999 ], [ -4.808000, 47.651001 ], [ -4.814000, 47.655998 ], [ -4.820000, 47.660000 ], [ -4.826000, 47.665001 ], [ -4.832000, 47.668999 ], [ -4.838000, 47.674000 ], [ -4.844000, 47.678001 ], [ -4.850000, 47.682999 ], [ -4.855000, 47.687000 ], [ -4.861000, 47.692001 ], [ -4.867000, 47.696999 ], [ -4.873000, 47.701000 ], [ -4.879000, 47.706001 ], [ -4.885000, 47.709999 ], [ -4.891000, 47.715000 ], [ -4.897000, 47.719002 ], [ -4.903000, 47.723999 ], [ -4.908000, 47.728001 ], [ -4.914000, 47.733002 ], [ -4.920000, 47.737000 ], [ -4.926000, 47.742001 ], [ -4.932000, 47.747002 ], [ -4.938000, 47.750999 ], [ -4.944000, 47.756001 ], [ -4.950000, 47.759998 ], [ -4.956000, 47.764999 ], [ -4.962000, 47.769001 ], [ -4.967000, 47.773998 ], [ -4.973000, 47.778000 ], [ -4.979000, 47.783001 ], [ -4.985000, 47.786999 ], [ -4.991000, 47.792000 ], [ -4.997000, 47.796001 ], [ -5.003000, 47.800999 ], [ -5.009000, 47.806000 ], [ -5.015000, 47.810001 ], [ -5.021000, 47.814999 ], [ -5.026000, 47.819000 ], [ -5.032000, 47.824001 ], [ -5.038000, 47.827999 ], [ -5.044000, 47.833000 ], [ -5.050000, 47.837002 ], [ -5.056000, 47.841999 ], [ -5.062000, 47.846001 ], [ -5.068000, 47.851002 ], [ -5.074000, 47.855000 ], [ -5.080000, 47.860001 ], [ -5.086000, 47.865002 ], [ -5.092000, 47.868999 ], [ -5.097000, 47.874001 ], [ -5.103000, 47.877998 ], [ -5.109000, 47.882999 ], [ -5.115000, 47.887001 ], [ -5.121000, 47.891998 ], [ -5.127000, 47.896000 ], [ -5.133000, 47.901001 ], [ -5.139000, 47.904999 ], [ -5.145000, 47.910000 ], [ -5.151000, 47.914001 ], [ -5.157000, 47.918999 ], [ -5.163000, 47.924000 ], [ -5.168000, 47.928001 ], [ -5.174000, 47.932999 ], [ -5.180000, 47.937000 ], [ -5.186000, 47.942001 ], [ -5.192000, 47.945999 ], [ -5.198000, 47.951000 ], [ -5.204000, 47.955002 ], [ -5.210000, 47.959999 ], [ -5.216000, 47.964001 ], [ -5.222000, 47.969002 ], [ -5.228000, 47.973000 ], [ -5.233000, 47.978001 ], [ -5.238000, 47.983002 ], [ -5.243000, 47.987999 ], [ -5.247000, 47.993999 ], [ -5.251000, 47.999001 ], [ -5.255000, 48.005001 ], [ -5.259000, 48.009998 ], [ -5.264000, 48.014999 ], [ -5.269000, 48.020000 ], [ -5.274000, 48.025002 ], [ -5.277000, 48.030998 ], [ -5.280000, 48.035999 ], [ -5.283000, 48.042000 ], [ -5.285000, 48.048000 ], [ -5.286000, 48.054001 ], [ -5.287000, 48.060001 ], [ -5.287000, 48.066002 ], [ -5.287000, 48.071999 ], [ -5.288000, 48.077999 ], [ -5.288000, 48.084000 ], [ -5.289000, 48.090000 ], [ -5.289000, 48.096001 ], [ -5.290000, 48.102001 ], [ -5.290000, 48.108002 ], [ -5.291000, 48.113998 ], [ -5.291000, 48.119999 ], [ -5.292000, 48.125999 ], [ -5.292000, 48.132000 ], [ -5.292000, 48.138000 ], [ -5.293000, 48.144001 ], [ -5.293000, 48.150002 ], [ -5.294000, 48.155998 ], [ -5.294000, 48.161999 ], [ -5.295000, 48.167999 ], [ -5.295000, 48.174000 ], [ -5.296000, 48.181000 ], [ -5.296000, 48.187000 ], [ -5.296000, 48.193001 ], [ -5.297000, 48.199001 ], [ -5.297000, 48.205002 ], [ -5.298000, 48.210999 ], [ -5.298000, 48.216999 ], [ -5.299000, 48.223000 ], [ -5.299000, 48.229000 ], [ -5.299000, 48.235001 ], [ -5.300000, 48.241001 ], [ -5.300000, 48.247002 ], [ -5.301000, 48.252998 ], [ -5.301000, 48.258999 ], [ -5.302000, 48.264999 ], [ -5.302000, 48.271000 ], [ -5.302000, 48.277000 ], [ -5.303000, 48.283001 ], [ -5.303000, 48.289001 ], [ -5.304000, 48.294998 ], [ -5.304000, 48.300999 ], [ -5.305000, 48.306999 ], [ -5.305000, 48.313000 ], [ -5.305000, 48.319000 ], [ -5.306000, 48.325001 ], [ -5.306000, 48.331001 ], [ -5.306000, 48.337002 ], [ -5.306000, 48.342999 ], [ -5.305000, 48.348999 ], [ -5.305000, 48.355000 ], [ -5.304000, 48.361000 ], [ -5.304000, 48.367001 ], [ -5.304000, 48.373001 ], [ -5.304000, 48.379002 ], [ -5.304000, 48.384998 ], [ -5.305000, 48.391998 ], [ -5.305000, 48.397999 ], [ -5.305000, 48.403999 ], [ -5.305000, 48.410000 ], [ -5.306000, 48.416000 ], [ -5.306000, 48.422001 ], [ -5.306000, 48.428001 ], [ -5.307000, 48.433998 ], [ -5.307000, 48.439999 ], [ -5.307000, 48.445999 ], [ -5.308000, 48.452000 ], [ -5.308000, 48.458000 ], [ -5.308000, 48.464001 ], [ -5.309000, 48.470001 ], [ -5.309000, 48.476002 ], [ -5.309000, 48.481998 ], [ -5.310000, 48.487999 ], [ -5.310000, 48.493999 ], [ -5.310000, 48.500000 ], [ -5.310000, 48.506001 ], [ -5.310000, 48.512001 ], [ -5.310000, 48.518002 ], [ -5.309000, 48.523998 ], [ -5.309000, 48.529999 ], [ -5.309000, 48.535999 ], [ -5.308000, 48.542000 ], [ -5.308000, 48.548000 ], [ -5.307000, 48.554001 ], [ -5.306000, 48.560001 ], [ -5.305000, 48.566002 ], [ -5.303000, 48.571999 ], [ -5.302000, 48.577999 ], [ -5.300000, 48.584000 ], [ -5.299000, 48.590000 ], [ -5.297000, 48.596001 ], [ -5.294000, 48.602001 ], [ -5.292000, 48.608002 ], [ -5.289000, 48.612999 ], [ -5.286000, 48.618999 ], [ -5.283000, 48.625000 ], [ -5.279000, 48.630001 ], [ -5.276000, 48.636002 ], [ -5.271000, 48.640999 ], [ -5.267000, 48.646000 ], [ -5.263000, 48.652000 ], [ -5.258000, 48.657001 ], [ -5.253000, 48.661999 ], [ -5.248000, 48.667000 ], [ -5.243000, 48.672001 ], [ -5.238000, 48.676998 ], [ -5.232000, 48.681999 ], [ -5.227000, 48.687000 ], [ -5.221000, 48.691002 ], [ -5.216000, 48.695999 ], [ -5.210000, 48.701000 ], [ -5.204000, 48.705002 ], [ -5.198000, 48.709999 ], [ -5.192000, 48.714001 ], [ -5.186000, 48.719002 ], [ -5.180000, 48.723000 ], [ -5.173000, 48.728001 ], [ -5.167000, 48.731998 ], [ -5.160000, 48.736000 ], [ -5.154000, 48.740002 ], [ -5.147000, 48.744999 ], [ -5.141000, 48.749001 ], [ -5.134000, 48.752998 ], [ -5.127000, 48.757000 ], [ -5.121000, 48.761002 ], [ -5.114000, 48.764999 ], [ -5.107000, 48.769001 ], [ -5.100000, 48.772999 ], [ -5.093000, 48.777000 ], [ -5.086000, 48.780998 ], [ -5.079000, 48.785000 ], [ -5.072000, 48.789001 ], [ -5.065000, 48.792000 ], [ -5.058000, 48.796001 ], [ -5.051000, 48.799999 ], [ -5.044000, 48.804001 ], [ -5.037000, 48.807999 ], [ -5.030000, 48.811001 ], [ -5.023000, 48.814999 ], [ -5.015000, 48.819000 ], [ -5.008000, 48.823002 ], [ -5.001000, 48.826000 ], [ -4.994000, 48.830002 ], [ -4.987000, 48.834000 ], [ -4.980000, 48.838001 ], [ -4.972000, 48.841000 ], [ -4.965000, 48.845001 ], [ -4.958000, 48.848999 ], [ -4.951000, 48.853001 ], [ -4.944000, 48.855999 ], [ -4.937000, 48.860001 ], [ -4.930000, 48.863998 ], [ -4.922000, 48.868000 ], [ -4.915000, 48.872002 ], [ -4.908000, 48.875000 ], [ -4.901000, 48.879002 ], [ -4.894000, 48.882999 ], [ -4.887000, 48.887001 ], [ -4.880000, 48.890999 ], [ -4.873000, 48.895000 ], [ -4.866000, 48.898998 ], [ -4.860000, 48.903000 ], [ -4.853000, 48.907001 ], [ -4.846000, 48.910999 ], [ -4.839000, 48.915001 ], [ -4.832000, 48.918999 ], [ -4.826000, 48.923000 ], [ -4.818000, 48.926998 ], [ -4.811000, 48.930000 ], [ -4.804000, 48.933998 ], [ -4.797000, 48.938000 ], [ -4.790000, 48.942001 ], [ -4.783000, 48.945999 ], [ -4.776000, 48.950001 ], [ -4.769000, 48.953999 ], [ -4.763000, 48.958000 ], [ -4.757000, 48.963001 ], [ -4.750000, 48.966999 ], [ -4.742000, 48.969002 ], [ -4.733000, 48.971001 ], [ -4.725000, 48.973999 ], [ -4.717000, 48.976002 ], [ -4.708000, 48.979000 ], [ -4.700000, 48.981998 ], [ -4.692000, 48.985001 ], [ -4.684000, 48.987000 ], [ -4.676000, 48.990002 ], [ -4.668000, 48.993000 ], [ -4.659000, 48.994999 ], [ -4.650000, 48.997002 ], [ -4.642000, 48.999001 ], [ -4.633000, 49.000000 ], [ -4.624000, 49.001999 ], [ -4.615000, 49.004002 ], [ -4.606000, 49.006001 ], [ -4.598000, 49.007000 ], [ -4.589000, 49.008999 ], [ -4.580000, 49.011002 ], [ -4.571000, 49.013000 ], [ -4.563000, 49.014999 ], [ -4.554000, 49.015999 ], [ -4.545000, 49.018002 ], [ -4.536000, 49.020000 ], [ -4.528000, 49.021999 ], [ -4.519000, 49.023998 ], [ -4.510000, 49.025002 ], [ -4.501000, 49.027000 ], [ -4.493000, 49.028999 ], [ -4.484000, 49.030998 ], [ -4.475000, 49.033001 ], [ -4.466000, 49.034000 ], [ -4.458000, 49.035999 ], [ -4.449000, 49.037998 ], [ -4.440000, 49.040001 ], [ -4.431000, 49.041000 ], [ -4.423000, 49.042999 ], [ -4.414000, 49.044998 ], [ -4.405000, 49.047001 ], [ -4.396000, 49.049000 ], [ -4.388000, 49.049999 ], [ -4.379000, 49.051998 ], [ -4.370000, 49.054001 ], [ -4.361000, 49.056000 ], [ -4.353000, 49.057999 ], [ -4.344000, 49.058998 ], [ -4.335000, 49.061001 ], [ -4.326000, 49.063000 ], [ -4.317000, 49.064999 ], [ -4.309000, 49.066002 ], [ -4.300000, 49.068001 ], [ -4.291000, 49.070000 ], [ -4.282000, 49.070999 ], [ -4.273000, 49.073002 ], [ -4.265000, 49.075001 ], [ -4.256000, 49.077000 ], [ -4.247000, 49.077999 ], [ -4.238000, 49.080002 ], [ -4.229000, 49.082001 ], [ -4.221000, 49.083000 ], [ -4.212000, 49.084999 ], [ -4.203000, 49.087002 ], [ -4.194000, 49.088001 ], [ -4.185000, 49.090000 ], [ -4.176000, 49.091000 ], [ -4.167000, 49.092999 ], [ -4.159000, 49.095001 ], [ -4.150000, 49.096001 ], [ -4.141000, 49.098000 ], [ -4.132000, 49.098999 ], [ -4.123000, 49.101002 ], [ -4.114000, 49.102001 ], [ -4.105000, 49.104000 ], [ -4.096000, 49.105000 ], [ -4.088000, 49.106998 ], [ -4.079000, 49.108002 ], [ -4.063093, 49.110609 ], [ -3.942000, 48.437000 ] ] ] } }
,
{ "type": "Feature", "properties": { "area": 0.870000, "perimeter": 4.320000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -4.049000, 48.033001 ], [ -4.061000, 48.040001 ], [ -4.068000, 48.044998 ], [ -4.074000, 48.049000 ], [ -4.081000, 48.053001 ], [ -4.087000, 48.056999 ], [ -4.093000, 48.062000 ], [ -4.099000, 48.066002 ], [ -4.105000, 48.070999 ], [ -4.111000, 48.076000 ], [ -4.116000, 48.080002 ], [ -4.121000, 48.084999 ], [ -4.127000, 48.090000 ], [ -4.131000, 48.095001 ], [ -4.136000, 48.101002 ], [ -4.140000, 48.105999 ], [ -4.144000, 48.111000 ], [ -4.148000, 48.117001 ], [ -4.151000, 48.122002 ], [ -4.154000, 48.127998 ], [ -4.156000, 48.133999 ], [ -4.159000, 48.139999 ], [ -4.161000, 48.146000 ], [ -4.162000, 48.152000 ], [ -4.164000, 48.158001 ], [ -4.165000, 48.164001 ], [ -4.166000, 48.169998 ], [ -4.167000, 48.175999 ], [ -4.171000, 48.181000 ], [ -4.173000, 48.187000 ], [ -4.173000, 48.193001 ], [ -4.174000, 48.199001 ], [ -4.174000, 48.205002 ], [ -4.173000, 48.210999 ], [ -4.173000, 48.216999 ], [ -4.171000, 48.223000 ], [ -4.170000, 48.229000 ], [ -4.169000, 48.235001 ], [ -4.167000, 48.241001 ], [ -4.165000, 48.247002 ], [ -4.163000, 48.252998 ], [ -4.161000, 48.257999 ], [ -4.159000, 48.264000 ], [ -4.157000, 48.270000 ], [ -4.155000, 48.276001 ], [ -4.153000, 48.282001 ], [ -4.150000, 48.287998 ], [ -4.147000, 48.292999 ], [ -4.145000, 48.299000 ], [ -4.141000, 48.305000 ], [ -4.138000, 48.310001 ], [ -4.134000, 48.316002 ], [ -4.129000, 48.320999 ], [ -4.125000, 48.326000 ], [ -4.120000, 48.331001 ], [ -4.114000, 48.335999 ], [ -4.109000, 48.341000 ], [ -4.104000, 48.346001 ], [ -4.099000, 48.351002 ], [ -4.093000, 48.355999 ], [ -4.088000, 48.361000 ], [ -4.082000, 48.365002 ], [ -4.077000, 48.369999 ], [ -4.071000, 48.375000 ], [ -4.066000, 48.380001 ], [ -4.060000, 48.383999 ], [ -4.054000, 48.389000 ], [ -4.048000, 48.394001 ], [ -4.042000, 48.397999 ], [ -4.036000, 48.403000 ], [ -4.030000, 48.407001 ], [ -4.024000, 48.410999 ], [ -4.018000, 48.416000 ], [ -4.009000, 48.417999 ], [ -4.001000, 48.421001 ], [ -3.993000, 48.423000 ], [ -3.984000, 48.424999 ], [ -3.976000, 48.428001 ], [ -3.968000, 48.430000 ], [ -3.959000, 48.431999 ], [ -3.951000, 48.433998 ], [ -3.942000, 48.437000 ], [ -3.934000, 48.438999 ], [ -3.926000, 48.441002 ], [ -3.917000, 48.444000 ], [ -3.909000, 48.445999 ], [ -3.901000, 48.449001 ], [ -3.893000, 48.452000 ], [ -3.884000, 48.453999 ], [ -3.876000, 48.456001 ], [ -3.868000, 48.459000 ], [ -3.859000, 48.460999 ], [ -3.851000, 48.463001 ], [ -3.843000, 48.465000 ], [ -3.834000, 48.466999 ], [ -3.825000, 48.469002 ], [ -3.816000, 48.471001 ], [ -3.808000, 48.472000 ], [ -3.799000, 48.473999 ], [ -3.790000, 48.474998 ], [ -3.781000, 48.476002 ], [ -3.772000, 48.478001 ], [ -3.764000, 48.479000 ], [ -3.755000, 48.480999 ], [ -3.746000, 48.481998 ], [ -3.737000, 48.483002 ], [ -3.728000, 48.484001 ], [ -3.719000, 48.486000 ], [ -3.710000, 48.487000 ], [ -3.701000, 48.487999 ], [ -3.692000, 48.488998 ], [ -3.684000, 48.490002 ], [ -3.675000, 48.491001 ], [ -3.666000, 48.492001 ], [ -3.657000, 48.493000 ], [ -3.648000, 48.493999 ], [ -3.639000, 48.494999 ], [ -3.630000, 48.495998 ], [ -3.621000, 48.497002 ], [ -3.612000, 48.497002 ], [ -3.603000, 48.498001 ], [ -3.594000, 48.499001 ], [ -3.585000, 48.500000 ], [ -3.576000, 48.500000 ], [ -3.567000, 48.500999 ], [ -3.558000, 48.500999 ], [ -3.549000, 48.501999 ], [ -3.540000, 48.501999 ], [ -3.530000, 48.501999 ], [ -3.521000, 48.502998 ], [ -3.512000, 48.502998 ], [ -3.503000, 48.502998 ], [ -3.494000, 48.502998 ], [ -3.485000, 48.502998 ], [ -3.476000, 48.502998 ], [ -3.467000, 48.502998 ], [ -3.458000, 48.502998 ], [ -3.449000, 48.502998 ], [ -3.440000, 48.502998 ], [ -3.431000, 48.502998 ], [ -3.422000, 48.502998 ], [ -3.412000, 48.502998 ], [ -3.403000, 48.502998 ], [ -3.394000, 48.502998 ], [ -3.385000, 48.502998 ], [ -3.376000, 48.502998 ], [ -3.367000, 48.502998 ], [ -3.358000, 48.502998 ], [ -3.349000, 48.502998 ], [ -3.340000, 48.502998 ], [ -3.331000, 48.504002 ], [ -3.322000, 48.505001 ], [ -3.313000, 48.505001 ], [ -3.304000, 48.506001 ], [ -3.295000, 48.507000 ], [ -3.286000, 48.507999 ], [ -3.277000, 48.507999 ], [ -3.268000, 48.508999 ], [ -3.259000, 48.509998 ], [ -3.250000, 48.511002 ], [ -3.241000, 48.512001 ], [ -3.232000, 48.512001 ], [ -3.223000, 48.513000 ], [ -3.214000, 48.513000 ], [ -3.205000, 48.513000 ], [ -3.195000, 48.513000 ], [ -3.186000, 48.513000 ], [ -3.177000, 48.513000 ], [ -3.168000, 48.512001 ], [ -3.159000, 48.512001 ], [ -3.150000, 48.509998 ], [ -3.142000, 48.508999 ], [ -3.133000, 48.507000 ], [ -3.125000, 48.505001 ], [ -3.116000, 48.501999 ], [ -3.108000, 48.500000 ], [ -3.100000, 48.497002 ], [ -3.092000, 48.493999 ], [ -3.084000, 48.492001 ], [ -3.076000, 48.488998 ], [ -3.068000, 48.486000 ], [ -3.060000, 48.483002 ], [ -3.052000, 48.479000 ], [ -3.045000, 48.476002 ], [ -3.037000, 48.473000 ], [ -3.029000, 48.470001 ], [ -3.022000, 48.466000 ], [ -3.015000, 48.463001 ], [ -3.007000, 48.459000 ], [ -3.000000, 48.456001 ], [ -2.992000, 48.452000 ], [ -2.985000, 48.449001 ], [ -2.978000, 48.445000 ], [ -2.971000, 48.441002 ], [ -2.964000, 48.438000 ], [ -2.956000, 48.433998 ], [ -2.949000, 48.430000 ], [ -2.942000, 48.425999 ], [ -2.935000, 48.423000 ], [ -2.928000, 48.418999 ], [ -2.921000, 48.415001 ], [ -2.914000, 48.410999 ], [ -2.907000, 48.408001 ], [ -2.900000, 48.403999 ], [ -2.893000, 48.400002 ], [ -2.885000, 48.396000 ], [ -2.878000, 48.393002 ], [ -2.871000, 48.389000 ], [ -2.864000, 48.384998 ], [ -2.857000, 48.381001 ], [ -2.850000, 48.377998 ], [ -2.843000, 48.374001 ], [ -2.835000, 48.369999 ], [ -2.828000, 48.367001 ], [ -2.821000, 48.362999 ], [ -2.813000, 48.360001 ], [ -2.806000, 48.355999 ], [ -2.799000, 48.353001 ], [ -2.791000, 48.349998 ], [ -2.783000, 48.346001 ], [ -2.776000, 48.342999 ], [ -2.768000, 48.340000 ], [ -2.760000, 48.337002 ], [ -2.752000, 48.334000 ], [ -2.744000, 48.332001 ], [ -2.735000, 48.331001 ], [ -2.726000, 48.330002 ], [ -2.717000, 48.328999 ], [ -2.708000, 48.327999 ], [ -2.699000, 48.327000 ], [ -2.690000, 48.326000 ], [ -2.681000, 48.324001 ], [ -2.673000, 48.323002 ], [ -2.664000, 48.320999 ], [ -2.655000, 48.320000 ], [ -2.646000, 48.318001 ], [ -2.638000, 48.317001 ], [ -2.629000, 48.314999 ], [ -2.620000, 48.313999 ], [ -2.611000, 48.312000 ], [ -2.603000, 48.311001 ], [ -2.594000, 48.308998 ], [ -2.585000, 48.307999 ], [ -2.576000, 48.306000 ], [ -2.567000, 48.305000 ], [ -2.559000, 48.303001 ], [ -2.550000, 48.301998 ], [ -2.541000, 48.299999 ], [ -2.532000, 48.299000 ], [ -2.524000, 48.297001 ], [ -2.515000, 48.296001 ], [ -2.506000, 48.293999 ], [ -2.497000, 48.292999 ], [ -2.489000, 48.291000 ], [ -2.480000, 48.290001 ], [ -2.471000, 48.287998 ], [ -2.462000, 48.286999 ], [ -2.454000, 48.285000 ], [ -2.445000, 48.284000 ], [ -2.436000, 48.282001 ], [ -2.427000, 48.280998 ], [ -2.419000, 48.278999 ], [ -2.410000, 48.277000 ], [ -2.401000, 48.276001 ], [ -2.392000, 48.273998 ], [ -2.384000, 48.272999 ], [ -2.375000, 48.271000 ], [ -2.366000, 48.270000 ], [ -2.358000, 48.268002 ], [ -2.349000, 48.266998 ], [ -2.340000, 48.264999 ], [ -2.331000, 48.263000 ], [ -2.325000, 48.262001 ], [ -2.332000, 48.245998 ], [ -2.335000, 48.240002 ], [ -2.337000, 48.234001 ], [ -2.340000, 48.228001 ], [ -2.342000, 48.222000 ], [ -2.345000, 48.216999 ], [ -2.347000, 48.210999 ], [ -2.350000, 48.205002 ], [ -2.352000, 48.199001 ], [ -2.355000, 48.193001 ], [ -2.357000, 48.188000 ], [ -2.360000, 48.181999 ], [ -2.362000, 48.175999 ], [ -2.365000, 48.169998 ], [ -2.368000, 48.165001 ], [ -2.370000, 48.159000 ], [ -2.373000, 48.153000 ], [ -2.376000, 48.146999 ], [ -2.378000, 48.141998 ], [ -2.381000, 48.136002 ], [ -2.384000, 48.130001 ], [ -2.387000, 48.124001 ], [ -2.390000, 48.118999 ], [ -2.392000, 48.112999 ], [ -2.395000, 48.106998 ], [ -2.398000, 48.101002 ], [ -2.401000, 48.096001 ], [ -2.404000, 48.090000 ], [ -2.407000, 48.084000 ], [ -2.409000, 48.077999 ], [ -2.412000, 48.073002 ], [ -2.415000, 48.067001 ], [ -2.418000, 48.061001 ], [ -2.421000, 48.056000 ], [ -2.424000, 48.049999 ], [ -2.427000, 48.043999 ], [ -2.430000, 48.039001 ], [ -2.433000, 48.033001 ], [ -2.436000, 48.027000 ], [ -2.439000, 48.021000 ], [ -2.442000, 48.015999 ], [ -2.445000, 48.009998 ], [ -2.448000, 48.004002 ], [ -2.451000, 47.999001 ], [ -2.454000, 47.993000 ], [ -2.457000, 47.987000 ], [ -2.460000, 47.981998 ], [ -2.463000, 47.976002 ], [ -2.466000, 47.970001 ], [ -2.469000, 47.965000 ], [ -2.472000, 47.959000 ], [ -2.475000, 47.952999 ], [ -2.478000, 47.946999 ], [ -2.481000, 47.942001 ], [ -2.484000, 47.936001 ], [ -2.487000, 47.930000 ], [ -2.490000, 47.924999 ], [ -2.493000, 47.918999 ], [ -2.496000, 47.912998 ], [ -2.499000, 47.908001 ], [ -2.502000, 47.902000 ], [ -2.505000, 47.896000 ], [ -2.508000, 47.890999 ], [ -2.511000, 47.884998 ], [ -2.514000, 47.879002 ], [ -2.517000, 47.874001 ], [ -2.520000, 47.868000 ], [ -2.523000, 47.862000 ], [ -2.526000, 47.856998 ], [ -2.529000, 47.851002 ], [ -2.532000, 47.845001 ], [ -2.535000, 47.840000 ], [ -2.538000, 47.834000 ], [ -2.541000, 47.827999 ], [ -2.544000, 47.821999 ], [ -2.547000, 47.817001 ], [ -2.550000, 47.811001 ], [ -2.553000, 47.805000 ], [ -2.556000, 47.799999 ], [ -2.559000, 47.793999 ], [ -2.562000, 47.787998 ], [ -2.565000, 47.783001 ], [ -2.568000, 47.777000 ], [ -2.570000, 47.771000 ], [ -2.573000, 47.764999 ], [ -2.586000, 47.771000 ], [ -2.594000, 47.773998 ], [ -2.601000, 47.777000 ], [ -2.609000, 47.779999 ], [ -2.617000, 47.783001 ], [ -2.624000, 47.785999 ], [ -2.632000, 47.789001 ], [ -2.640000, 47.792999 ], [ -2.647000, 47.796001 ], [ -2.655000, 47.799000 ], [ -2.663000, 47.801998 ], [ -2.670000, 47.805000 ], [ -2.678000, 47.807999 ], [ -2.686000, 47.811001 ], [ -2.694000, 47.813999 ], [ -2.701000, 47.817001 ], [ -2.709000, 47.820000 ], [ -2.717000, 47.823002 ], [ -2.725000, 47.826000 ], [ -2.732000, 47.828999 ], [ -2.740000, 47.832001 ], [ -2.748000, 47.834999 ], [ -2.755000, 47.838001 ], [ -2.764000, 47.838001 ], [ -2.772000, 47.840000 ], [ -2.781000, 47.842999 ], [ -2.789000, 47.845001 ], [ -2.797000, 47.847000 ], [ -2.805000, 47.849998 ], [ -2.814000, 47.852001 ], [ -2.822000, 47.854000 ], [ -2.831000, 47.855999 ], [ -2.839000, 47.858002 ], [ -2.848000, 47.860001 ], [ -2.856000, 47.862000 ], [ -2.864000, 47.863998 ], [ -2.873000, 47.867001 ], [ -2.881000, 47.868999 ], [ -2.889000, 47.870998 ], [ -2.898000, 47.873001 ], [ -2.906000, 47.875000 ], [ -2.915000, 47.875999 ], [ -2.924000, 47.877998 ], [ -2.932000, 47.879002 ], [ -2.941000, 47.881001 ], [ -2.950000, 47.882000 ], [ -2.958000, 47.883999 ], [ -2.967000, 47.886002 ], [ -2.975000, 47.888000 ], [ -2.984000, 47.889999 ], [ -2.992000, 47.891998 ], [ -3.001000, 47.893002 ], [ -3.010000, 47.895000 ], [ -3.019000, 47.896000 ], [ -3.027000, 47.896999 ], [ -3.036000, 47.897999 ], [ -3.045000, 47.898998 ], [ -3.054000, 47.900002 ], [ -3.063000, 47.901001 ], [ -3.072000, 47.902000 ], [ -3.081000, 47.903000 ], [ -3.089000, 47.903999 ], [ -3.098000, 47.905998 ], [ -3.107000, 47.907001 ], [ -3.115000, 47.909000 ], [ -3.124000, 47.910000 ], [ -3.133000, 47.910999 ], [ -3.142000, 47.912998 ], [ -3.150000, 47.914001 ], [ -3.159000, 47.915001 ], [ -3.168000, 47.917000 ], [ -3.177000, 47.917999 ], [ -3.185000, 47.918999 ], [ -3.194000, 47.921001 ], [ -3.203000, 47.922001 ], [ -3.212000, 47.923000 ], [ -3.220000, 47.924999 ], [ -3.229000, 47.925999 ], [ -3.238000, 47.926998 ], [ -3.247000, 47.929001 ], [ -3.255000, 47.930000 ], [ -3.264000, 47.931000 ], [ -3.273000, 47.932999 ], [ -3.282000, 47.933998 ], [ -3.290000, 47.935001 ], [ -3.299000, 47.937000 ], [ -3.308000, 47.938000 ], [ -3.317000, 47.938999 ], [ -3.326000, 47.941002 ], [ -3.334000, 47.942001 ], [ -3.343000, 47.943001 ], [ -3.352000, 47.944000 ], [ -3.361000, 47.945999 ], [ -3.369000, 47.946999 ], [ -3.378000, 47.948002 ], [ -3.387000, 47.949001 ], [ -3.396000, 47.951000 ], [ -3.405000, 47.952000 ], [ -3.413000, 47.952999 ], [ -3.422000, 47.953999 ], [ -3.431000, 47.956001 ], [ -3.440000, 47.957001 ], [ -3.449000, 47.958000 ], [ -3.457000, 47.959000 ], [ -3.466000, 47.959999 ], [ -3.475000, 47.960999 ], [ -3.484000, 47.963001 ], [ -3.493000, 47.964001 ], [ -3.502000, 47.965000 ], [ -3.510000, 47.966000 ], [ -3.519000, 47.966999 ], [ -3.528000, 47.967999 ], [ -3.537000, 47.969002 ], [ -3.546000, 47.970001 ], [ -3.555000, 47.971001 ], [ -3.563000, 47.972000 ], [ -3.572000, 47.973000 ], [ -3.581000, 47.973999 ], [ -3.590000, 47.974998 ], [ -3.599000, 47.976002 ], [ -3.608000, 47.977001 ], [ -3.617000, 47.978001 ], [ -3.625000, 47.979000 ], [ -3.634000, 47.980000 ], [ -3.643000, 47.980999 ], [ -3.652000, 47.981998 ], [ -3.661000, 47.983002 ], [ -3.670000, 47.984001 ], [ -3.679000, 47.985001 ], [ -3.688000, 47.985001 ], [ -3.697000, 47.986000 ], [ -3.706000, 47.987000 ], [ -3.714000, 47.987999 ], [ -3.723000, 47.988998 ], [ -3.732000, 47.990002 ], [ -3.741000, 47.990002 ], [ -3.750000, 47.991001 ], [ -3.759000, 47.992001 ], [ -3.768000, 47.993000 ], [ -3.777000, 47.993000 ], [ -3.786000, 47.993999 ], [ -3.795000, 47.994999 ], [ -3.804000, 47.995998 ], [ -3.813000, 47.995998 ], [ -3.821000, 47.997002 ], [ -3.830000, 47.998001 ], [ -3.839000, 47.998001 ], [ -3.848000, 47.999001 ], [ -3.857000, 48.000000 ], [ -3.866000, 48.000000 ], [ -3.875000, 48.000999 ], [ -3.884000, 48.001999 ], [ -3.893000, 48.001999 ], [ -3.902000, 48.002998 ], [ -3.911000, 48.004002 ], [ -3.920000, 48.004002 ], [ -3.929000, 48.005001 ], [ -3.938000, 48.006001 ], [ -3.946000, 48.007000 ], [ -3.955000, 48.007999 ], [ -3.964000, 48.007000 ], [ -3.972000, 48.004002 ], [ -3.981000, 48.004002 ], [ -3.989000, 48.007000 ], [ -3.996000, 48.009998 ], [ -4.004000, 48.013000 ], [ -4.012000, 48.015999 ], [ -4.020000, 48.019001 ], [ -4.027000, 48.022999 ], [ -4.035000, 48.026001 ], [ -4.042000, 48.028999 ], [ -4.049000, 48.033001 ] ] ] } }
]
}

Dashed line in Line plus bar chart NVD3

I have added a line in line plus bar chart in NVD3. but i want that added single line in dashed format.
How to do it in linePlusBar chart.
As shown in image Limit line I added but i want this line to be doted or dashed.
Please help me out, how to do it??
As shown in above graph i want orange line to be dashed.
how to do it??
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.linePlusBarChart().margin({
top : 50,
right : 80,
bottom : 30,
left : 80
}).legendRightAxisHint(' [Using Right Axis]').color(
d3.scale.category10().range()).options({
focusEnable : false
});
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
}).showMaxMin(false);
chart.y2Axis.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
chart.bars.forceY([ 0 ]).padData(false);
chart.x2Axis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
}).showMaxMin(false);
d3.select('#chart1 svg').datum(testdata).transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
</script>
Data as follows:
var testdata = [
{
"key" : "Quantity",
"bar" : true,
"values" : [ [ 1136005200000, 1271000.0 ],
[ 1138683600000, 1271000.0 ],
[ 1141102800000, 1271000.0 ], [ 1143781200000, 0 ],
[ 1146369600000, 0 ], [ 1149048000000, 0 ],
[ 1151640000000, 0 ], [ 1154318400000, 0 ],
[ 1156996800000, 0 ], [ 1159588800000, 3899486.0 ],
[ 1162270800000, 3899486.0 ],
[ 1164862800000, 3899486.0 ],
[ 1167541200000, 3564700.0 ],
[ 1170219600000, 3564700.0 ],
[ 1172638800000, 3564700.0 ],
[ 1175313600000, 2648493.0 ],
[ 1177905600000, 2648493.0 ],
[ 1180584000000, 2648493.0 ],
[ 1183176000000, 2522993.0 ],
[ 1185854400000, 2522993.0 ],
[ 1188532800000, 2522993.0 ],
[ 1191124800000, 2906501.0 ],
[ 1193803200000, 2906501.0 ],
[ 1196398800000, 2906501.0 ],
[ 1199077200000, 2206761.0 ],
[ 1201755600000, 2206761.0 ],
[ 1204261200000, 2206761.0 ],
[ 1206936000000, 2287726.0 ],
[ 1209528000000, 2287726.0 ],
[ 1212206400000, 2287726.0 ],
[ 1214798400000, 2732646.0 ],
[ 1217476800000, 2732646.0 ],
[ 1220155200000, 2732646.0 ],
[ 1222747200000, 2599196.0 ],
[ 1225425600000, 2599196.0 ],
[ 1228021200000, 2599196.0 ],
[ 1230699600000, 1924387.0 ],
[ 1233378000000, 1924387.0 ],
[ 1235797200000, 1924387.0 ],
[ 1238472000000, 1756311.0 ],
[ 1241064000000, 1756311.0 ],
[ 1243742400000, 1756311.0 ],
[ 1246334400000, 1743470.0 ],
[ 1249012800000, 1743470.0 ],
[ 1251691200000, 1743470.0 ],
[ 1254283200000, 1519010.0 ],
[ 1256961600000, 1519010.0 ],
[ 1259557200000, 1519010.0 ],
[ 1262235600000, 1591444.0 ],
[ 1264914000000, 1591444.0 ],
[ 1267333200000, 1591444.0 ],
[ 1270008000000, 1543784.0 ],
[ 1272600000000, 1543784.0 ],
[ 1275278400000, 1543784.0 ],
[ 1277870400000, 1309915.0 ],
[ 1280548800000, 1309915.0 ],
[ 1283227200000, 1309915.0 ],
[ 1285819200000, 1331875.0 ],
[ 1288497600000, 1331875.0 ],
[ 1291093200000, 1331875.0 ],
[ 1293771600000, 1331875.0 ],
[ 1296450000000, 1154695.0 ],
[ 1298869200000, 1154695.0 ],
[ 1301544000000, 1194025.0 ],
[ 1304136000000, 1194025.0 ],
[ 1306814400000, 1194025.0 ],
[ 1309406400000, 1194025.0 ],
[ 1312084800000, 1194025.0 ],
[ 1314763200000, 1244525.0 ],
[ 1317355200000, 475000.0 ],
[ 1320033600000, 475000.0 ],
[ 1322629200000, 475000.0 ],
[ 1325307600000, 690033.0 ],
[ 1327986000000, 690033.0 ],
[ 1330491600000, 690033.0 ],
[ 1333166400000, 514733.0 ],
[ 1335758400000, 514733.0 ] ]
},
{
"key" : "Limit",
"values" : [ [ 1136005200000, 500 ], [ 1335758400000, 500 ] ],
classed : 'dashed'
},
{
"key" : "Price",
"values" : [ [ 1136005200000, 71.89 ],
[ 1138683600000, 75.51 ], [ 1141102800000, 68.49 ],
[ 1143781200000, 62.72 ], [ 1146369600000, 70.39 ],
[ 1149048000000, 59.77 ], [ 1151640000000, 57.27 ],
[ 1154318400000, 67.96 ], [ 1156996800000, 67.85 ],
[ 1159588800000, 76.98 ], [ 1162270800000, 81.08 ],
[ 1164862800000, 91.66 ], [ 1167541200000, 84.84 ],
[ 1170219600000, 85.73 ], [ 1172638800000, 84.61 ],
[ 1175313600000, 92.91 ], [ 1177905600000, 99.8 ],
[ 1180584000000, 121.191 ],
[ 1183176000000, 122.04 ],
[ 1185854400000, 131.76 ],
[ 1188532800000, 138.48 ],
[ 1191124800000, 153.47 ],
[ 1193803200000, 189.95 ],
[ 1196398800000, 182.22 ],
[ 1199077200000, 198.08 ],
[ 1201755600000, 135.36 ],
[ 1204261200000, 125.02 ],
[ 1206936000000, 143.5 ],
[ 1209528000000, 173.95 ],
[ 1212206400000, 188.75 ],
[ 1214798400000, 167.44 ],
[ 1217476800000, 158.95 ],
[ 1220155200000, 169.53 ],
[ 1222747200000, 113.66 ],
[ 1225425600000, 107.59 ],
[ 1228021200000, 92.67 ], [ 1230699600000, 85.35 ],
[ 1233378000000, 90.13 ], [ 1235797200000, 89.31 ],
[ 1238472000000, 105.12 ],
[ 1241064000000, 125.83 ],
[ 1243742400000, 135.81 ],
[ 1246334400000, 142.43 ],
[ 1249012800000, 163.39 ],
[ 1251691200000, 168.21 ],
[ 1254283200000, 185.35 ],
[ 1256961600000, 188.5 ],
[ 1259557200000, 199.91 ],
[ 1262235600000, 210.732 ],
[ 1264914000000, 192.063 ],
[ 1267333200000, 204.62 ],
[ 1270008000000, 235.0 ],
[ 1272600000000, 261.09 ],
[ 1275278400000, 256.88 ],
[ 1277870400000, 251.53 ],
[ 1280548800000, 257.25 ],
[ 1283227200000, 243.1 ],
[ 1285819200000, 283.75 ],
[ 1288497600000, 300.98 ],
[ 1291093200000, 311.15 ],
[ 1293771600000, 322.56 ],
[ 1296450000000, 339.32 ],
[ 1298869200000, 353.21 ],
[ 1301544000000, 348.5075 ],
[ 1304136000000, 350.13 ],
[ 1306814400000, 347.83 ],
[ 1309406400000, 335.67 ],
[ 1312084800000, 390.48 ],
[ 1314763200000, 384.83 ],
[ 1317355200000, 381.32 ],
[ 1320033600000, 404.78 ],
[ 1322629200000, 382.2 ], [ 1325307600000, 405.0 ],
[ 1327986000000, 456.48 ],
[ 1330491600000, 542.44 ],
[ 1333166400000, 599.55 ],
[ 1335758400000, 583.98 ] ]
} ]

You can do this with CSS. For instance if you wanted the 2nd line dashed:
<style>
.nv-series-1>path {
stroke-dasharray: 3,3;
}
</style>

[Leaflet]How to change Map and its Border?

Good Evening too Everyone!
I have a website that has a Leaflet Map that is focused on an area and that area is bordered.The bordered area is editable and whats outside of that area is the whole world which is not editable. If you where not cleared here is sample.
It is a Leaflet Map that is focused on an area and that area is bordered.
and the code for that is here
CODE
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script
src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js">
</script>
<script>
// credits: https://github.com/turban/Leaflet.Mask
L.Mask = L.Polygon.extend({
options: {
stroke: false,
color: '#333',
fillOpacity: 0.5,
clickable: true,
outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
},
initialize: function (latLngs, options) {
var outerBoundsLatLngs = [
this.options.outerBounds.getSouthWest(),
this.options.outerBounds.getNorthWest(),
this.options.outerBounds.getNorthEast(),
this.options.outerBounds.getSouthEast()
];
L.Polygon.prototype.initialize.call(this, [outerBoundsLatLngs, latLngs], options);
},
});
L.mask = function (latLngs, options) {
return new L.Mask(latLngs, options);
};
// Polygon created with http://geojson.io/
var france = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.0207986831665,
14.71238001066067
],
[
121.02015495300293,
14.71200643586981
],
[
121.01968288421631,
14.712338502382146
],
[
121.01908206939697,
14.712421518931281
],
[
121.0184383392334,
14.712172469189156
],
[
121.0180950164795,
14.711715877256967
],
[
121.01775169372559,
14.71113475887066
],
[
121.01766586303711,
14.710512130310955
],
[
121.01783752441405,
14.709681956134785
],
[
121.01818084716797,
14.708810269851188
],
[
121.01886749267578,
14.707648016057705
],
[
121.01895332336426,
14.70611217119577
],
[
121.01818084716797,
14.705198961020216
],
[
121.01792335510252,
14.704742354499942
],
[
121.01783752441405,
14.704161217547579
],
[
121.01818084716797,
14.703663098928693
],
[
121.01818084716797,
14.703497059136536
],
[
121.0185670852661,
14.703663098928693
],
[
121.01912498474121,
14.703331019218112
],
[
121.01989746093749,
14.703538569096404
],
[
121.02054119110106,
14.70370460885701
],
[
121.02161407470703,
14.703912158380186
],
[
121.0215711593628,
14.70436876663671
],
[
121.02178573608397,
14.704410276430858
],
[
121.02195739746092,
14.703497059136536
],
[
121.02230072021484,
14.702417797409819
],
[
121.02380275726317,
14.702293266867338
],
[
121.02569103240967,
14.702168736253803
],
[
121.02646350860594,
14.701878164546082
],
[
121.02706432342528,
14.700757384337317
],
[
121.02805137634277,
14.700259257953755
],
[
121.02899551391602,
14.699179980225122
],
[
121.02981090545653,
14.699179980225122
],
[
121.03191375732423,
14.699138469436718
],
[
121.03272914886475,
14.699076203239365
],
[
121.03275060653685,
14.699449800157279
],
[
121.03339433670043,
14.69963659837658
],
[
121.03414535522461,
14.699595087674995
],
[
121.03498220443726,
14.69976113043405
],
[
121.03519678115845,
14.69976113043405
],
[
121.03528261184691,
14.69984415176623
],
[
121.03601217269896,
14.699449800157279
],
[
121.03624820709227,
14.699179980225122
],
[
121.03901624679565,
14.69996868370533
],
[
121.03953123092651,
14.699512066248136
],
[
121.0398530960083,
14.699366778675191
],
[
121.04068994522093,
14.699781885770053
],
[
121.04114055633545,
14.699532821607814
],
[
121.0413122177124,
14.699283757161554
],
[
121.04171991348267,
14.699408289420186
],
[
121.0417413711548,
14.699574332321244
],
[
121.04339361190797,
14.700487566020588
],
[
121.0443377494812,
14.699532821607814
],
[
121.04448795318604,
14.699449800157279
],
[
121.04633331298827,
14.700549831815577
],
[
121.04828596115112,
14.699449800157279
],
[
121.04929447174072,
14.700051704958621
],
[
121.04968070983888,
14.700591342335706
],
[
121.04944467544556,
14.70121399919081
],
[
121.04987382888793,
14.702625348156174
],
[
121.0497236251831,
14.702791388611221
],
[
121.04920864105225,
14.70277063356125
],
[
121.0489296913147,
14.702293266867338
],
[
121.04762077331542,
14.70254232788131
],
[
121.04611873626708,
14.703642343961583
],
[
121.0454750061035,
14.704804619081676
],
[
121.04521751403809,
14.704991412720306
],
[
121.04508876800537,
14.705219715839354
],
[
121.04195594787598,
14.705240470656518
],
[
121.0413122177124,
14.707212169289635
],
[
121.04124784469603,
14.707648016057705
],
[
121.03998184204102,
14.708208389195038
],
[
121.03970289230347,
14.708104616500359
],
[
121.03871583938597,
14.708540461486441
],
[
121.0380506515503,
14.709308376725264
],
[
121.03729963302611,
14.709183850113313
],
[
121.03691339492798,
14.708976305602194
],
[
121.03669881820677,
14.70910083233254
],
[
121.03644132614136,
14.70910083233254
],
[
121.03607654571533,
14.709453657682731
],
[
121.03358745574951,
14.709744219307547
],
[
121.03341579437256,
14.710408358711632
],
[
121.0334587097168,
14.710532884624905
],
[
121.03257894515991,
14.710740427655768
],
[
121.03169918060301,
14.710761181948001
],
[
121.03107690811157,
14.71049137599503
],
[
121.03081941604613,
14.710636656165004
],
[
121.0309910774231,
14.711363055564133
],
[
121.03090524673463,
14.711757385653923
],
[
121.03021860122679,
14.71238001066067
],
[
121.03002548217773,
14.713210174572755
],
[
121.0294461250305,
14.714164859166916
],
[
121.02940320968627,
14.714621445974403
],
[
121.02946758270264,
14.714808231211153
],
[
121.02918863296509,
14.715327078251933
],
[
121.02910280227661,
14.715513862884555
],
[
121.02882385253906,
14.715700647357233
],
[
121.0284376144409,
14.715742154996123
],
[
121.02777242660522,
14.71607421582282
],
[
121.02704286575317,
14.71621949227558
],
[
121.02564811706543,
14.716862858260502
],
[
121.0254120826721,
14.71694587308808
],
[
121.02513313293456,
14.716904365678229
],
[
121.02459669113159,
14.71644778364871
],
[
121.02384567260741,
14.716800597119072
],
[
121.02365255355836,
14.716759089681588
],
[
121.02330923080444,
14.716364768631571
],
[
121.02230072021484,
14.715887431669993
],
[
121.02191448211669,
14.715534616722733
],
[
121.0215711593628,
14.712919617562784
],
[
121.02139949798585,
14.712712076604523
],
[
121.02120637893677,
14.71252528957328
],
[
121.0207986831665,
14.71238001066067
]
]
]
}
}
]
};
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 15, maxZoom: 18, attribution: osmAttrib});
map.addLayer(osm);
map.setView([14.7079279,121.0315007],15);
// transform geojson coordinates into an array of L.LatLng
var coordinates = france.features[0].geometry.coordinates[0];
var latLngs = [];
for (i=0; i<coordinates.length; i++) {
latLngs.push(new L.LatLng(coordinates[i][1], coordinates[i][0]));
}
L.mask(latLngs).addTo(map);
var layerpoly = new L.geoJson(france.features,myStyle).addTo(map);
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.001,
};
</script>
Now I have a little code below and that codes purpose is to generate a border of an another map.
LAT/LONG of the 2nd Map: 14.7180247,121.0502252
Here is the code for the border of the 2nd Map
CODE
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.04564666748045,
14.730808905988164
],
[
121.04556083679198,
14.729376986829836
],
[
121.04515314102171,
14.729376986829836
],
[
121.04483127593993,
14.729127956450599
],
[
121.0447883605957,
14.727218714090242
],
[
121.04315757751465,
14.726803659190255
],
[
121.04324340820312,
14.726222581002583
],
[
121.04485273361206,
14.726720648115412
],
[
121.04867219924928,
14.727197961364011
],
[
121.04860782623291,
14.720868287675927
],
[
121.04712724685668,
14.720951300978989
],
[
121.04708433151245,
14.719457056689269
],
[
121.04712724685668,
14.718917465957539
],
[
121.04755640029907,
14.718232598875604
],
[
121.04815721511841,
14.718792944829868
],
[
121.04913353919983,
14.717682628298446
],
[
121.05102181434631,
14.719311782392825
],
[
121.05281352996825,
14.717039264731355
],
[
121.05459451675416,
14.718481641699666
],
[
121.05769515037538,
14.714445037548428
],
[
121.05461597442627,
14.711944173342486
],
[
121.05950832366945,
14.706081039093599
],
[
121.05897188186644,
14.7055621700703
],
[
121.05849981307982,
14.70578009521028
],
[
121.0579526424408,
14.705302735096184
],
[
121.0577917098999,
14.705167828787806
],
[
121.05709433555603,
14.70540650912283
],
[
121.05606436729431,
14.70654802016014
],
[
121.05544209480286,
14.70749235659759
],
[
121.0555064678192,
14.707824429978333
],
[
121.054927110672,
14.708540461486441
],
[
121.05369329452513,
14.708696120199113
],
[
121.05327486991882,
14.70891404221037
],
[
121.05248093605042,
14.709080077882422
],
[
121.05218052864075,
14.709557429735995
],
[
121.05213761329652,
14.709692333331473
],
[
121.05172991752623,
14.709412148847598
],
[
121.05132222175597,
14.709723464918598
],
[
121.05082869529724,
14.710532884624905
],
[
121.0497236251831,
14.710325341396656
],
[
121.04926228523253,
14.710460244517469
],
[
121.04888677597046,
14.710180061019438
],
[
121.04822158813475,
14.709671578937602
],
[
121.04772806167603,
14.710014026184215
],
[
121.04685902595521,
14.709982894638525
],
[
121.04612946510314,
14.710045157725437
],
[
121.04605436325075,
14.710211192536972
],
[
121.04620456695555,
14.710615901860939
],
[
121.04678392410278,
14.710916839076834
],
[
121.04711651802063,
14.71135267844687
],
[
121.04681611061095,
14.711985681695994
],
[
121.04615092277527,
14.71256679781626
],
[
121.04567885398863,
14.712857355296048
],
[
121.04526042938232,
14.712940371647761
],
[
121.04483127593993,
14.712784715962366
],
[
121.04371547698976,
14.712037567126806
],
[
121.04352235794067,
14.712016812955968
],
[
121.04323267936708,
14.712317748239931
],
[
121.04296445846558,
14.712763961862594
],
[
121.0429000854492,
14.713013010929627
],
[
121.04325413703918,
14.713625255344366
],
[
121.04298591613768,
14.714465791488294
],
[
121.04295372962952,
14.714943131560467
],
[
121.04322195053099,
14.715347832107897
],
[
121.04357600212097,
14.715596878225487
],
[
121.04401588439941,
14.715783662627086
],
[
121.0443377494812,
14.715939316172935
],
[
121.04429483413696,
14.716115723390619
],
[
121.04398369789122,
14.71654117550522
],
[
121.04397296905518,
14.716873235115676
],
[
121.04389786720276,
14.71720529422065
],
[
121.04364037513733,
14.718253352455127
],
[
121.04346871376036,
14.71875143777152
],
[
121.04325413703918,
14.718803321593224
],
[
121.04286789894103,
14.718595786232333
],
[
121.04257822036742,
14.718377873890866
],
[
121.04224562644958,
14.718346743538586
],
[
121.04183793067932,
14.718429757801436
],
[
121.04144096374512,
14.718917465957539
],
[
121.04116201400757,
14.719073117267152
],
[
121.04107618331909,
14.719560823984638
],
[
121.04078650474548,
14.720214556810097
],
[
121.04055047035217,
14.721283353875215
],
[
121.04040026664732,
14.721771055649866
],
[
121.04033589363098,
14.721905951692825
],
[
121.04169845581053,
14.722227626535446
],
[
121.04141950607301,
14.723846370153696
],
[
121.04120492935179,
14.725734889185244
],
[
121.04133367538451,
14.726471614701252
],
[
121.04179501533508,
14.72843274513597
],
[
121.04243874549866,
14.728961936039699
],
[
121.04518532752991,
14.730757025023513
],
[
121.04564666748045,
14.730808905988164
]
]
]
}
}
]
}
The output of 2nd code above must be the picture in the link above
The 1st Code and the 2nd Code above has the same output but diff area and border shape. Now my question is if i press button area 1 the map will go to area 1 with border and if i press button area 2 it will go to area 2 with border.
Simple Question: change map area and border during button click

Depending on how memory concious you want to be, I see two options:
Draw both polygons on the map, and then map.setView() to either area based on the button clicked.
or, draw one polygon, call map.setView() to the relevant area and remove the other area poly using map.removeLayer()
Some sample jquery:
$('#buttonArea1,#buttonArea2').click(function(){
// Add/remove the relevant poly, based on the button pressed
if(this.id == 'buttonArea1')
{
var polygon = L.polygon(poly[1]).addTo(map);
map.removeLayer(poly[2]);
}else{
var polygon = L.polygon(poly[2]).addTo(map);
map.removeLayer(poly[1]);
}
// Move the map view to the specified area
map.setView(mapView[this.id]);
});
Of course, mapView and poly are both arrays holding the coords and polygon, respectively.