{"id":840,"date":"2022-04-20T09:03:29","date_gmt":"2022-04-20T07:03:29","guid":{"rendered":"https:\/\/ccbt-st1.le-pic.org\/index.php\/locations-map\/"},"modified":"2022-04-20T09:03:29","modified_gmt":"2022-04-20T07:03:29","slug":"carte-des-lieux","status":"publish","type":"page","link":"https:\/\/www.repaircafepibrac.org\/index.php\/carte-des-lieux\/","title":{"rendered":"Locations Map"},"content":{"rendered":"<div id=\"map\">\r\n       <!-- Ici s'affichera la carte  -->\r\n    <\/div><script type=\"text\/javascript\">\r\n    \r\n    var osmLink = '<a href=\"http:\/\/openstreetmap.org\">OpenStreetMap France<\/a>',\r\n            thunLink = 'OpenStreetMap HOT',\r\n            esriLink = 'Esri WorldStreetMap',\r\n            EsriWorldImagery = 'Satellite',\r\n            CyclOSM = 'CyclOSM';\r\n        \r\n    var esriUrl = 'https:\/\/{s}.tile.openstreetmap.fr\/osmfr\/{z}\/{x}\/{y}.png',\r\n        esriAttrib = '',\r\n        osmUrl = 'https:\/\/{s}.tile.openstreetmap.fr\/osmfr\/{z}\/{x}\/{y}.png',\r\n        osmAttrib = '&copy; ' + osmLink + ' Contributors',\r\n        landUrl = 'https:\/\/{s}.tile.openstreetmap.fr\/hot\/{z}\/{x}\/{y}.png',\r\n        thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink,        \r\n        EsriWorldImageryUrl = 'https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}',\r\n        EsriWorldImageryAttrib = '&copy; '+osmLink+' Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',\r\n        CyclOSMUrl = 'https:\/\/dev.{s}.tile.openstreetmap.fr\/cyclosm\/{z}\/{x}\/{y}.png',\r\n        CyclOSMAttrib = '&copy; '+osmLink+' <a href=\"https:\/\/github.com\/cyclosm\/cyclosm-cartocss-style\/releases\" title=\"CyclOSM - Open Bicycle render\">CyclOSM<\/a> | Map data: &copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors';\r\n\r\n    var esriMap = L.tileLayer(esriUrl, {attribution: esriAttrib}),\r\n        osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),\r\n        landMap = L.tileLayer(landUrl, {attribution: thunAttrib}),\r\n        EsriWorldImagery = L.tileLayer(EsriWorldImageryUrl, {attribution: EsriWorldImageryAttrib}),\r\n        CyclOSM = L.tileLayer(CyclOSMUrl, {attribution: CyclOSMAttrib});\r\n\r\n    var tiles = L.tileLayer('https:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {\r\n            maxZoom: 18,\r\n            attribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors',\r\n            id: 'mapbox\/streets-v11',\r\n            tileSize: 512,\r\n            zoomOffset: -1\r\n        }),\r\n        \r\n        latlng = L.latLng(43.5, 1.7);\r\n    var lat = 47.4;\r\n    var lng = 1.6;\r\n        \r\n    var zoom = 10;\r\n\r\n    var options = {\r\n        maxZoom: 18,\r\n        center: latlng,\r\n        zoom: 10,\r\n        zoomControl: false,layers: [tiles], tap:false, }\r\n    var map = L.map('map', options);\r\n\r\n    var baseLayers = {\r\n        'Custom OpenStreetMap': tiles,\r\n        'OpenStreetMap France': esriMap,\r\n        'OSM Mapnik': osmMap,\r\n        'OpenStreetMap HOT': landMap,        \r\n        'Satellite':EsriWorldImagery,\r\n        'Cycle OSM':CyclOSM\r\n    };\r\n\r\n\r\n    \/\/\/ ------ GEOCODER\r\n    var IconSearch = L.icon({\r\n        iconUrl: \"https:\/\/www.repaircafepibrac.org\/wp-content\/plugins\/events-manager-openstreetmap\/images\/iconsearch.png\",\r\n        iconSize:     [32, 48],\r\n        iconAnchor:   [16, 48],\r\n        popupAnchor:  [-3, -48],\r\n    });\r\n\r\n    var optionsSearch = {\r\n        placeholder: \"Rechercher des lieux ou des adresses\",\r\n        \/\/position: \"topright\"\r\n    }\r\n            \r\n    \/\/ create the geocoding control and add it to the map\r\n    var searchControl = L.esri.Geocoding.geosearch(optionsSearch).addTo(map);\r\n\r\n    \/\/ create an empty layer group to store the results and add it to the map\r\n    var results = L.layerGroup().addTo(map);\r\n\r\n    \/\/ listen for the results event and add every result to the map\r\n    searchControl.on(\"results\", function(data) {\r\n        results.clearLayers();\r\n        for (var i = data.results.length - 1; i >= 0; i--) {\r\n            results.addLayer(L.marker(data.results[i].latlng, { icon: IconSearch }));\r\n        }\r\n    });\r\n\r\n    \/\/ ------ END \r\n    L.control.layers(baseLayers).addTo(map);\r\n    var markers = L.markerClusterGroup();\r\n\t\r\n    for (var i = 0; i < addressPoints.length; i++) {\r\n        var a = addressPoints[i];\r\n        var title = a[2];\r\n        var myIcon = L.icon({\r\n            iconUrl: '' + a[6] + '',\r\n            iconSize:     [33, 44],\r\n            iconAnchor:   [16.5, 44],\r\n            popupAnchor:  [-3, -44],\r\n        });\r\n        \/\/ create popup contents\r\n        var customPopup = '' + a[4] + '<div class=\"em-osm-content\"><a href=\"' + a[3] + '\" target=\"_blank\"><h3>' + title + '<\/h3><\/a><p>' + a[5] + '<\/p><\/div><div class=\"clear\"><\/div><div class=\"em-osm-readmore\"><a href=\"' + a[3] + '\" target=\"_blank\">Lire la suite<\/a><\/div><br \/>';\r\n        \r\n        \/\/ specify popup options \r\n        var customOptions = {'maxWidth': '500','className' : 'customevent'}\r\n\r\n        var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title, icon: myIcon });\r\n        marker.bindPopup(customPopup,customOptions);\r\n        markers.addLayer(marker);\r\n    }\r\n\r\n    \/\/ create legend : https:\/\/tomik23.github.io\/leaflet-examples\/#62.count-markers\r\n\r\n    const legend = L.control({ position: 'bottomleft' });\r\n\r\n    legend.onAdd = function () {\r\n    const div = L.DomUtil.create('div', 'description');\r\n    L.DomEvent.disableClickPropagation(div);\r\n\r\n    const allMarkers = L.DomUtil.create('div', 'all-markers');\r\n    allMarkers.insertAdjacentHTML(\r\n        'beforeend',\r\n        '<div style=\"background-color:#ffffff;padding:0.8em;\">Tous les emplacements sur la carte\u00a0: <strong>' + i +'<\/strong><\/div>'\r\n    );\r\n\r\n    div.appendChild(allMarkers);\r\n    return div;\r\n    };\r\n\r\n    legend.addTo(map);\r\n    \r\nmap.addLayer(markers);\r\n\r\n    \/\/ custom zoom bar control that includes a Zoom Home function\r\n    L.Control.zoomHome = L.Control.extend({\r\n        options: {\r\n            position: 'topleft',\r\n            zoomInText: '+',\r\n            zoomInTitle: 'Zoom avant',\r\n            zoomOutText: '-',\r\n            zoomOutTitle: 'Zoom arri\u00e8re',\r\n            zoomHomeText: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"-13 -13 59 59\"><path d=\"M32 18.451L16 6.031 0 18.451v-5.064L16 .967l16 12.42zM28 18v12h-8v-8h-8v8H4V18l12-9z\" \/><\/svg>',\r\n            zoomHomeTitle: 'Zoom accueil'\r\n        },\r\n\r\n        onAdd: function (map) {\r\n            var controlName = 'gin-control-zoom',\r\n                container = L.DomUtil.create('div', controlName + ' leaflet-bar'),\r\n                options = this.options;\r\n\r\n            this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,\r\n            controlName + '-in', container, this._zoomIn);\r\n            this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,\r\n            controlName + '-home', container, this._zoomHome);\r\n            this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,\r\n            controlName + '-out', container, this._zoomOut);\r\n\r\n            this._updateDisabled();\r\n            map.on('zoomend zoomlevelschange', this._updateDisabled, this);\r\n\r\n            return container;\r\n        },\r\n\r\n        onRemove: function (map) {\r\n            map.off('zoomend zoomlevelschange', this._updateDisabled, this);\r\n        },\r\n\r\n        _zoomIn: function (e) {\r\n            this._map.zoomIn(e.shiftKey ? 3 : 1);\r\n        },\r\n\r\n        _zoomOut: function (e) {\r\n            this._map.zoomOut(e.shiftKey ? 3 : 1);\r\n        },\r\n\r\n        _zoomHome: function (e) {\r\n            map.setView([lat, lng], zoom);\r\n        },\r\n\r\n        _createButton: function (html, title, className, container, fn) {\r\n            var link = L.DomUtil.create('a', className, container);\r\n            link.innerHTML = html;\r\n            link.href = '#';\r\n            link.title = title;\r\n\r\n            L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)\r\n                .on(link, 'click', L.DomEvent.stop)\r\n                .on(link, 'click', fn, this)\r\n                .on(link, 'click', this._refocusOnMap, this);\r\n\r\n            return link;\r\n        },\r\n\r\n        _updateDisabled: function () {\r\n            var map = this._map,\r\n                className = 'leaflet-disabled';\r\n\r\n            L.DomUtil.removeClass(this._zoomInButton, className);\r\n            L.DomUtil.removeClass(this._zoomOutButton, className);\r\n\r\n            if (map._zoom === map.getMinZoom()) {\r\n                L.DomUtil.addClass(this._zoomOutButton, className);\r\n            }\r\n            if (map._zoom === map.getMaxZoom()) {\r\n                L.DomUtil.addClass(this._zoomInButton, className);\r\n            }\r\n        }\r\n    });\r\n    \/\/ add the new control to the map\r\n    var zoomHome = new L.Control.zoomHome();\r\n    zoomHome.addTo(map);\r\n    \r\n    const attribution =\r\n    '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors';\r\n    const osm2 = new L.TileLayer('https:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', { minZoom: 0, maxZoom: 13, attribution, id: 'mapbox\/streets-v11' });\r\n    var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);\r\n    \r\n\r\n\t<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-page-cafe-bricol","meta":{"footnotes":""},"class_list":["post-840","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.repaircafepibrac.org\/index.php\/wp-json\/wp\/v2\/pages\/840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.repaircafepibrac.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.repaircafepibrac.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.repaircafepibrac.org\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.repaircafepibrac.org\/index.php\/wp-json\/wp\/v2\/comments?post=840"}],"version-history":[{"count":0,"href":"https:\/\/www.repaircafepibrac.org\/index.php\/wp-json\/wp\/v2\/pages\/840\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.repaircafepibrac.org\/index.php\/wp-json\/wp\/v2\/media?parent=840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}