Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
- <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
- <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
- <head>
- <meta charset="UTF-8">
- <meta charset='utf-8' />
- <title>Monopoly!</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.53.1/mapbox-gl.js'></script>
- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
- <script src='http://mapbox-gl-inspect.lukasmartinelli.ch/dist/mapbox-gl-inspect.min.js'></script>
- <link href='http://mapbox-gl-inspect.lukasmartinelli.ch/dist/mapbox-gl-inspect.css' rel='stylesheet' />
- <style>
- body { margin:0; padding:0; }
- #map { position:absolute; top:0; bottom:0; width:100%; }
- </style>
- </head>
- <body>
- <style>
- #features
- {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- width: 300px;
- overflow: auto;
- background: rgba(255, 255, 255, 0.8);
- }
- #map canvas {
- cursor: crosshair;
- }
- </style>
- <div id='map'></div>
- <pre id ='features'></pre>
- <script>
- mapboxgl.accessToken = 'pk.eyJ1IjoiYW50b240NjMwNCIsImEiOiJjanR5YXo5dnkwZnUzM3ltaDk2eWUwMXR0In0.Q_g0aVKQuuAZSMlulM5h9Q';
- var map = window.map = new mapboxgl.Map({
- style: 'mapbox://styles/mapbox/light-v10',
- center: [-74.0066, 40.7135],
- zoom: 15.5,
- pitch: 45,
- bearing: -17.6,
- container: 'map'
- });
- /*
- Here they talk about the problem with non unique ids.
- https://github.com/mapbox/mapbox-gl-js/issues/7038
- https://blog.mapbox.com/going-live-with-electoral-maps-a-guide-to-feature-state-b520e91a22d
- */
- map.on('click', '3d-buildings',function(e) { // When clicking on any building, adds a marker.
- var features = map.queryRenderedFeatures(e.point, '3d-buildings');
- var point = turf.point([e.lngLat.lng, e.lngLat.lat]); //Makes it to a checkable point.
- var polygon = turf.polygon(features[0].geometry.coordinates); //Takes a polygon and makes it possible to use point in polygon.
- console.log(e);
- console.log(features);
- console.log(polygon);
- if (turf.booleanPointInPolygon(point, polygon)) { //Takes a point and check whether it is in the polygon or not
- // Only the form on the ground, not on the middle and so on. won't affect the number of painted buildings...
- //Can be removed, didn't make anything better.
- if (features[0].state.poo == "#ae2029") {
- map.setFeatureState({
- id: features[0].id, // This will set the color on all features with identical ID. Don't know how to remove unwanted ID's.
- source: features[0].source,
- sourceLayer: features[0].sourceLayer
- }, {poo: "#fff",
- position: features[0].geometry.coordinates,
- height: features[0].properties.height,
- min_height: features[0].properties.min_height});
- } else {
- map.setFeatureState({
- id: features[0].id,
- source: features[0].source,
- sourceLayer: features[0].sourceLayer
- }, {poo: "#ae2029",
- position: features[0].geometry.coordinates,
- height: features[0].properties.height,
- min_height: features[0].properties.min_height});
- }
- }
- console.log(map.queryRenderedFeatures(e.point,{layers:['3d-buildings']})); //GeoJSON
- new mapboxgl.Popup()
- .setLngLat([-74.0066, 40.7135])
- .setHTML(features[0].id)
- .addTo(map);
- document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
- });
- 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; // gets the layer.
- break;
- }
- }
- map.addLayer({
- 'id': '3d-buildings',
- 'source': 'composite',
- 'source-layer': 'building', // The source is buildings
- 'filter': ['==', 'extrude', 'true'],
- 'type': 'fill-extrusion',
- 'visible': 'none',
- 'minzoom': 15,
- 'paint': {
- 'fill-extrusion-color': ["feature-state", "poo"],
- // use an 'interpolate' expression to add a smooth transition effect to the
- // buildings as the user zooms in
- 'fill-extrusion-height': [
- "interpolate", ["linear"], ["zoom"],
- 3, 1,
- 10, ["get", "height"] //Gets the source layer building height.
- ],
- 'fill-extrusion-base': [
- "interpolate", ["linear"], ["zoom"],
- 3, 1,
- 10, ["get", "min_height"] // Gets the source layer building minimumheight
- ],
- 'fill-extrusion-opacity': 0.5
- }
- }, labelLayerId);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement