SHARE
TWEET

mapbox mono

a guest Apr 18th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
  4. <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
  5. <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  6.  
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta charset='utf-8' />
  10.     <title>Monopoly!</title>
  11.     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  12.     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
  13.     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
  14.     <script src='http://mapbox-gl-inspect.lukasmartinelli.ch/dist/mapbox-gl-inspect.min.js'></script>
  15.     <link href='http://mapbox-gl-inspect.lukasmartinelli.ch/dist/mapbox-gl-inspect.css' rel='stylesheet' />
  16.     <style>
  17.         body { margin:0; padding:0; }
  18.         #map { position:absolute; top:0; bottom:0; width:100%; }
  19.  
  20.     </style>
  21.  
  22.  
  23. </head>
  24. <body>
  25. <style>
  26.     #features
  27.     {
  28.         position: absolute;
  29.         top: 0;
  30.         right: 0;
  31.         bottom: 0;
  32.         width: 300px;
  33.         overflow: auto;
  34.         background: rgba(255, 255, 255, 0.8);
  35.     }
  36.     #map canvas {
  37.         cursor: crosshair;
  38.     }
  39.  
  40. </style>
  41. <div id='map'></div>
  42. <pre id ='features'></pre>
  43. <script>
  44.  
  45.     mapboxgl.accessToken = 'pk.eyJ1IjoiYW50b240NjMwNCIsImEiOiJjanR5YXo5dnkwZnUzM3ltaDk2eWUwMXR0In0.Q_g0aVKQuuAZSMlulM5h9Q';
  46.     var map = window.map = new mapboxgl.Map({
  47.         style: 'mapbox://styles/mapbox/light-v10',
  48.         center: [-74.0066, 40.7135],
  49.         zoom: 15.5,
  50.         pitch: 45,
  51.         bearing: -17.6,
  52.         container: 'map'
  53.     });
  54.  
  55. /*
  56. Here they talk about the problem with non unique ids.
  57. https://github.com/mapbox/mapbox-gl-js/issues/7038
  58. https://blog.mapbox.com/going-live-with-electoral-maps-a-guide-to-feature-state-b520e91a22d
  59.  
  60.  */
  61.  
  62.  
  63.     map.on('click', '3d-buildings',function(e) {   // When clicking on any building, adds a marker.
  64.         var features = map.queryRenderedFeatures(e.point, '3d-buildings');
  65.         var point = turf.point([e.lngLat.lng, e.lngLat.lat]);           //Makes it to a checkable point.
  66.         var polygon = turf.polygon(features[0].geometry.coordinates);   //Takes a polygon and makes it possible to use point in polygon.
  67.  
  68.         console.log(e);
  69.         console.log(features);
  70.         console.log(polygon);
  71.  
  72.         if (turf.booleanPointInPolygon(point, polygon)) {   //Takes a point and check whether it is in the polygon or not
  73.             // Only the form on the ground, not on the middle and so on. won't affect the number of painted buildings...
  74.             //Can be removed, didn't make anything better.
  75.             if (features[0].state.poo == "#ae2029") {
  76.                 map.setFeatureState({
  77.                     id: features[0].id,        // This will set the color on all features with identical ID. Don't know how to remove unwanted ID's.
  78.                     source: features[0].source,
  79.                     sourceLayer: features[0].sourceLayer
  80.                 }, {poo: "#fff",
  81.                     position: features[0].geometry.coordinates,
  82.                     height: features[0].properties.height,
  83.                     min_height: features[0].properties.min_height});
  84.             } else {
  85.                 map.setFeatureState({
  86.                     id: features[0].id,
  87.                     source: features[0].source,
  88.                     sourceLayer: features[0].sourceLayer
  89.                 }, {poo: "#ae2029",
  90.                     position: features[0].geometry.coordinates,
  91.                     height: features[0].properties.height,
  92.                     min_height: features[0].properties.min_height});
  93.             }
  94.         }
  95.  
  96.         console.log(map.queryRenderedFeatures(e.point,{layers:['3d-buildings']}));  //GeoJSON
  97.         new mapboxgl.Popup()
  98.             .setLngLat([-74.0066, 40.7135])
  99.             .setHTML(features[0].id)
  100.             .addTo(map);
  101.         document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
  102.  
  103.     });
  104.  
  105.  
  106.     map.on('load', function() {
  107. // Insert the layer beneath any symbol layer.
  108.  
  109.         var layers = map.getStyle().layers;
  110.  
  111.         var labelLayerId;
  112.         for (var i = 0; i < layers.length; i++) {
  113.             if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
  114.                 labelLayerId = layers[i].id;                                // gets the layer.
  115.                 break;
  116.             }
  117.         }
  118.  
  119.             map.addLayer({
  120.  
  121.                 'id': '3d-buildings',
  122.                 'source': 'composite',
  123.                 'source-layer': 'building', // The source is buildings
  124.                 'filter': ['==', 'extrude', 'true'],
  125.                 'type': 'fill-extrusion',
  126.                 'visible': 'none',
  127.                 'minzoom': 15,
  128.                 'paint': {
  129.                     'fill-extrusion-color': ["feature-state", "poo"],
  130.  
  131. // use an 'interpolate' expression to add a smooth transition effect to the
  132. // buildings as the user zooms in
  133.                     'fill-extrusion-height': [
  134.                         "interpolate", ["linear"], ["zoom"],
  135.                         3, 1,
  136.                         10, ["get", "height"]  //Gets the source layer building height.
  137.                     ],
  138.                     'fill-extrusion-base': [
  139.                         "interpolate", ["linear"], ["zoom"],
  140.                         3, 1,
  141.                         10, ["get", "min_height"]       // Gets the source layer building minimumheight
  142.                     ],
  143.                     'fill-extrusion-opacity': 0.5
  144.                 }
  145.             }, labelLayerId);
  146.  
  147.     });
  148.  
  149. </script>
  150. </body>
  151. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top