Related
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.
I'm using react-leaflet and my map is displaying fine so far. I've also successfully used <GeoJson> to overlay a polygon.
I've currently got hard-coded my center and zoom values, but I'd like my default zoom to be set so that the entire GeoJSON polygon is visible. I'm struggling with the documentation/answers I've found on the web (I'm only beginner/intermediate JS).
Here's my component:
import React from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup, GeoJson } from 'react-leaflet';
import axios from 'axios';
const styles = StyleSheet.create({
map: {
height: 240,
width: '100%'
}
});
const geodatas = { "type": "Polygon", "coordinates": [ [ [ 0.901409326032148, 51.87846074983652 ], [ 0.900728205963941, 51.87844428860128 ], [ 0.899345524616457, 51.8784325381963 ], [ 0.898758899468915, 51.878417331772674 ], [ 0.898382518544509, 51.87839424237513 ], [ 0.897325195329164, 51.878223304667991 ], [ 0.89594922021314, 51.877976588301692 ], [ 0.894955640203439, 51.877846407999037 ], [ 0.894280316390969, 51.877785709788448 ], [ 0.893320356777677, 51.877703150758911 ], [ 0.892628493048771, 51.877632959777358 ], [ 0.892139172447305, 51.877548791413972 ], [ 0.891852225577892, 51.877468544876464 ], [ 0.891748332612011, 51.877548514557468 ], [ 0.891456640213901, 51.877849701135801 ], [ 0.891291905863462, 51.878157745192553 ], [ 0.891212527716225, 51.878460992695949 ], [ 0.891079390830871, 51.879306113637384 ], [ 0.891068489722895, 51.879386403461886 ], [ 0.890532814748409, 51.879394179295069 ], [ 0.890012032842571, 51.879477202674821 ], [ 0.889375209183071, 51.879561187317655 ], [ 0.888523881288328, 51.879678311227721 ], [ 0.887732863790842, 51.87978495647382 ], [ 0.887717924807106, 51.879755652410928 ], [ 0.8877112616848, 51.879741430134168 ], [ 0.887496874906409, 51.879752090096723 ], [ 0.887360497828209, 51.879779715499488 ], [ 0.887280191227346, 51.879796073522684 ], [ 0.88718833818694, 51.879813614145419 ], [ 0.88706385375741, 51.879821166518113 ], [ 0.886767033455902, 51.879837445743426 ], [ 0.886758489556766, 51.879954631053209 ], [ 0.886578395546395, 51.879956355274935 ], [ 0.886452014758515, 51.879956760590304 ], [ 0.886200176414292, 51.879994412073138 ], [ 0.886030078804612, 51.880039946947051 ], [ 0.885567071719315, 51.880138525670596 ], [ 0.885346650339984, 51.880169110424305 ], [ 0.885139730722157, 51.880182280172704 ], [ 0.884856862688072, 51.88016764209975 ], [ 0.884439622271071, 51.880097857131176 ], [ 0.883460215670161, 51.879938459949649 ], [ 0.882545487519237, 51.879816041218362 ], [ 0.88202611994388, 51.879760440037977 ], [ 0.881353079538259, 51.879758054179931 ], [ 0.880867549737238, 51.879731289583212 ], [ 0.880629373069327, 51.879688482840614 ], [ 0.879914179646963, 51.879502802111887 ], [ 0.87909138760359, 51.879339442609194 ], [ 0.878624991225511, 51.879272639047592 ], [ 0.878295085017608, 51.879226768603523 ], [ 0.877982758160618, 51.879114741366571 ], [ 0.877645624873188, 51.878978235040002 ], [ 0.877294418532155, 51.8788708439507 ], [ 0.876897013638247, 51.878814842967316 ], [ 0.876417345581585, 51.878813991095299 ], [ 0.876164532039012, 51.87881388193393 ], [ 0.875555156171977, 51.878806309116875 ], [ 0.875145809085678, 51.87876776746041 ], [ 0.874727443401668, 51.878724949298828 ], [ 0.874688370094159, 51.879227792320627 ], [ 0.874678085840498, 51.879635434120594 ], [ 0.874646030296739, 51.879634419620402 ], [ 0.874509194844878, 51.879630572109889 ], [ 0.874491729010884, 51.87963099911331 ], [ 0.874461033018298, 51.879763919892177 ], [ 0.874266864459982, 51.879772263150876 ], [ 0.874273115896171, 51.879825158282216 ], [ 0.874509916131233, 51.879778908931314 ], [ 0.874571095956836, 51.879802588494051 ], [ 0.875011735049452, 51.880879207933553 ], [ 0.875063877959868, 51.881012800603493 ], [ 0.875154852104679, 51.881208471872306 ], [ 0.875175413531478, 51.881256521442964 ], [ 0.87529051738762, 51.881443510495714 ], [ 0.875489363187087, 51.881780402402256 ], [ 0.875722161078739, 51.882104775064533 ], [ 0.876014940309792, 51.882456451913107 ], [ 0.876082550654661, 51.88253571873868 ], [ 0.876168143697128, 51.882579480046651 ], [ 0.876482554975814, 51.882723829494935 ], [ 0.876539940045734, 51.88280244710019 ], [ 0.876593128121568, 51.882884763830063 ], [ 0.876828235972976, 51.883290088395555 ], [ 0.877005895766627, 51.883703921217418 ], [ 0.877029497141308, 51.883778869632195 ], [ 0.877124155114336, 51.884054470794702 ], [ 0.877175392208823, 51.88415122089723 ], [ 0.877258066409254, 51.884194243657916 ], [ 0.877339931934844, 51.884224608588156 ], [ 0.877423526548593, 51.884235150553707 ], [ 0.877430762369245, 51.884235872597479 ], [ 0.877656259525027, 51.884261823162831 ], [ 0.877765412001952, 51.884310401458563 ], [ 0.877891165133687, 51.884457476321913 ], [ 0.877997316320446, 51.884822797224388 ], [ 0.878229652774874, 51.885819896448112 ], [ 0.87834363069242, 51.886056361674164 ], [ 0.878505517980494, 51.886361785147784 ], [ 0.878571706765954, 51.886351173607551 ], [ 0.880334009665515, 51.886091239694117 ], [ 0.880424791914881, 51.886077327296213 ], [ 0.88043783327319, 51.88607700782093 ], [ 0.880704881703364, 51.886025509676543 ], [ 0.88090326748098, 51.88597029854111 ], [ 0.880981920754037, 51.885926022943693 ], [ 0.881055688461447, 51.885876562201595 ], [ 0.881139171026242, 51.8858178721824 ], [ 0.881241958942011, 51.88574252491086 ], [ 0.881337559220615, 51.885715906077138 ], [ 0.881385937856071, 51.885676058458287 ], [ 0.881404549670886, 51.885672905013088 ], [ 0.881631036319648, 51.885667354634286 ], [ 0.882076471813645, 51.885656437325643 ], [ 0.882056078006435, 51.885745949945587 ], [ 0.881993450315757, 51.88585897570433 ], [ 0.881874182519518, 51.885948304245524 ], [ 0.881879755943845, 51.886035382145558 ], [ 0.882347992750353, 51.887241671205189 ], [ 0.882404707654513, 51.88749113499459 ], [ 0.882853957884807, 51.887494597204501 ], [ 0.884028759735186, 51.887500853841111 ], [ 0.885202413300444, 51.887511622501421 ], [ 0.886590316907309, 51.88753330410465 ], [ 0.887555928029772, 51.88756264315473 ], [ 0.888202481793116, 51.88758182931528 ], [ 0.888956015183013, 51.887592988828722 ], [ 0.889658183982424, 51.88759551550784 ], [ 0.890322869160589, 51.887490165863746 ], [ 0.892203940736874, 51.887131827383271 ], [ 0.892629205597487, 51.887054831392291 ], [ 0.893388163095852, 51.886969623054483 ], [ 0.89404980532498, 51.886929063714575 ], [ 0.895280219891035, 51.886805174667664 ], [ 0.895323478152911, 51.886801412129813 ], [ 0.896179817068388, 51.886713787718342 ], [ 0.897415056318077, 51.886622215638788 ], [ 0.898647041286751, 51.886591851018451 ], [ 0.899686268373963, 51.886569823711085 ], [ 0.900351520883763, 51.886540828313116 ], [ 0.900884573173965, 51.886511494268028 ], [ 0.901340110935552, 51.886476877525794 ], [ 0.901562391659487, 51.886452510943201 ], [ 0.901902151973541, 51.886402766551157 ], [ 0.902463248379137, 51.886291722255116 ], [ 0.902757098309845, 51.886226924440386 ], [ 0.903150888634868, 51.886113803082765 ], [ 0.903243962294006, 51.886226592689667 ], [ 0.903355623961783, 51.886291269748519 ], [ 0.903443835883261, 51.886328652951633 ], [ 0.903640578390754, 51.886359849425965 ], [ 0.903777366271163, 51.886451778405799 ], [ 0.903921275467924, 51.886542632232221 ], [ 0.904619569200365, 51.886529879935892 ], [ 0.904647145263885, 51.886530097842467 ], [ 0.904644680496465, 51.886423163114955 ], [ 0.904806010678643, 51.886423673231825 ], [ 0.904807446404658, 51.886423637762697 ], [ 0.906076204161999, 51.886422856835182 ], [ 0.907022198544648, 51.886441731102899 ], [ 0.90730666281605, 51.88645807500005 ], [ 0.907404335168953, 51.886463752026572 ], [ 0.90810606059014, 51.886526420497582 ], [ 0.908497633992893, 51.886559083872683 ], [ 0.909250409977232, 51.886669934534716 ], [ 0.909920399282772, 51.886781031005334 ], [ 0.910794842211242, 51.886931209477844 ], [ 0.911857500375587, 51.887069437663193 ], [ 0.914187992691951, 51.887236571851361 ], [ 0.915564259859456, 51.887368881794721 ], [ 0.916237185524361, 51.887458290661186 ], [ 0.917096872133215, 51.88757992659508 ], [ 0.91728495272614, 51.887612214370037 ], [ 0.917386434020573, 51.887630376379299 ], [ 0.917533327200215, 51.887543023084007 ], [ 0.917674599005015, 51.887457697250859 ], [ 0.917830466960201, 51.887372009032987 ], [ 0.917964904772121, 51.887294045428717 ], [ 0.91799293120233, 51.887277165650318 ], [ 0.918270843270076, 51.887147897468367 ], [ 0.918324311895519, 51.887120495771434 ], [ 0.918260947025518, 51.887063625303497 ], [ 0.918242493122197, 51.887046999930959 ], [ 0.918219263299262, 51.887025098336316 ], [ 0.918193394778538, 51.887006858727382 ], [ 0.918167681980051, 51.886968834490808 ], [ 0.918121993594273, 51.886892553702928 ], [ 0.918118598509993, 51.8868845458341 ], [ 0.918111416611052, 51.886886522324808 ], [ 0.918092090118659, 51.886856431705347 ], [ 0.918088866304774, 51.886852915211819 ], [ 0.918070859203, 51.886820993594071 ], [ 0.918054695110634, 51.886795320112185 ], [ 0.918012659454562, 51.886753205307109 ], [ 0.918019724977938, 51.886749433459734 ], [ 0.918029545579465, 51.88674379498778 ], [ 0.918070768510037, 51.88670680692686 ], [ 0.918078917373575, 51.886699411688461 ], [ 0.918082936905406, 51.886693018055482 ], [ 0.918085575617747, 51.886689356067215 ], [ 0.918085284714103, 51.886684867660044 ], [ 0.918084993810534, 51.886680379252859 ], [ 0.918074688990573, 51.886656358610303 ], [ 0.918026444493577, 51.886538781457205 ], [ 0.917967819210123, 51.886442231699029 ], [ 0.917917539541698, 51.8863616590615 ], [ 0.917856018831887, 51.886242613057391 ], [ 0.917875485331733, 51.886228643096942 ], [ 0.917905644965449, 51.886222499897784 ], [ 0.918266441324591, 51.886138918296524 ], [ 0.91843543741289, 51.886100557024506 ], [ 0.918588288139598, 51.886058999768181 ], [ 0.918621765414349, 51.886037488897976 ], [ 0.918650101834482, 51.885981039731959 ], [ 0.918654816251417, 51.885987216586045 ], [ 0.918698403834106, 51.886031090891748 ], [ 0.918908038135575, 51.886013299171736 ], [ 0.919197702484083, 51.885998914921643 ], [ 0.919223496487564, 51.885991980642089 ], [ 0.919256527153531, 51.88598576581176 ], [ 0.919292603806707, 51.885982172722741 ], [ 0.919311329258946, 51.885980808676692 ], [ 0.919346148055345, 51.885978145927318 ], [ 0.919367457097976, 51.885970423845514 ], [ 0.919365436126073, 51.885963281018427 ], [ 0.91935093750544, 51.885872739394792 ], [ 0.919346665993608, 51.885853064685733 ], [ 0.919340263582773, 51.885820855124173 ], [ 0.919328542022821, 51.885752812601339 ], [ 0.919289882788854, 51.885559471383921 ], [ 0.919280004480731, 51.88549767697058 ], [ 0.919249774710786, 51.885343777893503 ], [ 0.919220816514632, 51.885211336342415 ], [ 0.919208881861081, 51.885162180736742 ], [ 0.919188799077709, 51.885053885128599 ], [ 0.919179322619601, 51.884998284695968 ], [ 0.919168652382673, 51.884944602064856 ], [ 0.919127319807822, 51.884778390844936 ], [ 0.919103755432662, 51.884706955902153 ], [ 0.919031022166563, 51.88470516511407 ], [ 0.918878337657739, 51.884727028021807 ], [ 0.918790953612087, 51.884722903411216 ], [ 0.918757889943345, 51.884414335024665 ], [ 0.918735830940248, 51.883872529953408 ], [ 0.918749725312522, 51.883661699688126 ], [ 0.91876948654494, 51.883517348999135 ], [ 0.918807074323049, 51.883335601694213 ], [ 0.91889079846776, 51.882878475620764 ], [ 0.918958313313544, 51.882417166316976 ], [ 0.918982419246705, 51.882251128670951 ], [ 0.91903609340834, 51.881868386851345 ], [ 0.919083135265649, 51.88171976225923 ], [ 0.919132074133214, 51.881646617138863 ], [ 0.919460445307968, 51.881375829199726 ], [ 0.919682376169793, 51.881189504020099 ], [ 0.919622144819442, 51.881156832903159 ], [ 0.919532145528479, 51.881114111420317 ], [ 0.919467662737287, 51.881084243173227 ], [ 0.9193478408487, 51.88102877517116 ], [ 0.919311923435926, 51.881012583586418 ], [ 0.919145777688999, 51.880937495751546 ], [ 0.918979576869284, 51.880863398092266 ], [ 0.918770168817696, 51.880769692921554 ], [ 0.91874166217972, 51.880756913698789 ], [ 0.918749929520663, 51.880749515455761 ], [ 0.918664590785148, 51.8807102741292 ], [ 0.91853467017157, 51.88081510045231 ], [ 0.918421577960399, 51.880907820274757 ], [ 0.91828483339089, 51.881018300359699 ], [ 0.918189474725769, 51.881094395519042 ], [ 0.91809830931614, 51.881166790020707 ], [ 0.917993479597975, 51.881253909586817 ], [ 0.917904394743247, 51.881336232592744 ], [ 0.917810644813509, 51.881414984882035 ], [ 0.917765061520439, 51.881451182002245 ], [ 0.917727277189953, 51.881474597804313 ], [ 0.917687827925033, 51.881492660154741 ], [ 0.917648938456006, 51.881499019964004 ], [ 0.917592528229499, 51.881503117155624 ], [ 0.917556338675728, 51.881504914307293 ], [ 0.917505499482299, 51.881504377586126 ], [ 0.917451553238886, 51.881502119688008 ], [ 0.917286552659126, 51.881490928668363 ], [ 0.917022454180388, 51.881474103927459 ], [ 0.916854640826272, 51.881463881213051 ], [ 0.916681143470547, 51.881454698387849 ], [ 0.916542458322954, 51.881444651770153 ], [ 0.916450828929447, 51.881443328165275 ], [ 0.916365058019841, 51.88144365742528 ], [ 0.91613912610168, 51.88145555515014 ], [ 0.915933298553328, 51.881463357339797 ], [ 0.915652217169243, 51.881476621848734 ], [ 0.915484247081051, 51.881486181825672 ], [ 0.915303179167124, 51.881495167199617 ], [ 0.915032382081902, 51.881509973470926 ], [ 0.914778873006563, 51.881523451410523 ], [ 0.914515256753215, 51.881536280217745 ], [ 0.914315286865372, 51.881545732613532 ], [ 0.914202349364867, 51.881552128410966 ], [ 0.91416305610943, 51.881550404942168 ], [ 0.914133753676999, 51.881547534711132 ], [ 0.914092037330798, 51.881530586147313 ], [ 0.914064635192414, 51.881534861802102 ], [ 0.914058939568137, 51.881604235603618 ], [ 0.913871780046409, 51.881607974990075 ], [ 0.913900532364438, 51.88133383846192 ], [ 0.913917565262247, 51.88074341037305 ], [ 0.913915618714501, 51.880511484301309 ], [ 0.913833603674322, 51.880456872005311 ], [ 0.913786842581242, 51.880386010937187 ], [ 0.913649135214015, 51.880053959957102 ], [ 0.913403240720076, 51.879533075995766 ], [ 0.913283588243218, 51.879300380117705 ], [ 0.913185285838128, 51.879038383111109 ], [ 0.913038300145875, 51.878653512941725 ], [ 0.912870983102134, 51.878111709462075 ], [ 0.912874541304731, 51.877694337226671 ], [ 0.912882068522283, 51.877542108633129 ], [ 0.912867085588723, 51.877466054180474 ], [ 0.912805599364724, 51.877437906363596 ], [ 0.912671047036016, 51.877400779144196 ], [ 0.912582803327189, 51.877384982718738 ], [ 0.912494153328336, 51.877362902414752 ], [ 0.912106774318374, 51.87730497366146 ], [ 0.911659053816844, 51.877279198182528 ], [ 0.910845194815755, 51.87725529345915 ], [ 0.909926648245021, 51.877274434814687 ], [ 0.909670899249886, 51.877252891518367 ], [ 0.909314163264232, 51.877218561517246 ], [ 0.908384292245072, 51.8771309752075 ], [ 0.908277728226409, 51.877122731840934 ], [ 0.908232519705985, 51.877120253622557 ], [ 0.908188745426027, 51.877208641402873 ], [ 0.908007083445798, 51.877545900731107 ], [ 0.907888040374143, 51.87770439359209 ], [ 0.907726401053779, 51.877900893805283 ], [ 0.907586018157088, 51.878023949121449 ], [ 0.907354930378132, 51.878224863611997 ], [ 0.90713896490615, 51.878368668968015 ], [ 0.907122137459287, 51.878378975413113 ], [ 0.907045194451947, 51.878425024888081 ], [ 0.906476964377067, 51.878739470610434 ], [ 0.906305963132985, 51.878857886479572 ], [ 0.905803484441867, 51.879157216640536 ], [ 0.90439353651545, 51.880006840402224 ], [ 0.904392100993312, 51.880006875863238 ], [ 0.904344316112181, 51.880033231718144 ], [ 0.904336166117978, 51.8800406260278 ], [ 0.904185133823075, 51.880132560746368 ], [ 0.904031996055894, 51.880282900377274 ], [ 0.904003347248133, 51.880310581683851 ], [ 0.903871370881516, 51.880270683389554 ], [ 0.903593978168444, 51.880183126162159 ], [ 0.903353643783826, 51.880107240915706 ], [ 0.903161900201356, 51.880017477750883 ], [ 0.90296870540926, 51.879882883859892 ], [ 0.902777974766133, 51.879630353765876 ], [ 0.902671125181507, 51.879506215333478 ], [ 0.902619161218453, 51.879443570543998 ], [ 0.902557150743474, 51.879383061909991 ], [ 0.902488132571657, 51.879327221855746 ], [ 0.902407746268306, 51.879273460640192 ], [ 0.902255699001237, 51.879169319160937 ], [ 0.90213067173243, 51.879123762764571 ], [ 0.902039998502742, 51.879070255219737 ], [ 0.901914565974001, 51.878994228325332 ], [ 0.901692967582603, 51.87880359876965 ], [ 0.901515661277313, 51.878601176198579 ], [ 0.901441918235169, 51.878516590297131 ], [ 0.901409326032148, 51.87846074983652 ] ] ] }
class MapHolder extends React.Component {
constructor() {
super();
this.state = {
geodatas: geodatas,
lat: 51.881403,
lng: 0.918583,
zoom: 17,
};
}
render() {
const accessToken = 'pk.eyJ1IjoiZ2F6YXN0b24iLCJhIjoiY2loa21hNzRoMG50eHQ0bHp2azNpeHhwaiJ9.h81FekBCVUufbqxc9ywySQ'
const position = [this.state.lat, this.state.lng];
console.log(this.refs.geojson);
console.log(this.refs.foo.leafletElement);
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.getBounds());
return (
<div>
<Map ref="foo" style={{height: "260px"}} center={position} zoom={this.state.zoom} scrollWheelZoom={false} >
<TileLayer
attribution='© OpenStreetMap contributors'
url={`https://api.mapbox.com/styles/v1/gazaston/cihkojpjh00whrom498ghjoc5/tiles/256/{z}/{x}/{y}?access_token=${accessToken}`}
id='gazaston.o9phia6g'
detectRetina={true}
/>
<GeoJson ref="geojson" data={this.state.geodatas} />
</Map>
</div>
);
}
export default MapHolder;
UPDATE:
When I use the React dev tools, select my <MapHolder> component, switch to the console, and run
$r.refs.foo.leafletElement.fitBounds($r.refs.geojson.leafletElement.getBounds());
everything works as expected. However, in my code
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());
returns Uncaught TypeError: Cannot read property 'leafletElement' of undefined
I'm so close! What am I missing?
Because of the way that react-leaflet handles its lifecycle in which it turns over control to leaflet immediately after it mounts the Map component, it can be tricky to access subcomponent refs.
I solved this issue two ways.
My first attempt involved storing the number of features that was adding within my outer component state, attaching an map-object event handler for layeradd as recommended above, and then accessing the Geojson ref once all the polygons had been added.
```
componentDidMount() {
let count = 0;
const map = this.refs.map.leafletElement;
map.on('layeradd', () => {
count += 1;
if (count > this.state.polygonCount) {
setTimeout(()=>{DO STUFF}, 200)
}
});
}
```
While this works, it smells.
The second way I solved this was to use turf-bbox to pre-compute the bounds of the geojson, which I then passed in to the Map object in my render method.
```
const bboxArray = bbox(geojson);
const corner1 = [bboxArray[1], bboxArray[0]];
const corner2 = [bboxArray[3], bboxArray[2]];
this.state.bounds = [corner1, corner2];
```
and then
```
<Map bounds={this.state.bounds} ref="map">
```
The second way is much cleaner if you don't need to do anything more with the GeoJSON leafletElement, but the first way will let you set up any number of event handlers, etc.
Based on #IvanSanchez reply and how react-leaflet works I would suggest first add a ref to your GeoJson layer
<GeoJson ref="geojson" data={this.state.geodatas} />
then access the map with its ref
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds())
Seems like you're 99% of the way there! For benefit of future readers, you can escape the lingering uncaught type error:
Uncaught TypeError: Cannot read property 'leafletElement' of undefined
...by wrapping the fitBounds method call in a check to ensure this.refs.foo, this.refs.geojson and friends exist:
if (this.refs.foo && this.refs.foo.leafletElement && this.refs.geojson && this.refs.geojson.leafletElement) {
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());
}
The reason the current implementation throws an error is that the map and GeoJSON refs aren't set until the render method is called once. That means this.refs.foo and this.refs.geojson aren't set the very first time the render method is called.
You could also consider moving the entire fitBounds operation out of the render method and into componentWillReceiveProps; this would be especially worthwhile if geodata was likely to update dynamically via props sent in to the map component.
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 ] ] ] } }
]
}
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>
Good Morning to all
I just want to share my little problem with this,There is an annoying border shaped triangle in the middle of the map you can take a look in it if you want.
http://i57.tinypic.com/11lju3n.jpg
Here is my code
</script>
<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);
};
var sanbartolome = {
"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 santamonoica = {
"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
]
]
]
}
}
]
};
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.7053533,121.031448],15);
var coordinates = sanbartolome.features[0].geometry.coordinates[0];
var coordinates1 = santamonoica.features[0].geometry.coordinates[0];
var coordinates2 = sanagustin.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]));
}
for (i=0; i<coordinates1.length; i++) {
latLngs.push(new L.LatLng(coordinates1[i][1], coordinates1[i][0]));
}
for (i=0; i<coordinates2.length; i++) {
latLngs.push(new L.LatLng(coordinates1[i][1], coordinates1[i][0]));
}
L.mask(latLngs).addTo(map);
var options = {
style: function (feature) {
return {
"color": "yellow",
"weight": 5,
"opacity": 0.001,
"fillColor": "red",
"fillOpacity": 0.5
};
}
};
var options1 = {
style: function (feature) {
return {
"color": "yellow",
"weight": 5,
"opacity": 0.001,
"fillColor": "blue",
"fillOpacity": 0.5
};
}
};
var options2 = {
style: function (feature) {
return {
"color": "yellow",
"weight": 5,
"opacity": 0.001,
"fillColor": "green",
"fillOpacity": 0.5
};
}
};
var layerpoly = new L.geoJson(sanbartolome.features,options).addTo(map);
var layerpoly1 = new L.geoJson(santamonoica.features,options1).addTo(map);
var layerpoly2 = new L.geoJson(sanagustin.features,options2).addTo(map);
My question here is that how can i remove the unwanted part on the middle? any help? ty
Remove L.mask(latLngs).addTo(map);