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>
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!