Buildingmaps.html 1.9 KB
Newer Older
Boris Mericskay's avatar
Boris Mericskay committed
1
2
3
4
<html>
  
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
Boris Mericskay's avatar
Boris Mericskay committed
5
6
7
8
9
  <meta charset='utf-8' />
    <title>MapLibreGL / Buildings 3D Map</title>
	
<script src='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.css' rel='stylesheet' />
Boris Mericskay's avatar
Boris Mericskay committed
10
11
12
13
14
15
16
17
18
19
20
21
  <style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}      
  </style>

  </head>

  <body> 
    
  <div id="map"></div>
   
<script>
   
Boris Mericskay's avatar
Boris Mericskay committed
22
23
24
      //Appel et configuration de la carte
    
var map = new maplibregl.Map({
Boris Mericskay's avatar
Boris Mericskay committed
25
26
27
28
29
30
31
32
33
  container: 'map',
  style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json', //Fond de carte 
  zoom: 15.3, // Zoom
  center: [-1.68, 48.106],  // Centrage carte
  pitch: 60, // Inclinaison carte
  bearing: -50,  // Rotation carte
  minZoom:14.5
    });
    
Boris Mericskay's avatar
Boris Mericskay committed
34
  // Ajout des données
Boris Mericskay's avatar
Boris Mericskay committed
35
36
      
map.on('load', function () {   
Boris Mericskay's avatar
Boris Mericskay committed
37
38
39


   //BATIMENTS 
Boris Mericskay's avatar
Boris Mericskay committed
40
41
42
43
44
45
46
47
48
49

map.addSource('Batiments', {
        type: 'geojson',
        data: 'https://raw.githubusercontent.com/mastersigat/data/main/BatiRennes.geojson'
    });
 
map.addLayer({
    'id': 'Batiments',
    'type': 'fill-extrusion',
    'source': 'Batiments',
Boris Mericskay's avatar
Boris Mericskay committed
50
51
52
	'paint': 
	{'fill-extrusion-color': '#A9A9A9', 
        'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
Boris Mericskay's avatar
Boris Mericskay committed
53
54
55
56
57
58
59
60
        'fill-extrusion-color': {
        'property': 'HAUTEUR',
        'stops': [
          [5, '#1a9850'],
          [7, '#91cf60'],
          [9, '#d9ef8b'],
          [12, '#ffffbf'],
      	  [16, '#fee08b'],
Boris Mericskay's avatar
Boris Mericskay committed
61
	  [20, '#fc8d59'],
Boris Mericskay's avatar
Boris Mericskay committed
62
          [30, '#d73027']]},
Boris Mericskay's avatar
Boris Mericskay committed
63
64
	 'fill-extrusion-opacity': 0.7,
         'fill-extrusion-base': 0}
Boris Mericskay's avatar
Boris Mericskay committed
65
66
    });
   
Boris Mericskay's avatar
Boris Mericskay committed
67
68
69
});
  
  
Boris Mericskay's avatar
Boris Mericskay committed
70

Boris Mericskay's avatar
Boris Mericskay committed
71
72
73
74
75
76
77
78
79
80
81
82
	
// Add navigation control and scale
  
var nav = new maplibregl.NavigationControl();
map.addControl(nav, 'top-left');

var scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: 'metric'
});
map.addControl(scale);
  
Boris Mericskay's avatar
Boris Mericskay committed
83
84
85
86
87
  
  
</script>
    
</body>
Boris Mericskay's avatar
Boris Mericskay committed
88
</html>