All examples By author By category About

mastersigat

Full window Github gist

#MapboxGL / Carte campus

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Store Locator</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
  <style>
  body {
          color:#404040;
          font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
          margin:0;
          padding:0;
          -webkit-font-smoothing:antialiased;
        }

* {
          -webkit-box-sizing:border-box;
          -moz-box-sizing:border-box;
          box-sizing:border-box;
        }

.sidebar {
          position:absolute;
          width:33.3333%;
          height:100%;
          top:0;left:0;
          overflow:hidden;
          border-right:1px solid rgba(0,0,0,0.25);
        }
        .pad2 {
          padding:20px;
        }

.map {
          position:absolute;
          left:33.3333%;
          width:66.6666%;
          top:0;bottom:0;
        }

h1 {
          font-size:22px;
          margin:0;
          font-weight:400;
          line-height: 20px;
          padding: 20px 2px;
        }

a {
          color:#404040;
          text-decoration:none;
        }

a:hover {
          color:#101010;
        }

.heading {
          background:#fff;
          border-bottom:1px solid #eee;
          min-height:60px;
          line-height:60px;
          padding:0 10px;
          background-color: #00853e;
          color: #fff;
        }

.listings {
          height:100%;
          overflow:auto;
          padding-bottom:60px;
        }

.listings .item {
          display:block;
          border-bottom:1px solid #eee;
          padding:10px;
          text-decoration:none;
		  h1 {
          font-size:22px;
          margin:0;
          font-weight:400;
          line-height: 20px;
          padding: 20px 2px;
        }

a {
          color:#404040;
          text-decoration:none;
        }

a:hover {
          color:#101010;
        }

.listings {
          height:100%;
          overflow:auto;
          padding-bottom:60px;
        }

.listings .item {
          display:block;
          border-bottom:1px solid #eee;
          padding:10px;
          text-decoration:none;
        }

.listings .item:last-child { border-bottom:none; }
        .listings .item .title {
          display:block;
          color:#00853e;
          font-weight:700;
        }

.listings .item .title small { font-weight:400; }
        .listings .item.active .title,
        .listings .item .title:hover { color:#8cc63f; }
        .listings .item.active {
          background-color:#f8f8f8;
        }
        ::-webkit-scrollbar {
          width:3px;
          height:3px;
          border-left:0;
          background:rgba(0,0,0,0.1);
        }
        ::-webkit-scrollbar-track {
          background:none;
        }
        ::-webkit-scrollbar-thumb {
          background:#00853e;
          border-radius:0;
        }

.marker {
          border: none;
          cursor: pointer;
          height: 56px;
          width: 56px;
          background-image: url(marker.png);
          background-color: rgba(0, 0, 0, 0);
        }

.clearfix { display:block; }
        .clearfix:after {
          content:'.';
          display:block;
          height:0;
          clear:both;
          visibility:hidden;
        }

/* Marker tweaks */
        .mapboxgl-popup {
          padding-bottom: 50px;
        }

.mapboxgl-popup-close-button {
          display:none;
        }
        .mapboxgl-popup-content {
          font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
          padding:0;
          width:180px;
        }
        .mapboxgl-popup-content-wrapper {
          padding:1%;
        }
        .mapboxgl-popup-content h3 {
          background:#91c949;
          color:#fff;
          margin:0;
          display:block;
          padding:10px;
          border-radius:3px 3px 0 0;
          font-weight:700;
          margin-top:-15px;
        }

.mapboxgl-popup-content h4 {
          margin:0;
          display:block;
          padding: 10px 10px 10px 10px;
          font-weight:400;
        }

.mapboxgl-popup-content div {
          padding:10px;
        }

.mapboxgl-container .leaflet-marker-icon {
          cursor:pointer;
        }

.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
          margin-top: 15px;
        }

.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
          border-bottom-color: #91c949;
        }
 
        }

.listings .item:last-child { border-bottom:none; }
        .listings .item .title {
          display:block;
          color:#00853e;
          font-weight:700;
        }

