I have a draggable drilldown map(continent + countries). When the user click on the top-level continent map, it will drilldown to the country map.
The problem: The map is draggable. However, there is a odd behavior that if you drag one of the map and the drag position is effecting the other map.
For example, this is how the odd behavior gets produced:
1: you drag the continent map
2: you double click on the one of the continent and make map load the countries
3: when you drag the country map , the map will first jump to the dragged position of the previous continent map.
What I have tried:
Before loading a new map. I created a ResetMap function that resets all map related attributes. In that function, I have tried multiple things to reset the drag position like following:
svg.attr("transform", null);: This only makes it so that when it loads, it is loading correctly on the screen. But when you start to drag the new map, the previous drag position is still effecting the second map.
svg.translate([0, 0]);: this does not work at all
zoom.translate([0, 0]);: I also tried to take out the zoom function and reset it like this, this did not work as well
svg.call(zoom.transform, d3.zoomIdentity);: this does not work either
What I need help with: Understand Why is the previous drag position affecting the new map despite setting svg's transformation to null and how to fix that?
The production code is big, so I created this jsfiddle to reproduce the behavior (snippet below). When you drag the first map far off the screen and click the button to load the second map. It loads fine, but when you drag the second map, the drag position of the first map is effecting it.
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 ] ] ] } }
]
}
}
function newMap(){
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 ] ] ] } }
]
}
}
let cleanHover = function () {
d3.selectAll("path")
.transition()
.duration(200)
.style("stroke", "transparent")
}
let mouseOver = function (event, d) {
var countryCode = event.target.id;
cleanHover();
d3.selectAll("path#" + countryCode)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "black")
tip.show(event, d);
}
let mouseLeave = function () {
cleanHover();
tip.hide();
}
let resetMap = function(){
svg.selectAll("*").remove();
svg.call(zoom.transform, d3.zoomIdentity);
}
let loadSmallMap = function(){
resetMap();
const mapJson = newMap();
var projection = d3.geoMercator();
var features = mapJson.features;
//Projections
var geoPath = d3.geoPath().projection(projection);
projection.fitSize([width, height], { "type": "FeatureCollection", "features": features })
svg.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("id", function (d) { return d.properties.id })
.style("fill", 'steelblue')
.style("stroke", "transparent")
.on("mouseover", mouseOver)
.on("mouseleave", mouseLeave)
.call(tip);
}
var zoom = d3.zoom()
.on('zoom', (event) => {
svg.attr('transform', event.transform);
})
.scaleExtent([1, 1]);
var width = 560;
var height = 350;
var svg = d3.select("#mapDiv")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "white")
.style("border", "solid 1px black")
.call(zoom)
.append("g");
const tip = d3.tip()
.attr("class", "d3-tip")
.html((event, d) => "red");
const mapJson = roi();
var projection = d3.geoMercator();
var features = mapJson.features;
//Projections
var geoPath = d3.geoPath().projection(projection);
projection.fitSize([width, height], { "type": "FeatureCollection", "features": features })
svg.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("id", function (d) { return d.properties.id })
.style("fill", 'steelblue')
.style("stroke", "transparent")
.on("mouseover", mouseOver)
.on("mouseleave", mouseLeave)
.call(tip);
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6#4/d3-tip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6#4/d3-tip.min.css">
<center id="mapDiv">
<input id="button" type="button" value="Load Small Map" onclick="loadSmallMap()"/>
</center>
svg.attr("transform", null);: This only makes it so that when it
loads, it is loading correctly on the screen. But when you start to
drag the new map, the previous drag position is still effecting the
second map.
Re-iterating the comments, when you modify a SVG transform attribute manually, as you have, the zoom behavior is left in the dark. It picks up on the next zoom event based on what it thinks the zoom state is, not to what you've set it. Not all zooms will modify a transform attribute so there is no reason for it to check the zoom transform as a relative starting point for the zoom - the zoom behavior just tracks the zoom state and lets you do with it what you want.
You've updated the snippet to implement a selection.call(zoom.transform, zoomTransform) approach. This will trigger a zoom with the specified transform - but a problem remains. The issue is that you are calling that on a different selection than you call the zoom behavior on originally. The zoom behavior is called on the svg but the transform is called on the g (labelled as variable svg , but actually is a g). Now I know I just said the zoom behavior tracks the zoom state - but it doesn't do so internally. It tracks it as a property of the element it is called on (you could call the same behavior on many elements and have different zoom states for each). So we still have a communication problem: the zoom transform is being called on a different element than the zoom behavior - the zoom behavior doesn't know that it's frame of reference has been changed.
The easiest solution would then be to modify the reset function to select the SVG element directly and apply the zoom transform to it instead of the g:
let resetMap = function(){
svg.selectAll("*").remove();
d3.select("svg").call(zoom.transform, d3.zoomIdentity);
}
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 ] ] ] } }
]
}
}
function newMap(){
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 ] ] ] } }
]
}
}
let cleanHover = function () {
d3.selectAll("path")
.transition()
.duration(200)
.style("stroke", "transparent")
}
let mouseOver = function (event, d) {
var countryCode = event.target.id;
cleanHover();
d3.selectAll("path#" + countryCode)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "black")
tip.show(event, d);
}
let mouseLeave = function () {
cleanHover();
tip.hide();
}
let resetMap = function(){
svg.selectAll("*").remove();
d3.select("svg").call(zoom.transform, d3.zoomIdentity);
}
let loadSmallMap = function(){
resetMap();
const mapJson = newMap();
var projection = d3.geoMercator();
var features = mapJson.features;
//Projections
var geoPath = d3.geoPath().projection(projection);
projection.fitSize([width, height], { "type": "FeatureCollection", "features": features })
svg.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("id", function (d) { return d.properties.id })
.style("fill", 'steelblue')
.style("stroke", "transparent")
.on("mouseover", mouseOver)
.on("mouseleave", mouseLeave)
.call(tip);
}
var zoom = d3.zoom()
.on('zoom', (event) => {
svg.attr('transform', event.transform);
})
.scaleExtent([1, 1]);
var width = 560;
var height = 350;
var svg = d3.select("#mapDiv")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "white")
.style("border", "solid 1px black")
.call(zoom)
.append("g")
;
const tip = d3.tip()
.attr("class", "d3-tip")
.html((event, d) => "red");
const mapJson = roi();
var projection = d3.geoMercator();
var features = mapJson.features;
//Projections
var geoPath = d3.geoPath().projection(projection);
projection.fitSize([width, height], { "type": "FeatureCollection", "features": features })
svg.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("id", function (d) { return d.properties.id })
.style("fill", 'steelblue')
.style("stroke", "transparent")
.on("mouseover", mouseOver)
.on("mouseleave", mouseLeave)
.call(tip);
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6#4/d3-tip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6#4/d3-tip.min.css">
<center id="mapDiv">
<input id="button" type="button" value="Load Small Map" onclick="loadSmallMap()"/>
</center>
Related
From this gist https://gist.github.com/mbertrand/5218300 I got some sample-code for drawing some features, which I adopted to use my GeoJSON
var features = [
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3921498, 52.476596, 31.64 ], [ 13.393036, 52.4765996, 31.6 ], [ 13.3934, 52.4765511, 31.87 ], [ 13.3935847, 52.4765058, 32.37 ], [ 13.3936657, 52.4764735, 32.16 ], [ 13.3936851, 52.4764164, 32.04 ], [ 13.3936229, 52.4761477, 32.05 ], [ 13.3934819, 52.4758929, 32.77 ], [ 13.3932546, 52.4756262, 32.56 ], [ 13.3930283, 52.4754013, 32.51 ], [ 13.3927091, 52.4751468, 32.64 ], [ 13.3923208, 52.4749337, 32.63 ], [ 13.3919094, 52.4747933, 33.13 ], [ 13.3917874, 52.4747948, 32.61 ], [ 13.391795, 52.4747857, 32.75 ], [ 13.3918985, 52.4747159, 33.03 ], [ 13.3921305, 52.4748218, 32.9 ], [ 13.3924295, 52.4749522, 32.21 ], [ 13.392583, 52.475059, 32.49 ], [ 13.3931511, 52.4753106, 32.74 ] ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3931511, 52.4753106, 32.74 ], [ 13.3934351, 52.475342, 32.43 ] ] ] } }
];
var bounds = d3.geo.bounds(features),
topLeft = bounds[0],
bottomRight = bounds[1];
However when debugging the script, topLeft and bottomRight are NaN.
I suppose this is because of the more complex geometry-structure of my JSON, which consists of MultiLineString-geometries, nit just simple Point-features. Any idea how to get the bounds here?
Generally speaking, D3 geo functions that accept geojson only accept geojson objects, not arrays. If you nest your features in a FeatureCollection, you should see a result:
var collection = { type: "FeatureCollection", features: features }
var features = [
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3921498, 52.476596, 31.64 ], [ 13.393036, 52.4765996, 31.6 ], [ 13.3934, 52.4765511, 31.87 ], [ 13.3935847, 52.4765058, 32.37 ], [ 13.3936657, 52.4764735, 32.16 ], [ 13.3936851, 52.4764164, 32.04 ], [ 13.3936229, 52.4761477, 32.05 ], [ 13.3934819, 52.4758929, 32.77 ], [ 13.3932546, 52.4756262, 32.56 ], [ 13.3930283, 52.4754013, 32.51 ], [ 13.3927091, 52.4751468, 32.64 ], [ 13.3923208, 52.4749337, 32.63 ], [ 13.3919094, 52.4747933, 33.13 ], [ 13.3917874, 52.4747948, 32.61 ], [ 13.391795, 52.4747857, 32.75 ], [ 13.3918985, 52.4747159, 33.03 ], [ 13.3921305, 52.4748218, 32.9 ], [ 13.3924295, 52.4749522, 32.21 ], [ 13.392583, 52.475059, 32.49 ], [ 13.3931511, 52.4753106, 32.74 ] ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3931511, 52.4753106, 32.74 ], [ 13.3934351, 52.475342, 32.43 ] ] ] } }
];
var collection = { type: "FeatureCollection", features: features }
var bounds = d3.geo.bounds(collection),
topLeft = bounds[0],
bottomRight = bounds[1];
console.log(bounds);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
I'm getting the following error when using turf.intersect with a specific polygon:
"TopologyException" "found non-noded intersection between LINESTRING ( -0.140733 51.505327, -0.141097 51.505689 ) and LINESTRING ( -0.141136 51.505674, -0.141068 51.5057 )"
Here is the polygon with the point that's causing the issue:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-0.144414,
51.5057787
],
[
-0.1444,
51.5057669
],
[
-0.1444174,
51.5057565
],
[
-0.1444375,
51.5057437
],
[
-0.1444486,
51.5057591
],
[
-0.1448395,
51.5055465
],
[
-0.1456195,
51.5051519
],
[
-0.1461211,
51.5048921
],
[
-0.1467341,
51.5045993
],
[
-0.1472694,
51.5042539
],
[
-0.147728,
51.5039184
],
[
-0.1485316,
51.5035408
],
[
-0.1485702,
51.5035234
],
[
-0.1488964,
51.503376
],
[
-0.1489081,
51.5033859
],
[
-0.1491678,
51.503267
],
[
-0.1491573,
51.5032582
],
[
-0.1494585,
51.5031342
],
[
-0.1495505,
51.5031388
],
[
-0.1495754,
51.503085
],
[
-0.1496124,
51.5026853
],
[
-0.1495618,
51.5026316
],
[
-0.1495053,
51.5025839
],
[
-0.1490356,
51.5025596
],
[
-0.1480816,
51.5025194
],
[
-0.1464951,
51.5024587
],
[
-0.1453418,
51.5023882
],
[
-0.1444299,
51.5023513
],
[
-0.1424233,
51.502272
],
[
-0.1420358,
51.5022744
],
[
-0.1416246,
51.5022811
],
[
-0.1414344,
51.5022758
],
[
-0.14113,
51.5023094
],
[
-0.1409441,
51.50233
],
[
-0.1412107,
51.5026049
],
[
-0.1407386,
51.5026799
],
[
-0.1402814,
51.5026536
],
[
-0.1398146,
51.5025228
],
[
-0.1396726,
51.5024475
],
[
-0.1395941,
51.5023923
],
[
-0.1394956,
51.5024312
],
[
-0.1393765,
51.5024829
],
[
-0.1388305,
51.502698
],
[
-0.1387333,
51.5027403
],
[
-0.1387835,
51.5027906
],
[
-0.1392711,
51.5032406
],
[
-0.139465,
51.503466
],
[
-0.1399479,
51.5039078
],
[
-0.1403315,
51.504302
],
[
-0.1407059,
51.5046814
],
[
-0.1402579,
51.5048283
],
[
-0.1407332,
51.5053265
],
[
-0.1410967,
51.5056887
],
[
-0.1410841,
51.5056711
],
[
-0.1411158,
51.5056574
],
[
-0.1411356,
51.5056744
],
[
-0.141068,
51.5057001
],
[
-0.1411549,
51.5058139
],
[
-0.1412316,
51.5057886
],
[
-0.1412437,
51.5058054
],
[
-0.1411693,
51.5058326
],
[
-0.1411811,
51.5058428
],
[
-0.1412021,
51.5058461
],
[
-0.1412326,
51.5058618
],
[
-0.1412584,
51.5058575
],
[
-0.1413349,
51.5059475
],
[
-0.1413677,
51.5059833
],
[
-0.1413704,
51.5060066
],
[
-0.1413538,
51.506016
],
[
-0.1413494,
51.5060451
],
[
-0.1414301,
51.5061301
],
[
-0.1414221,
51.5061562
],
[
-0.1414889,
51.5062259
],
[
-0.1415374,
51.5062089
],
[
-0.1415669,
51.506238
],
[
-0.1415172,
51.5062553
],
[
-0.141583,
51.506326
],
[
-0.1416228,
51.5063353
],
[
-0.1416919,
51.5064173
],
[
-0.1416845,
51.5064298
],
[
-0.1416341,
51.5064488
],
[
-0.1416636,
51.5064833
],
[
-0.1416771,
51.5064797
],
[
-0.1416892,
51.5064881
],
[
-0.1418973,
51.5064092
],
[
-0.1419091,
51.5064204
],
[
-0.141691,
51.5065052
],
[
-0.1417355,
51.5065528
],
[
-0.1417624,
51.5065417
],
[
-0.1417862,
51.506569
],
[
-0.141812,
51.5065727
],
[
-0.141838,
51.5065954
],
[
-0.1418271,
51.5066109
],
[
-0.1418623,
51.5066435
],
[
-0.1418837,
51.5066417
],
[
-0.1419093,
51.5066617
],
[
-0.1419035,
51.5066764
],
[
-0.1419137,
51.5066845
],
[
-0.1419323,
51.506686
],
[
-0.1419469,
51.5067007
],
[
-0.1419413,
51.5067104
],
[
-0.1419583,
51.5067201
],
[
-0.1421823,
51.5066524
],
[
-0.1422288,
51.5066342
],
[
-0.1423373,
51.5067681
],
[
-0.1430385,
51.5064228
],
[
-0.143099,
51.5064704
],
[
-0.1439141,
51.5060467
],
[
-0.144414,
51.5057787
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-0.14109693591549397,
51.5056889362676
]
}
}
]
}
I've tried using cleanCoords and checking for intersections with kinks, but it didn't work.
Here's how I managed to make it work:
var options = {tolerance: 0.0001, highQuality: true};
poly = turf.cleanCoords(turf.simplify(poly, options));
I also checked for kinks, and divided the polygon if it returned true:
var kinks = turf.kinks(poly);
if (kinks.features.length){
polys = turf.unkinkPolygon(poly);
...
Based on the answer to this question
What does the following error mean: TopologyException: found non-nonded intersection between LINESTRING
I have found this solotion to be feasible, as well:
let myWorkingPolygon = turf.buffer(errorThrowingPolygon, 0, {units:"meters"});
Buffer calculates a buffer around the given feature (but here with buffer size 0), find more info here: https://turfjs.org/docs/#buffer
I'm having 2 polygon { "Country": "01", "Location": "09", "City": "156" } and { "Country": "01", "Location": "09", "City": "160" }
I created a centerMarker fixed center the map. When user drag or change center the map. I will get position of centerMarker.
google.maps.event.addListener(map,'idle', function() {
console.log(map.getCenter().lat());
console.log(map.getCenter().lng());
});
$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
How can I check centerMarker located on "City": "160" or "City": "156"?
My full code
function initMap() {
var x = new google.maps.LatLng(11.200845,106.5746263,17);
var data =
{
"type":"FeatureCollection",
"name":"gadm36_VNM_3",
"crs":{
"type":"name",
"properties":{
"name":"urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features":[
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"156"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.773910522460994,
11.140744209289601
],
[
106.764717102050994,
11.140742301941
],
[
106.764862060547003,
11.1326341629028
],
[
106.763977050780994,
11.128930091857899
],
[
106.762413024902003,
11.1263284683228
],
[
106.761451721190994,
11.126066207885801
],
[
106.760833740234006,
11.1245851516725
],
[
106.75707244873,
11.122723579406699
],
[
106.750144958495994,
11.1217250823975
],
[
106.747901916504006,
11.122282028198301
],
[
106.748207092285,
11.1209669113159
],
[
106.746643066405994,
11.1184997558594
],
[
106.746650695800994,
11.1169691085815
],
[
106.743644714355995,
11.1138353347779
],
[
106.742393493652003,
11.1109828948975
],
[
106.737831115722997,
11.108716964721699
],
[
106.737289428710994,
11.1100120544434
],
[
106.737907409667997,
11.113375663757299
],
[
106.73681640625,
11.114133834839
],
[
106.737213134765994,
11.114882469177299
],
[
106.735412597655994,
11.116992950439499
],
[
106.735473632812997,
11.1183891296387
],
[
106.737617492675994,
11.119469642639199
],
[
106.737586975097997,
11.1202993392944
],
[
106.735694885254006,
11.120556831359901
],
[
106.736740112305,
11.1254129409791
],
[
106.735290527344006,
11.1279869079591
],
[
106.73600769043,
11.132244110107401
],
[
106.735633850097997,
11.1326360702516
],
[
106.733108520507997,
11.131629943847701
],
[
106.732345581055,
11.1364440917969
],
[
106.72779083252,
11.136043548583901
],
[
106.727645874024006,
11.138410568237299
],
[
106.724494934082003,
11.136935234069901
],
[
106.718818664550994,
11.142228126526
],
[
106.716232299805,
11.1407585144044
],
[
106.713203430175994,
11.1368913650513
],
[
106.71263885498,
11.1488819122315
],
[
106.713729858399006,
11.1516876220704
],
[
106.725151062012003,
11.180347442626999
],
[
106.734558105469006,
11.1816873550416
],
[
106.736030578612997,
11.180858612060501
],
[
106.755981445312997,
11.1822462081909
],
[
106.761962890625,
11.1883802413941
],
[
106.762916564942003,
11.1905174255372
],
[
106.764389038085994,
11.189139366149799
],
[
106.76416015625,
11.188378334045501
],
[
106.790100097655994,
11.1885118484497
],
[
106.792953491210994,
11.192991256713899
],
[
106.794372558594006,
11.1930904388429
],
[
106.794372558594006,
11.193788528442299
],
[
106.796928405762003,
11.1949625015259
],
[
106.798072814940994,
11.194272994995099
],
[
106.803909301757997,
11.1985483169556
],
[
106.805290222167997,
11.198659896850501
],
[
106.811401367187003,
11.202071189880501
],
[
106.813606262207003,
11.205387115478599
],
[
106.818145751952997,
11.2080841064453
],
[
106.819854736327997,
11.2152719497682
],
[
106.823463439940994,
11.2161722183228
],
[
106.824119567870994,
11.213012695312401
],
[
106.828521728515994,
11.209532737731999
],
[
106.831550598145,
11.209297180175801
],
[
106.835960388184006,
11.2118206024169
],
[
106.835075378417997,
11.2105274200441
],
[
106.837257385254006,
11.2098264694213
],
[
106.83716583252,
11.2090320587159
],
[
106.836235046387003,
11.2091836929322
],
[
106.837463378905994,
11.207406044006399
],
[
106.836402893065994,
11.2071533203125
],
[
106.835906982422003,
11.2056436538696
],
[
106.836585998535,
11.204249382019199
],
[
106.837699890137003,
11.2045288085938
],
[
106.836631774902003,
11.2030754089356
],
[
106.837547302245994,
11.2036037445068
],
[
106.838134765625,
11.201634407043599
],
[
106.837783813477003,
11.199815750122101
],
[
106.836570739745994,
11.1994781494141
],
[
106.83723449707,
11.1985836029053
],
[
106.835731506347997,
11.197198867798001
],
[
106.835334777832003,
11.1953115463257
],
[
106.831237792969006,
11.193099975586
],
[
106.824752807617003,
11.196343421936101
],
[
106.821243286132997,
11.195686340331999
],
[
106.818969726562997,
11.19251537323
],
[
106.81795501709,
11.192292213439901
],
[
106.817756652832003,
11.190671920776399
],
[
106.81111907959,
11.1809148788453
],
[
106.811645507812003,
11.178315162658601
],
[
106.809783935547003,
11.1756134033203
],
[
106.809677124022997,
11.174137115478599
],
[
106.807357788085994,
11.1731281280518
],
[
106.805305480957003,
11.169690132141101
],
[
106.800598144530994,
11.1647386550903
],
[
106.791679382324006,
11.1622724533082
],
[
106.787879943847997,
11.163525581359799
],
[
106.778388977050994,
11.1562852859497
],
[
106.773651123047003,
11.155713081359799
],
[
106.773910522460994,
11.140744209289601
]
]
]
]
}
},
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"160"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.908004760742003,
11.129010200500399
],
[
106.903732299805,
11.125083923339799
],
[
106.887130737305,
11.1172142028809
],
[
106.882217407227003,
11.1076774597168
],
[
106.880096435547003,
11.101813316345201
],
[
106.87996673584,
11.0955753326416
],
[
106.876556396484006,
11.095563888549901
],
[
106.876106262207003,
11.093448638916099
],
[
106.87442779541,
11.0930519104004
],
[
106.870147705077997,
11.093951225280801
],
[
106.866645812987997,
11.093237876892101
],
[
106.860298156737997,
11.0947256088256
],
[
106.858062744140994,
11.0945234298707
],
[
106.856292724609006,
11.0934009552003
],
[
106.853942871094006,
11.0938158035279
],
[
106.850006103515994,
11.092667579650801
],
[
106.848297119140994,
11.0912990570068
],
[
106.845809936522997,
11.091200828552299
],
[
106.842636108399006,
11.0886402130128
],
[
106.839897155762003,
11.0885286331178
],
[
106.836471557617003,
11.086883544921999
],
[
106.833183288574006,
11.087131500244199
],
[
106.828132629395,
11.088861465454199
],
[
106.825546264647997,
11.0915222167969
],
[
106.823066711425994,
11.0958919525146
],
[
106.823875427245994,
11.1021842956544
],
[
106.822807312012003,
11.107276916504
],
[
106.822982788085994,
11.1099071502687
],
[
106.821441650390994,
11.1121578216553
],
[
106.821563720702997,
11.1142129898072
],
[
106.829162597655994,
11.1119136810303
],
[
106.856956481934006,
11.1134729385375
],
[
106.856575012207003,
11.116441726684601
],
[
106.858283996582003,
11.1262016296387
],
[
106.864997863769005,
11.1320905685425
],
[
106.871109008789006,
11.1428709030153
],
[
106.878143310547003,
11.143126487731999
],
[
106.880805969237997,
11.144726753234901
],
[
106.886619567870994,
11.1450748443604
],
[
106.889801025390994,
11.1470909118653
],
[
106.892097473145,
11.1469631195068
],
[
106.896003723145,
11.145208358764799
],
[
106.89820098877,
11.143099784851101
],
[
106.898323059082003,
11.1416568756104
],
[
106.900520324707003,
11.138403892516999
],
[
106.900169372559006,
11.1379747390747
],
[
106.901206970215,
11.137484550476101
],
[
106.900978088379006,
11.136289596557599
],
[
106.902084350585994,
11.135934829711999
],
[
106.902717590332003,
11.1330337524415
],
[
106.904357910155994,
11.1320133209229
],
[
106.905548095702997,
11.129722595214799
],
[
106.907104492187997,
11.1286296844484
],
[
106.908004760742003,
11.129010200500399
]
]
]
]
}
}
]
};
var map = new google.maps.Map(document.getElementById("map"),{
center: x,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map,'idle', function() {
console.log(map.getCenter().lat());
console.log(map.getCenter().lng());
});
$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
map.data.addGeoJson(data);
}
In order to figure out if the center of your map is located inside polygon of the city you can use a geometry library of Maps JavaScript API. The geometry library provides method containsLocation(point, polygon) which may be useful for you. Have a look at the documentation
https://developers.google.com/maps/documentation/javascript/reference/geometry#poly
First you have to include geometry library in the script tag that loads Maps JavaScript API adding the &libraries=geometry in the URL of Maps JavaScript API. Second, you create polygons of cities using the GeoJSON objects of data layer, so you have to convert multipolygons of data layer to google.maps.Polygons objects in order to use aforementioned method containsLocation(point, polygon).
I recommend investigating documentation to see how you can convert these objects
https://developers.google.com/maps/documentation/javascript/reference/data#Data.MultiPolygon
Here is a sample code that makes a conversion of Multipolygons and uses containsLocation(point, polygon) to check if map center is inside a city polygon
var map;
function initMap() {
var x = new google.maps.LatLng(11.200845,106.5746263,17);
var data =
{
"type":"FeatureCollection",
"name":"gadm36_VNM_3",
"crs":{
"type":"name",
"properties":{
"name":"urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features":[
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"156"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.773910522460994,
11.140744209289601
],
[
106.764717102050994,
11.140742301941
],
[
106.764862060547003,
11.1326341629028
],
[
106.763977050780994,
11.128930091857899
],
[
106.762413024902003,
11.1263284683228
],
[
106.761451721190994,
11.126066207885801
],
[
106.760833740234006,
11.1245851516725
],
[
106.75707244873,
11.122723579406699
],
[
106.750144958495994,
11.1217250823975
],
[
106.747901916504006,
11.122282028198301
],
[
106.748207092285,
11.1209669113159
],
[
106.746643066405994,
11.1184997558594
],
[
106.746650695800994,
11.1169691085815
],
[
106.743644714355995,
11.1138353347779
],
[
106.742393493652003,
11.1109828948975
],
[
106.737831115722997,
11.108716964721699
],
[
106.737289428710994,
11.1100120544434
],
[
106.737907409667997,
11.113375663757299
],
[
106.73681640625,
11.114133834839
],
[
106.737213134765994,
11.114882469177299
],
[
106.735412597655994,
11.116992950439499
],
[
106.735473632812997,
11.1183891296387
],
[
106.737617492675994,
11.119469642639199
],
[
106.737586975097997,
11.1202993392944
],
[
106.735694885254006,
11.120556831359901
],
[
106.736740112305,
11.1254129409791
],
[
106.735290527344006,
11.1279869079591
],
[
106.73600769043,
11.132244110107401
],
[
106.735633850097997,
11.1326360702516
],
[
106.733108520507997,
11.131629943847701
],
[
106.732345581055,
11.1364440917969
],
[
106.72779083252,
11.136043548583901
],
[
106.727645874024006,
11.138410568237299
],
[
106.724494934082003,
11.136935234069901
],
[
106.718818664550994,
11.142228126526
],
[
106.716232299805,
11.1407585144044
],
[
106.713203430175994,
11.1368913650513
],
[
106.71263885498,
11.1488819122315
],
[
106.713729858399006,
11.1516876220704
],
[
106.725151062012003,
11.180347442626999
],
[
106.734558105469006,
11.1816873550416
],
[
106.736030578612997,
11.180858612060501
],
[
106.755981445312997,
11.1822462081909
],
[
106.761962890625,
11.1883802413941
],
[
106.762916564942003,
11.1905174255372
],
[
106.764389038085994,
11.189139366149799
],
[
106.76416015625,
11.188378334045501
],
[
106.790100097655994,
11.1885118484497
],
[
106.792953491210994,
11.192991256713899
],
[
106.794372558594006,
11.1930904388429
],
[
106.794372558594006,
11.193788528442299
],
[
106.796928405762003,
11.1949625015259
],
[
106.798072814940994,
11.194272994995099
],
[
106.803909301757997,
11.1985483169556
],
[
106.805290222167997,
11.198659896850501
],
[
106.811401367187003,
11.202071189880501
],
[
106.813606262207003,
11.205387115478599
],
[
106.818145751952997,
11.2080841064453
],
[
106.819854736327997,
11.2152719497682
],
[
106.823463439940994,
11.2161722183228
],
[
106.824119567870994,
11.213012695312401
],
[
106.828521728515994,
11.209532737731999
],
[
106.831550598145,
11.209297180175801
],
[
106.835960388184006,
11.2118206024169
],
[
106.835075378417997,
11.2105274200441
],
[
106.837257385254006,
11.2098264694213
],
[
106.83716583252,
11.2090320587159
],
[
106.836235046387003,
11.2091836929322
],
[
106.837463378905994,
11.207406044006399
],
[
106.836402893065994,
11.2071533203125
],
[
106.835906982422003,
11.2056436538696
],
[
106.836585998535,
11.204249382019199
],
[
106.837699890137003,
11.2045288085938
],
[
106.836631774902003,
11.2030754089356
],
[
106.837547302245994,
11.2036037445068
],
[
106.838134765625,
11.201634407043599
],
[
106.837783813477003,
11.199815750122101
],
[
106.836570739745994,
11.1994781494141
],
[
106.83723449707,
11.1985836029053
],
[
106.835731506347997,
11.197198867798001
],
[
106.835334777832003,
11.1953115463257
],
[
106.831237792969006,
11.193099975586
],
[
106.824752807617003,
11.196343421936101
],
[
106.821243286132997,
11.195686340331999
],
[
106.818969726562997,
11.19251537323
],
[
106.81795501709,
11.192292213439901
],
[
106.817756652832003,
11.190671920776399
],
[
106.81111907959,
11.1809148788453
],
[
106.811645507812003,
11.178315162658601
],
[
106.809783935547003,
11.1756134033203
],
[
106.809677124022997,
11.174137115478599
],
[
106.807357788085994,
11.1731281280518
],
[
106.805305480957003,
11.169690132141101
],
[
106.800598144530994,
11.1647386550903
],
[
106.791679382324006,
11.1622724533082
],
[
106.787879943847997,
11.163525581359799
],
[
106.778388977050994,
11.1562852859497
],
[
106.773651123047003,
11.155713081359799
],
[
106.773910522460994,
11.140744209289601
]
]
]
]
}
},
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"160"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.908004760742003,
11.129010200500399
],
[
106.903732299805,
11.125083923339799
],
[
106.887130737305,
11.1172142028809
],
[
106.882217407227003,
11.1076774597168
],
[
106.880096435547003,
11.101813316345201
],
[
106.87996673584,
11.0955753326416
],
[
106.876556396484006,
11.095563888549901
],
[
106.876106262207003,
11.093448638916099
],
[
106.87442779541,
11.0930519104004
],
[
106.870147705077997,
11.093951225280801
],
[
106.866645812987997,
11.093237876892101
],
[
106.860298156737997,
11.0947256088256
],
[
106.858062744140994,
11.0945234298707
],
[
106.856292724609006,
11.0934009552003
],
[
106.853942871094006,
11.0938158035279
],
[
106.850006103515994,
11.092667579650801
],
[
106.848297119140994,
11.0912990570068
],
[
106.845809936522997,
11.091200828552299
],
[
106.842636108399006,
11.0886402130128
],
[
106.839897155762003,
11.0885286331178
],
[
106.836471557617003,
11.086883544921999
],
[
106.833183288574006,
11.087131500244199
],
[
106.828132629395,
11.088861465454199
],
[
106.825546264647997,
11.0915222167969
],
[
106.823066711425994,
11.0958919525146
],
[
106.823875427245994,
11.1021842956544
],
[
106.822807312012003,
11.107276916504
],
[
106.822982788085994,
11.1099071502687
],
[
106.821441650390994,
11.1121578216553
],
[
106.821563720702997,
11.1142129898072
],
[
106.829162597655994,
11.1119136810303
],
[
106.856956481934006,
11.1134729385375
],
[
106.856575012207003,
11.116441726684601
],
[
106.858283996582003,
11.1262016296387
],
[
106.864997863769005,
11.1320905685425
],
[
106.871109008789006,
11.1428709030153
],
[
106.878143310547003,
11.143126487731999
],
[
106.880805969237997,
11.144726753234901
],
[
106.886619567870994,
11.1450748443604
],
[
106.889801025390994,
11.1470909118653
],
[
106.892097473145,
11.1469631195068
],
[
106.896003723145,
11.145208358764799
],
[
106.89820098877,
11.143099784851101
],
[
106.898323059082003,
11.1416568756104
],
[
106.900520324707003,
11.138403892516999
],
[
106.900169372559006,
11.1379747390747
],
[
106.901206970215,
11.137484550476101
],
[
106.900978088379006,
11.136289596557599
],
[
106.902084350585994,
11.135934829711999
],
[
106.902717590332003,
11.1330337524415
],
[
106.904357910155994,
11.1320133209229
],
[
106.905548095702997,
11.129722595214799
],
[
106.907104492187997,
11.1286296844484
],
[
106.908004760742003,
11.129010200500399
]
]
]
]
}
}
]
};
map = new google.maps.Map(document.getElementById("map"),{
center: x,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var centerMarker = new google.maps.Marker({
position: x,
map: map
});
var features = map.data.addGeoJson(data);
var mapPolies = new Map();
features.forEach(function(feature) {
var city = feature.getProperty("City");
var geom = feature.getGeometry();
var polygons = geom.getArray();
var polys = [];
polygons.forEach(function(polygon) {
var paths = [];
var linearRings = polygon.getArray();
linearRings.forEach(function(linearRing){
var coords = linearRing.getArray();
paths.push(coords);
});
var poly = new google.maps.Polygon({
paths: paths,
map: null,
visible: false
});
polys.push(poly);
});
mapPolies.set(city, polys);
});
google.maps.event.addListener(map,'idle', function() {
//console.log(map.getCenter().lat());
//console.log(map.getCenter().lng());
centerMarker.setPosition(map.getCenter());
for (var entry of mapPolies.entries()) {
entry[1].forEach(function(polygon) {
var inside = google.maps.geometry.poly.containsLocation(map.getCenter(), polygon);
if (inside) {
console.log(`Map center inside polygon of ${entry[0]} city`);
}
});
}
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap&libraries=geometry" async defer></script>
I hope this helps!
I'm trying to parse my array into representing data like this
-1.80511,53.84632:-1.80511,53.84632:-1.80511,53.84632:xxx,xxx:xxx
lat,lng:lat,lng
so that it can be read by an api. here is the code I have so far, i can only get it into this format (coordsnew)
-1.7651,53.88566,-1.76896,53.8866,-1.77125,53.88801
My current code
var coordsnew = [];
var i;
for (i = 0; i < coords.length; i++) {
coordsnew += coords[i];
console.log(coordsnew);
My coords array data is currently formed like this
var statesdata = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "Name": "BD1 1", "Description": "BD1 1 postcode sector<br \/><a href=\"http:\/\/www.doogal.co.uk\/UKPostcodes.php?Search=BD1 1\" >Details<\/a>" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -1.7526003839732, 53.795297076485198 ], [ -1.75078461615826, 53.795607063948303 ], [ -1.75078061651426, 53.795604064354201 ], [ -1.75051864373599, 53.795500080054303 ], [ -1.74977069342604, 53.794539203056601 ], [ -1.74974469120328, 53.794412218350601 ], [ -1.7492607290865, 53.793926281950498 ], [ -1.74918471905401, 53.793471336517399 ], [ -1.74939968041321, 53.793170369115202 ], [ -1.74925067188821, 53.792542445011001 ], [ -1.74902869183461, 53.792380467011299 ], [ -1.74897763675983, 53.790929638498604 ], [ -1.74976552406105, 53.790511677309198 ], [ -1.75025545811429, 53.790349689915303 ], [ -1.75108238214196, 53.790913612609998 ], [ -1.75116539246416, 53.791395554773104 ], [ -1.75217230177679, 53.7921254555514 ], [ -1.75238127314532, 53.792044462329898 ], [ -1.75393711035648, 53.792635372231103 ], [ -1.75434805085846, 53.792400394475202 ], [ -1.75315716556359, 53.791713491060101 ], [ -1.7536130920749, 53.791275536607898 ], [ -1.75509590228284, 53.7910175474209 ], [ -1.75604581420275, 53.791646460844603 ], [ -1.75617780646011, 53.791840436265602 ], [ -1.75572287565107, 53.792179402357696 ], [ -1.75536192519302, 53.792321390401902 ], [ -1.75511998619384, 53.793075304829799 ], [ -1.75459505898236, 53.793299285383803 ], [ -1.75372115084327, 53.792977334818701 ], [ -1.75370116224194, 53.793190310007297 ], [ -1.75374816559962, 53.793404284194501 ], [ -1.75376716436202, 53.793429281000698 ], [ -1.75431110539553, 53.793587255224999 ], [ -1.75449608126177, 53.793544257847103 ], [ -1.75468606209324, 53.793633244863699 ], [ -1.75451310097882, 53.794060196877098 ], [ -1.75454309938432, 53.794108190830698 ], [ -1.75468508313808, 53.794129186485499 ], [ -1.75508202351291, 53.7938512139769 ], [ -1.75526600519453, 53.793943200719497 ], [ -1.75589992558159, 53.793869201069697 ], [ -1.75611888768616, 53.7935972302026 ], [ -1.75644384581814, 53.793534233333297 ], [ -1.75653285692984, 53.794052171178201 ], [ -1.75652885758116, 53.794056170760101 ], [ -1.75585494164085, 53.794121171996501 ], [ -1.75585194229808, 53.794128171212002 ], [ -1.75542100357864, 53.794348150996697 ], [ -1.75538800907876, 53.794384147193803 ], [ -1.75516103908185, 53.794446142888802 ], [ -1.7546371262232, 53.795013083049803 ], [ -1.75439915177408, 53.794938095018303 ], [ -1.75387121644832, 53.794961099275 ], [ -1.75351226756764, 53.795146082231298 ], [ -1.75297532691447, 53.795017104501397 ], [ -1.75291433127843, 53.794946113664501 ], [ -1.75265236634886, 53.795028107467203 ], [ -1.7526003839732, 53.795297076485198 ] ] ], [ [ [ -1.7524052922723, 53.792566400562002 ], [ -1.75210831392775, 53.7922304440348 ], [ -1.75197033209524, 53.792266441617201 ], [ -1.75092249848606, 53.793213343959003 ], [ -1.75151443343543, 53.793364318372703 ], [ -1.75168241131046, 53.793320321336203 ], [ -1.75193937541024, 53.7932043316018 ], [ -1.7524052922723, 53.792566400562002 ] ] ] ] } }
this is how the data is carried through and how it is represented in the console
var coords = layer.feature.geometry.coordinates;
0:Array(1)
0:Array(94)
0:Array(2) [-1.75937311731598, 53.808343451011]
0:-1.75937311731598
1:53.808343451011
To get the string you want:
var colonString = statesdata
.features[0]
.properties
.geometry
.coordinates[0][0]
.map(pair => pair.reverse().join())
.join(':');
That is some deeply nested geoJSON.
I'm trying to write a script that, using the inside method of Turf.js, that takes user-submitted coordinates and matches it to the corresponding Census tract. The code below, as a test, I believe should return true. It does not.
Those coordinates definitely are Wrigley Field. The tract polygon does envelope it. I linted the two bits of geoJson and they're clean (except for the right-hand rule).
const wrigleyField = [41.947783, -87.655889];
const wrigleyCensusTract = { "type": "Feature", "properties": { "STATEFP10": "17", "COUNTYFP10": "031", "TRACTCE10": "061100", "GEOID10": "17031061100", "NAME10": "611", "NAMELSAD10": "Census Tract 611", "MTFCC10": "G5020", "FUNCSTAT10": "S", "ALAND10": 173037, "AWATER10": 0, "INTPTLAT10": "+41.9491397", "INTPTLON10": "-087.6568035" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -87.656985, 41.951084 ], [ -87.656858, 41.951086 ], [ -87.656806, 41.951087 ], [ -87.656704, 41.951088 ], [ -87.656661, 41.951088 ], [ -87.656535, 41.951091 ], [ -87.656494, 41.951092 ], [ -87.656325, 41.951094 ], [ -87.656245, 41.951096 ], [ -87.655821, 41.951102 ], [ -87.655653, 41.951105 ], [ -87.655411, 41.951109 ], [ -87.655059, 41.951115 ], [ -87.654685, 41.95112 ], [ -87.654444, 41.951124 ], [ -87.654431, 41.950707 ], [ -87.654395, 41.949459 ], [ -87.654384, 41.949043 ], [ -87.654373, 41.948683 ], [ -87.654344, 41.947698 ], [ -87.654341, 41.947604 ], [ -87.65433, 41.947245 ], [ -87.654576, 41.94724 ], [ -87.654938, 41.947234 ], [ -87.655317, 41.947228 ], [ -87.655565, 41.947225 ], [ -87.655755, 41.947221 ], [ -87.656313, 41.947213 ], [ -87.656325, 41.947212 ], [ -87.656516, 41.947202 ], [ -87.656663, 41.947194 ], [ -87.656849, 41.947184 ], [ -87.657104, 41.94718 ], [ -87.657252, 41.947178 ], [ -87.657382, 41.947176 ], [ -87.657635, 41.947171 ], [ -87.657739, 41.94717 ], [ -87.658784, 41.947154 ], [ -87.659168, 41.947149 ], [ -87.659165, 41.947254 ], [ -87.659167, 41.94733 ], [ -87.659176, 41.947623 ], [ -87.659181, 41.947876 ], [ -87.659186, 41.948059 ], [ -87.65919, 41.94824 ], [ -87.659196, 41.948487 ], [ -87.659204, 41.948785 ], [ -87.65921, 41.948967 ], [ -87.659219, 41.949292 ], [ -87.659229, 41.949598 ], [ -87.659245, 41.950269 ], [ -87.659254, 41.950595 ], [ -87.659257, 41.950685 ], [ -87.659266, 41.950957 ], [ -87.659269, 41.951048 ], [ -87.658928, 41.951052 ], [ -87.657908, 41.951068 ], [ -87.657569, 41.951074 ], [ -87.657468, 41.951075 ], [ -87.657167, 41.951081 ], [ -87.657067, 41.951083 ], [ -87.657014, 41.951083 ], [ -87.656985, 41.951084 ] ] ] } }
const wrigleyPoint = { "type": "Feature", "properties": { "marker-color": "#0f0" }, "geometry": { "type": "Point", "coordinates": wrigleyField } };
console.log(turf.inside(wrigleyPoint, wrigleyCensusTract)); // false
What am I missing? Why does the above snippet not return true?
Thanks!
The issue is that your point coordinates are swapped. If you switch their places, then it will return true. I just tested this myself with your data and I did get true after swapping the point coordinates. Here is a snippet so you can test it yourself.
p1 = { "type": "Feature", "properties": { "STATEFP10": "17", "COUNTYFP10": "031", "TRACTCE10": "061100", "GEOID10": "17031061100", "NAME10": "611", "NAMELSAD10": "Census Tract 611", "MTFCC10": "G5020", "FUNCSTAT10": "S", "ALAND10": 173037, "AWATER10": 0, "INTPTLAT10": "+41.9491397", "INTPTLON10": "-087.6568035" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -87.656985, 41.951084 ], [ -87.656858, 41.951086 ], [ -87.656806, 41.951087 ], [ -87.656704, 41.951088 ], [ -87.656661, 41.951088 ], [ -87.656535, 41.951091 ], [ -87.656494, 41.951092 ], [ -87.656325, 41.951094 ], [ -87.656245, 41.951096 ], [ -87.655821, 41.951102 ], [ -87.655653, 41.951105 ], [ -87.655411, 41.951109 ], [ -87.655059, 41.951115 ], [ -87.654685, 41.95112 ], [ -87.654444, 41.951124 ], [ -87.654431, 41.950707 ], [ -87.654395, 41.949459 ], [ -87.654384, 41.949043 ], [ -87.654373, 41.948683 ], [ -87.654344, 41.947698 ], [ -87.654341, 41.947604 ], [ -87.65433, 41.947245 ], [ -87.654576, 41.94724 ], [ -87.654938, 41.947234 ], [ -87.655317, 41.947228 ], [ -87.655565, 41.947225 ], [ -87.655755, 41.947221 ], [ -87.656313, 41.947213 ], [ -87.656325, 41.947212 ], [ -87.656516, 41.947202 ], [ -87.656663, 41.947194 ], [ -87.656849, 41.947184 ], [ -87.657104, 41.94718 ], [ -87.657252, 41.947178 ], [ -87.657382, 41.947176 ], [ -87.657635, 41.947171 ], [ -87.657739, 41.94717 ], [ -87.658784, 41.947154 ], [ -87.659168, 41.947149 ], [ -87.659165, 41.947254 ], [ -87.659167, 41.94733 ], [ -87.659176, 41.947623 ], [ -87.659181, 41.947876 ], [ -87.659186, 41.948059 ], [ -87.65919, 41.94824 ], [ -87.659196, 41.948487 ], [ -87.659204, 41.948785 ], [ -87.65921, 41.948967 ], [ -87.659219, 41.949292 ], [ -87.659229, 41.949598 ], [ -87.659245, 41.950269 ], [ -87.659254, 41.950595 ], [ -87.659257, 41.950685 ], [ -87.659266, 41.950957 ], [ -87.659269, 41.951048 ], [ -87.658928, 41.951052 ], [ -87.657908, 41.951068 ], [ -87.657569, 41.951074 ], [ -87.657468, 41.951075 ], [ -87.657167, 41.951081 ], [ -87.657067, 41.951083 ], [ -87.657014, 41.951083 ], [ -87.656985, 41.951084 ] ] ] } };
p2 = {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [-87.655889, 41.947783]}};
alert(turf.inside(p2, p1))
<script src="https://npmcdn.com/#turf/turf/turf.min.js"></script>