{"id":29707,"date":"2020-11-24T13:33:01","date_gmt":"2020-11-24T13:33:01","guid":{"rendered":"https:\/\/www.northafricatrees.org\/buscador-geografico\/"},"modified":"2021-01-20T13:32:45","modified_gmt":"2021-01-20T13:32:45","slug":"recherche-geographique","status":"publish","type":"page","link":"https:\/\/www.northafricatrees.org\/fr\/recherche-geographique\/","title":{"rendered":"Recherche G\u00e9ographique"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><section class=\"l-section wpb_row us_custom_887a049b height_medium width_full\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row type_default valign_top\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column\" ><div class=\"wpb_wrapper\"><input type=\"hidden\" id=\"lang\" name=\"lang\" value=\"fr\">\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBGqmUPyiq0sW6DujX5B8gGjBFXynmkqaU&libraries=drawing\"><\/script>\n<div id=\"searcher-map\" class=\"g-cols vc_row type_default valign_top\">\t\n\t<div class=\"loading\">\n\t\t<div class=\"loader-container\">\n\t\t<p>Cela peut prendre un certain temps, soyez patient<\/p>\n\t\t\t<img src=\"https:\/\/www.northafricatrees.org\/wp-content\/uploads\/2021\/01\/loading.svg\" alt=\"Loading\"\/>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"vc_col-sm-5 wpb_column vc_column_container species-container\">\n\t\t<div class=\"vc_column-inner\">\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<h1>Liste des esp\u00e8ces<\/h1>\n\t\t\t\t<div id=\"species-list-searcher\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"wpb_wrapper load-more-species-container\" style=\"margin-top: 1rem;align-self: center; opacity: 0;\">\n\t\t\t\t<button class=\"w-btn us-btn-style_1\" id=\"load-more-species\"><i class=\"fal fa-plus\"><\/i> Charger plus<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"vc_col-sm-7 wpb_column vc_column_container map-container\">\n\t\t<div class=\"vc_column-inner type_sticky\">\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"map-block\">\n\t\t\t\t\t<div class=\"buttons-container\">\n\t\t\t\t\t\t<button class=\"w-btn us-btn-style_1\" id=\"drawBtn\"><i class=\"fal fa-rectangle-landscape\"><\/i> Dessiner la zone de recherche<\/button>\n\t\t\t\t\t\t<button class=\"w-btn us-btn-style_1\" id=\"moveBtn\" style=\"display: none;\"><i class=\"fal fa-hand-rock\"><\/i> D\u00e9placez-vous sur la carte<\/button>\n\t\t\t\t\t\t<button class=\"w-btn us-btn-style_1\" id=\"deleteBtn\"><i class=\"fal fa-trash\"><\/i> R\u00e9initialiser la recherche<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"messages-container\">\n\t\t\t\t\t\t<span id=\"drawMessage\" style=\"display: none;\">Rechercher des esp\u00e8ces en dessinant un rectangle sur la carte<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"map\" style=\"width: 100%;\"><\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<script type=\"text\/javascript\">\n\tconst notFoundMessage = {\n\t\t'es': 'No se han encontrado especies en la zona seleccionada',\n\t\t'en': 'No species found in the selected area',\n\t\t'fr': 'Aucune esp\u00e8ce trouv\u00e9e dans la zone s\u00e9lectionn\u00e9e'\n\t};\n\tlet state = {\n\t\tloadSpecies: true,\n\t\tloadProductsCompleted: true,\n\t\tpage: 1\n\t};\n\tlet myRectangle = null;\n\tlet map = null;\n\tlet drawingManager = null;\n\tlet bounds = null;\n\tconst optionsMap = {\n\t    zoom: 7,\n\t    center: new google.maps.LatLng(34.6711844, -1.5894153),\n\t    mapTypeId: 'terrain',\n\t    fullscreenControl: false,\n\t};\n\tconst optionsDrawing = {\n\t    drawingMode: null,\n\t    drawingControl: false,\n\t    drawingControlOptions: {\n\t        position: google.maps.ControlPosition.RIGHT,\n\t        drawingModes: [\n\t            google.maps.drawing.OverlayType.RECTANGLE,\n\t        ],\n\t    },\n\t    rectangleOptions: {\n\t        fillColor: \"#185c29\",\n\t        fillOpacity: 0.6,\n\t        strokeWeight: 0,\n\t        clickable: false,\n\t        editable: false,\n\t        zIndex: 1,\n\t    },\n\t}\n\tconst element = document.getElementById('map');\n\n\tjQuery(document).ready(function($) {\n\t\tconst lang = $('#lang').val();\n\t\t\n\t\tinitMap();\n\t    fetchSpecies();\n\n\t    $(document).on('click', '#drawBtn', clickDrawButton);\n\t   \t$(document).on('click', '#moveBtn', clickMoveButton);\n\t   \t$(document).on('click', '#deleteBtn', clickDeleteButton);\n\n\t   \t\/\/ $(document).on('click', '#load-more-species', function() {\n\t\t\/\/ \tif( state.loadSpecies ){\n\t\t\/\/ \t\tfetchSpecies(bounds);\n\t\t\/\/ \t} else {\n\t\t\/\/ \t\tdocument.querySelector(\"#load-more-species\").style.display = \"none\";\n\t\t\/\/ \t}\n\t\t\/\/ });\n\n\t   \t\/\/ $(window).scroll(function() {\n\t\t\/\/ \tvar position = $(window).scrollTop() + 1500;\n  \t\t\/\/ \tvar bottom = $(document).height() - $(window).height();\n\t\t\/\/ \tif( state.loadSpecies && position >= bottom ){\n\t\t\/\/ \t\tfetchSpecies(bounds);\n\t\t\/\/ \t}\n\t\t\/\/ });\n\n\t\t\/\/ const target = document.querySelector('#load-more-species');\n\t\t\/\/ const observer = new IntersectionObserver(handleIntersection);\n\t\t\/\/ observer.observe(target);\n\n\n\t});\n\n\tfunction handleIntersection(entries) {\n\t\tentries.map((entry) => {\n\t\t\tif (entry.isIntersecting) {\n\t\t\t\tif( state.loadSpecies ){\n\t\t\t\t\tfetchSpecies(bounds);\n\t\t\t\t} else {\n\t\t\t\t\t\/\/document.querySelector(\"#load-more-species\").style.display = \"none\";\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t}\n\t\t});\n\t}\n\n\tfunction initMap() {\n\t\tmap = new google.maps.Map(element, optionsMap);\n\t\tdrawingManager = new google.maps.drawing.DrawingManager(optionsDrawing);\n\t\tdrawingManager.setMap(map);\n\n\t\tconfigureListenerGoogleMap();\n\t}\n\n\tfunction resetState() {\n\t\tstate = {\n\t\t\tloadSpecies: true,\n\t\t\tloadProductsCompleted: true,\n\t\t\tpage: 1\n\t\t};\n\t}\n\n\tfunction resetBounds() {\n\t\tbounds = null;\n\t}\n\n\tfunction configureListenerGoogleMap() {\n\t\tgoogle.maps.event.addListener(drawingManager, 'rectanglecomplete', setBoundsFilter);\n\t}\n\n\tfunction clickDrawButton() {\n\t\tdrawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);\n\t    $('#moveBtn').show();\n\t    $('#drawMessage').show();\n\t    $(this).hide();\n\t}\n\n\tfunction clickMoveButton() {\n\t\tdrawingManager.setDrawingMode(null);\n\t    $('#drawBtn').show();\n\t    $('#drawMessage').hide();\n\t    $(this).hide();\n\t}\n\n\tfunction clickDeleteButton() {\n\t\tdeleteRectangle();\n\t\tresetState();\n\t\tresetBounds();\n\t\tfetchSpecies();\n\t}\n\n\tfunction deleteRectangle() {\n\t\tif (myRectangle != null)myRectangle.setMap(null);\n\t}\n\n\tfunction setBoundsFilter(rectangle) {\n\t\tdeleteRectangle();\n\t\tmyRectangle = rectangle;\n\n\t    const rectangleBounds = rectangle.getBounds();\n\t    const rectangleBoundsNorthEast = rectangleBounds.getNorthEast();\n\t    const rectangleBoundsSouthWest = rectangleBounds.getSouthWest();\n\t\t\n\t\t\/\/ North West\n        var NW = new google.maps.LatLng(rectangleBoundsNorthEast.lat(),rectangleBoundsSouthWest.lng());\n        \/\/ South East\n        var SE = new google.maps.LatLng(rectangleBoundsSouthWest.lat(),rectangleBoundsNorthEast.lng());\n\n\t    const boundsNorthEast = {\n\t        lat: rectangleBoundsNorthEast.lat(),\n\t        lng: rectangleBoundsNorthEast.lng(),\n\t    }\n\t    const boundsSouthWest = {\n\t        lat: rectangleBoundsSouthWest.lat(),\n\t        lng: rectangleBoundsSouthWest.lng(),\n\t    }\n\n\t    const boundsNorthWest = {\n\t        lat: NW.lat(),\n\t        lng: NW.lng(),\n\t    }\n\n\t    const boundsSouthEast = {\n\t        lat: SE.lat(),\n\t        lng: SE.lng(),\n\t    }\n\n\t    bounds = {\n\t        NE: boundsNorthEast,\n\t        SW: boundsSouthWest,\n\t\t\tNW: boundsNorthWest,\n\t\t\tSE: boundsSouthEast\n\t    };\n\n\t\t\/\/console.log(bounds)\n\n\t    resetState();\n\t    fetchSpecies(bounds);\n\t}\n\n\tfunction fetchSpecies(boundsNESW = null) {\n\t\tif(!state.loadSpecies || !state.loadProductsCompleted)return;\n\n\t\tstate.loadProductsCompleted = false;\n\n\t    var data = {\n\t        action: 'get_species',\n\t        pg: state.page\n\t    };\n\n\t    if (boundsNESW) {\n\t        data['bounds'] = boundsNESW;\n\t    }\n\n\t    jQuery.ajax({\n\t        type: 'GET',\n\t        \/\/ url: 'https:\/\/natrees.solbyte.dev\/wp-admin\/admin-ajax.php',\n\t        url: 'https:\/\/www.northafricatrees.org\/wp-admin\/admin-ajax.php',\n\t        data: data,\n\t        beforeSend: function() {\n\t            jQuery('.loading').fadeIn();\n\t        },\n\t        error: function(response) {\n\t            console.log(response);\n\t        },\n\t        success: function(response) {\n\t            var html = '';\n\t\t\t\t\/\/console.log(response)\n\t            if (response.view != \"\") {\n\t                html = response.view;\n\t            } else {\n\t\t\t\t\t\n\t\t\t\t\thtml = '<div class=\"not-species-zone\">' + notFoundMessage[lang] + '<\/div>';\n\t\t\t\t}\n\t            if(state.page > 1) {\n\t     \t\t   \tjQuery('#species-list-searcher').append(html);\n\t     \t\t}else{\n\t     \t\t   \tjQuery('#species-list-searcher').html(html);\n\t     \t\t}\n\n\t            if(response.count_species < 60) {\n\t            \tstate.loadSpecies = false;\n\t            }else{\n\t            \tstate.page = state.page + 1;\n\t            }\n\t        },\n\t        complete: function() {\n\t            jQuery('.loading').fadeOut();\n\t            state.loadProductsCompleted = true;\n\t        }\n\t    });\n\t}\n<\/script>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n<\/div>","protected":false},"excerpt":{"rendered":"Cela peut prendre un certain temps, soyez patient Liste des esp\u00e8ces Charger plus Dessiner la zone de recherche D\u00e9placez-vous sur la carte R\u00e9initialiser la recherche Rechercher des esp\u00e8ces en dessinant un rectangle sur la carte","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.6.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Recherche G\u00e9ographique - North Africa Trees<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.northafricatrees.org\/fr\/recherche-geographique\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Recherche G\u00e9ographique - North Africa Trees\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.northafricatrees.org\/fr\/recherche-geographique\/\" \/>\n<meta property=\"og:site_name\" content=\"North Africa Trees\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-20T13:32:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.northafricatrees.org\/#organization\",\"name\":\"North \\u00e1frica trees\",\"url\":\"https:\/\/www.northafricatrees.org\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.northafricatrees.org\/#logo\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/www.northafricatrees.org\/wp-content\/uploads\/2020\/10\/logo-north-africa-trees.png\",\"width\":80,\"height\":70,\"caption\":\"North \\u00e1frica trees\"},\"image\":{\"@id\":\"https:\/\/www.northafricatrees.org\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.northafricatrees.org\/#website\",\"url\":\"https:\/\/www.northafricatrees.org\/\",\"name\":\"North Africa Trees\",\"description\":\"\\u00c1rboles y arbustos aut\\u00f3ctonos del Norte de \\u00c1frica\",\"publisher\":{\"@id\":\"https:\/\/www.northafricatrees.org\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.northafricatrees.org\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.northafricatrees.org\/fr\/recherche-geographique\/#webpage\",\"url\":\"https:\/\/www.northafricatrees.org\/fr\/recherche-geographique\/\",\"name\":\"Recherche G\\u00e9ographique - North Africa Trees\",\"isPartOf\":{\"@id\":\"https:\/\/www.northafricatrees.org\/#website\"},\"datePublished\":\"2020-11-24T13:33:01+00:00\",\"dateModified\":\"2021-01-20T13:32:45+00:00\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.northafricatrees.org\/fr\/recherche-geographique\/\"]}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.northafricatrees.org\/fr\/wp-json\/wp\/v2\/pages\/29707"}],"collection":[{"href":"https:\/\/www.northafricatrees.org\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.northafricatrees.org\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.northafricatrees.org\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.northafricatrees.org\/fr\/wp-json\/wp\/v2\/comments?post=29707"}],"version-history":[{"count":0,"href":"https:\/\/www.northafricatrees.org\/fr\/wp-json\/wp\/v2\/pages\/29707\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.northafricatrees.org\/fr\/wp-json\/wp\/v2\/media?parent=29707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}