.clearfix { display:block; }
        .clearfix:after {
          content:'.';
          display:block;
          height:0;
          clear:both;
          visibility:hidden;
        }

/* Marker tweaks */
        .mapboxgl-popup {
          padding-bottom: 50px;
        }

.mapboxgl-popup-content h4 {
          margin:0;
          display:block;
          padding: 10px 10px 10px 10px;
          font-weight:400;
        }

.mapboxgl-popup-content div {
          padding:10px;
        }

.mapboxgl-container .leaflet-marker-icon {
          cursor:pointer;
        }

.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
          margin-top: 15px;
        }

.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
          border-bottom-color: #91c949;
        }

</style>
</head>

<body>
  <div class='sidebar'>
    <div class='heading'>
      <h1>Batiments</h1>
    </div>
    <div id='listings' class='listings'></div>
  </div>
  
  <div id='map' class='map'> </div>
  
  <script>

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
      if (this.parentNode) {
        this.parentNode.removeChild(this);
      }
    };
	
	
  }mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';

// This adds the map to your page
  var map = new mapboxgl.Map({
    // container id specified in the HTML
    container: 'map', 
    // style URL
    style: 'mapbox://styles/mapbox/light-v9', 
    // initial position in [long, lat] format
    center: [-1.701, 48.119],
	bearing:-20,
	pitch: 50,
    zoom: 16
  });

var stores = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "full_id": "r1223213",
        "osm_id": 1223213,
        "name": "relation"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.701577519623412,
          48.12076436529518
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "r2881677",
        "osm_id": 2881677,
        "name": "relation"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.698884635818622,
          48.119256250226655
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216524",
        "osm_id": 81216524,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.701172941991025,
          48.11996476678429
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "r5617644",
        "osm_id": 5617644,
        "name": "relation"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.70385323423901,
          48.11845331858342
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w331094132",
        "osm_id": 331094132,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.703449536622463,
          48.11878653871865
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w332028711",
        "osm_id": 332028711,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.701151357415048,
          48.119894323601905
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216374",
        "osm_id": 81216374,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.704017386767368,
          48.119899403843384
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216546",
        "osm_id": 81216546,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.70323955,
          48.11784655
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216549",
        "osm_id": 81216549,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702290177702228,
          48.11978953879256
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216386",
        "osm_id": 81216386,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.703317739548226,
          48.11775022379483
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216387",
        "osm_id": 81216387,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.703478244967156,
          48.11850887197555
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216763",
        "osm_id": 81216763,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702567157273616,
          48.11989320208812
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w353210792",
        "osm_id": 353210792,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.700874057493016,
          48.11825292665532
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w377055218",
        "osm_id": 377055218,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.703600753647069,
          48.119546786667584
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216404",
        "osm_id": 81216404,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.701771133291328,
          48.11893688449117
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w377120345",
        "osm_id": 377120345,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.703076218749357,
          48.120084735719566
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w377446991",
        "osm_id": 377446991,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.701715004653615,
          48.11973266053334
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w377446993",
        "osm_id": 377446993,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702090915541171,
          48.12012738431449
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w399122723",
        "osm_id": 399122723,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.704050950464091,
          48.12027648018863
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w400856427",
        "osm_id": 400856427,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.703324307923998,
          48.120663171641716
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w401735048",
        "osm_id": 401735048,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702580520208293,
          48.118478564924985
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w456378782",
        "osm_id": 456378782,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702476925069036,
          48.11862509336109
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w456378783",
        "osm_id": 456378783,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702517292876281,
          48.118251824833166
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w173206894",
        "osm_id": 173206894,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.703978556408234,
          48.12073929542416
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w81216629",
        "osm_id": 81216629,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.699460981428251,
          48.11962283439005
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w173206897",
        "osm_id": 173206897,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.700347807610862,
          48.11957079707403
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w173213949",
        "osm_id": 173213949,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.7031123464323,
          48.11823087908469
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "full_id": "w173213953",
        "osm_id": 173213953,
        "name": "way"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702724022946864,
          48.11770908326065
        ]
      }
    }
  ]
};

// APPEL DE LA CARTE

