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 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>
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.
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);