diff --git a/mini-master/application/view/home/map.php b/mini-master/application/view/home/map.php index 8d1e28f34060855194e21098ca1ded6b0494aca8..00bc606bb0dfb8b5f26ce92b0e8c8da80550750e 100644 --- a/mini-master/application/view/home/map.php +++ b/mini-master/application/view/home/map.php @@ -4,7 +4,11 @@ mapboxgl.accessToken = 'pk.eyJ1Ijoic2Vpa2lzaGlraSIsImEiOiJjamE3Y2ozcTk5dmVwMzNxc3Z1dm5naHVnIn0.Gp0wtewuDI8NUL9bBAnKbg'; var map = new mapboxgl.Map({ container: 'map', -style: 'mapbox://styles/mapbox/light-v9' }); +style: 'mapbox://styles/mapbox/light-v9', + center: [2.5, 48.8], // starting position + zoom: 8 // starting zoom + +}); //style: 'mapbox://styles/mapbox/streets-v10' map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.GeolocateControl({ @@ -13,5 +17,246 @@ map.addControl(new mapboxgl.GeolocateControl({ }, trackUserLocation: true })); + + +// The 'building' layer in the mapbox-streets vector source contains building-height +// data from OpenStreetMap. +map.on('load', function() { + // Insert the layer beneath any symbol layer. + var layers = map.getStyle().layers; + + var labelLayerId; + for (var i = 0; i < layers.length; i++) { + if (layers[i].type === 'symbol' && layers[i].layout['text-field']) { + labelLayerId = layers[i].id; + break; + } + } + + map.addLayer({ + 'id': '3d-buildings', + 'source': 'composite', + 'source-layer': 'building', + 'filter': ['==', 'extrude', 'true'], + 'type': 'fill-extrusion', + 'minzoom': 15, + 'paint': { + 'fill-extrusion-color': '#aaa', + + // use an 'interpolate' expression to add a smooth transition effect to the + // buildings as the user zooms in + 'fill-extrusion-height': [ + "interpolate", ["linear"], ["zoom"], + 15, 0, + 15.05, ["get", "height"] + ], + 'fill-extrusion-base': [ + "interpolate", ["linear"], ["zoom"], + 15, 0, + 15.05, ["get", "min_height"] + ], + 'fill-extrusion-opacity': .6 + } + }, labelLayerId); +}); + +//tests + +map.on('load', function () { + map.addSource('terrasses', { + type: 'geojson', + data: '\public\etalages-et-terrasses.geojson' //TODO trouver l'url' + + }); + + /* + $json_a = json_decode($restaurants, true); + + foreach ($json_a as $rest => $val) { + echo "<tr>"; + echo "<th>".""."</th>"; + echo "<th>".$val['fields']['lieu1']."</th>"; + echo "<th>".$val['fields']['red_profession']."</th>"; + echo "<th>".$val['geometry']['coordinates']['0'].",".$val['geometry']['coordinates']['1']."</th>"; + echo "<th>".$val['recordid']."</th>"; + echo "</tr>"; + } + */ + map.addLayer({ + 'id': 'terrasses', + 'type': 'circle', + 'source': 'terrasses', + 'layout': { + 'visibility': 'visible' + }, + 'paint': { + 'circle-radius': 7, + 'circle-color': 'rgba(55,148,179,0.6)' + } + + }); + + + // pour récupérer les données de la nouvelle API + /* var data_json ='\..\..\..\public\etalages-et-terrasses.json'; + // JSON.parse(data_json); + + var geojson = { + "type": "FeatureCollection", + "features": [{ + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": + //[77, 39] + //data_json.geo_point_2d + [[48.84047701059822, 2.324131680599035], + [48.84999108988611, 2.349687662850922], + [48.839071701986974, 2.3208972664354426], + [48.839453243356566, 2.350557261225964], + [48.833184935331346, 2.305836800298361]] + } + }] + };*/ + + map.addLayer({ + "id": "points", + "type": "circle", + "source": { + "type": "geojson", + "data":{ + "type": "FeatureCollection", + "features": + /* + var data_json ='\..\..\..\public\etalages-et-terrasses.json'; + JSON.parse(data_json); + + for(int i=0;i< data_json.lenght() ; i++) + { + + + } + + */ + [{ + + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.324131680599035,48.84047701059822] + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.349687662850922,48.84999108988611] + } + } + , + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.3208972664354426,48.839071701986974] + } + } + , + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.32572664354426,48.839071701986974] + } + } + , + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.3208972664354426,48.837071701986974] + } + } + , + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.3228972664354426,48.839071701986974] + } + } + , + + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.3208972664354426,48.838071701986974] + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [ 2.350557261225964,48.839453243356566] + } + } + , { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [2.3208424351947032, 48.83277114899898] + } + } + , { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [2.320532254279327, 48.848322756076534] + } + } + , { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [2.327883537485143, 48.85673558758745] + } + } + , { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [2.322009922753433, 48.83449476041992] + } + } + , + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [2.305836800298361,48.833184935331346] + } + }] + + } + }, + "layout": { + 'visibility': 'visible' + + }, + 'paint': { + 'circle-radius': 7, + 'circle-color': 'rgba(55,148,179,0.6)' + } + }); + +}); + + + </script> + + + + </div>