Created
June 9, 2024 07:44
-
-
Save dbrnz/86465af324f521eec177fe6f80b2ba61 to your computer and use it in GitHub Desktop.
Example showing problem with filter in MapLibre
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' /> | |
| <script src='https://unpkg.com/[email protected]/dist/maplibre-gl-dev.js'></script> | |
| <style> | |
| #map { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| // Create map | |
| var center = [0, 0]; | |
| var map = new maplibregl.Map({ | |
| container: 'map', | |
| style: "https://tile-vect.openstreetmap.fr/styles/basic/style.json", | |
| center, | |
| zoom: 18, | |
| maxZoom: 24, | |
| hash: true, | |
| preserveDrawingBuffer: true, | |
| }); | |
| map.on('load', async () => { | |
| // Add an image to use as a custom marker | |
| const image = await map.loadImage('https://maplibre.org/maplibre-gl-js/docs/assets/osgeo-logo.png'); | |
| map.addImage('custom-marker', image.data); | |
| map.addSource('markers', { | |
| 'type': 'geojson', | |
| 'data': { | |
| 'type': 'FeatureCollection', | |
| 'features': [ | |
| { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [0.7, -2.2] | |
| }, | |
| 'properties': {'zoom-count': [0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4]} | |
| }, | |
| { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [9.1, -3.0] | |
| }, | |
| 'properties': {'zoom-count': [0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4]} | |
| }, | |
| { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [8.9, -3.9] | |
| }, | |
| 'properties': {'zoom-count': [0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4]} | |
| }, | |
| { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [3.3, -3.1] | |
| }, | |
| 'properties': {'zoom-count': [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0]} | |
| } | |
| ] | |
| } | |
| }); | |
| // Add a symbol layer | |
| map.addLayer({ | |
| 'id': 'markers', | |
| 'type': 'symbol', | |
| 'source': 'markers', | |
| 'filter': ['let', 'index', ['min', ['floor', ['zoom']], 10], | |
| ['>', ['at', ['var', 'index'], ['get', 'zoom-count']], 0] | |
| ], | |
| 'layout': { | |
| 'icon-image': 'custom-marker', | |
| // get the year from the source's "year" property | |
| 'text-field': ['get', 'year'], | |
| 'text-font': [ | |
| 'Open Sans Semibold', | |
| 'Arial Unicode MS Bold' | |
| ], | |
| 'text-offset': [0, 1.25], | |
| 'text-anchor': 'top' | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment