Skip to content
Snippets Groups Projects
Select Git revision
  • master default
1 result
Blame Permalink
Dotmap.html 3.50 KiB 
<html>
  
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
  <link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />

  <style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}  
    
 #legend {
        left : 1%;
        padding: 10px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.10);
            line-height: 2Opx;
            margin-bottom: 50px;
            width:210px;
			height: 110px;
			background-color: #ffffff;
     		opacity: 0.7;
            font-size: 15;
        }
        .legend-key {
            display:inline-block;
            border-radius: 20%;
            width: 10px;
            height: 10px;
            margin-right: 5px;
        }
    
    
  </style>

  </head>

  <body> 
    
  <div id="map"></div>
   <div class='map-overlay' id='legend'><hR><b>311 - Type of report</b> <hR> </div>

   
<script>
   
      //Appel et configuration de la carte
    
var map = new mapboxgl.Map({
  container: 'map',
  style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte 
  zoom: 12, // Zoom
  center: [2.335, 48.854],  // Centrage carte
  pitch: 10, // Inclinaison carte
  bearing: 0,  // Rotation carte
  minZoom:12
    });
    
  // Add personnal data (GEOJSON)
      
map.on('load', function () {   
   
  // Configuration légende

  map.getCanvas().style.cursor = 'default';
    map.getCanvas().style.cursor = 'default';
    var layers = ['<B>Tags</b> > 26 776', '<b>Cleanliness</b> > 31 783', '<b>Bulky objects</b> > 15 925'];
    var colors = ['#fbb03b', '#0074D9', '#2ECC40'];
    for (i=0; i<layers.length; i++) {
        var layer = layers[i] + " reports";
        var color = colors[i];
        var item = document.createElement('div');
        var key = document.createElement('span');
        key.className = 'legend-key';
        key.style.backgroundColor = color;
        var value = document.createElement('span');
        value.innerHTML = layer;
        item.appendChild(key);
        item.appendChild(value);
        legend.appendChild(item);
    }
     // ADD reporting layer
  
  map.addSource('Stations', {
            type: 'geojson',
            data: 'https://raw.githubusercontent.com/mastersigat/data/main/DMR.geojson' 
        });

     map.addLayer({
            'id': 'Stations',
            'type': 'circle',
            'source': 'Stations',
           'paint': {
            'circle-radius': {
                'base': 0.6,
                'stops': [[12, 1.5], [14, 2], [20, 4]]},
                'circle-color': [
                'match',
                 ['get', 'type'],
                'A', '#fbb03b',
                'B', '#0074D9',
                'C', '#2ECC40',
                 /* other */ '#ccc'
            ]
        } 
    });

       // Add arrondissements

       map.addSource('lignes', {
            type: 'geojson',
            data: 'https://raw.githubusercontent.com/mastersigat/data/main/arrondissements.geojson' 
        });

     map.addLayer({
            'id': 'Lignes',
            'type': 'line',
            'source': 'lignes',
            'paint': {'line-width': 1,
                     'line-color': '#111111'}
     });   
         });
  
     
	
    // Ajout controle de navigation et echelle 
  
map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));  
  
map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
  
  
</script>
    
</body>
</html>