map.on('load', function (e) {
    // Add the data to your map as a layer
    map.addLayer({
      "id": "locations",
      "type": "symbol",
      // Add a GeoJSON source containing place coordinates and information.
      "source": {
        "type": "geojson",
        "data": stores
      }
    });
	
	
	// Ajout batiments
	
map.addSource('Batiments', {
        type: 'vector',
        url: 'mapbox://ninanoun.3nke6sl7'});
   
 
		 // Extrusion batiments 	  
	    
  map.addLayer({
    'id': 'Batiments',
    'type': 'fill-extrusion',
    'source': 'Batiments',
    'source-layer': 'batirennes2-1aq4sg',
    'layout': {'visibility': 'visible'},
    'paint':  {'fill-extrusion-color': '#7575a3',
               'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "hauteur"]],
            'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "min_height"]
            ],
            'fill-extrusion-opacity': .8}
  });
  
	     // Initialize the list
    buildLocationList(stores);
  });

// Configuration Pop-up
  
  map.on('click', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
      layers: ['locations']
    });

if (features.length) {
      var clickedPoint = features[0];
      // 1. Fly to the point
      flyToStore(clickedPoint);

// 2. Close all other popups and display popup for clicked store
      createPopUp(clickedPoint);

// 3. Highlight listing in sidebar (and remove highlight for all other listings)
     var activeItem = document.getElementsByClassName('active');
      if (activeItem[0]) {
        activeItem[0].classList.remove('active');
      }

var selectedFeature = clickedPoint.properties.full_id;
      
      for (var i = 0; i < stores.features.length; i++ ) {
        if (stores.features[i].properties.full_id === selectedFeature) {
            selectedFeatureIndex = i;
        }
      }

var listing = document.getElementById('listing-' + selectedFeatureIndex);
      listing.classList.add('active');

}
  });

function flyToStore(currentFeature) {
    map.flyTo({
      center: currentFeature.geometry.coordinates,
      zoom: 17
    });
  }

function createPopUp(currentFeature) {
    var popUps = document.getElementsByClassName('mapboxgl-popup');
    if (popUps[0]) popUps[0].remove();

var popup = new mapboxgl.Popup({closeOnClick: false})
      .setLngLat(currentFeature.geometry.coordinates)
      .setHTML('<h3>' + currentFeature.properties.full_id + '</h3>'+
        '<h4>' + currentFeature.properties.population + 'full_id</h4>')
      .addTo(map);
  }

// Configuration listing
  
  function buildLocationList(data) {
    for (i = 0; i < data.features.length; i++) {
      // Create an array of all the stores and their properties
      var currentFeature = data.features[i];
      // Shorten data.feature.properties to just `prop` so we're not
      // writing this long form over and over again.
      var prop = currentFeature.properties;
      // Select the listing container in the HTML
      var listings = document.getElementById('listings');
      // Append a div with the class 'item' for each store 
      var listing = listings.appendChild(document.createElement('div'));
      listing.className = 'item';
      listing.id = "listing-" + i;

// Create a new link with the class 'title' for each store 
      // and fill it with the store address
      var link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      link.dataPosition = i;
      link.innerHTML = 'Batiment   -  ' + prop.osm_id;

// Create a new div with the class 'details' for each store 
      // and fill it with the city and phone number
      var details = listing.appendChild(document.createElement('div'));
      details.innerHTML = 'ID OSM  /  '+ prop.full_id ;
      if (prop.name) {
        details.innerHTML += ' &middot; ' + prop.name + '   Géometrie OSM';
      }

link.addEventListener('click', function(e) {
        // Update the currentFeature to the store associated with the clicked link
        var clickedListing = data.features[this.dataPosition];

// 1. Fly to the point associated with the clicked link
        flyToStore(clickedListing);

// 2. Close all other popups and display popup for clicked store
        createPopUp(clickedListing);

// 3. Highlight listing in sidebar (and remove highlight for all other listings)
        var activeItem = document.getElementsByClassName('active');

if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');

});
    }
  }

</script>
</body>

</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js