This is a somewhat hacky way of producing rounded labels in Mapbox-GL-JS. They are drawn as Markers, using queryRenderedFeatures to synchronise with the source data.
stevage
/ gist:5b01d6c9aa32aa48f9bd46ecf0fe77e6
Created
January 8, 2020 02:35
LGAs in a select element
This file contains 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
| <select> | |
| <option value="">- Australian Capital Territory</option> | |
| <option value="89399">Unincorporated ACT</option> | |
| <option value="89499">No usual address (ACT)</option> | |
| <option value="89799">Migratory - Offshore - Shipping (ACT)</option> | |
| <option value="">- New South Wales</option> | |
| <option value="10050">Albury (C)</option> | |
| <option value="10130">Armidale Regional (A)</option> | |
| <option value="10250">Ballina (A)</option> | |
| <option value="10300">Balranald (A)</option> |
This file contains 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' /> | |
| <title>Animating a user highlight</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.51.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } |
We can make this file beautiful and searchable if this error is corrected: It looks like row 4 should actually have 23 columns, instead of 13 in line 3.
This file contains 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
| "Station Name","Current Output (MW)",Region,"Most Recent Output Time (AEST)","Current % of Max Cap","Current % of Reg Cap","Max Cap (MW)","Reg Cap (MW)","Max ROC/Min","Unit Size (MW)","Physical Unit No.",Participant,"Dispatch Type",Category,Classification,"Fuel Source - Primary","Fuel Source - Descriptor","Technology Type - Primary","Technology Type - Descriptor",Aggregation,DUID,Lat,Lon | |
| "Butlers Gorge Power Station",11.999999,TAS1,2018-10-02T02:00:00+0000,80.00,83.33,15,14.4,,14.4,1,"Hydro-Electric Corporation trading as Hydro Tasmania",Generator,Market,Non-Scheduled,Hydro,Water,Renewable,"Hydro - Gravity",N,BUTLERSG,-42.26689799999997,146.2617580000001 | |
| "Capital Wind Farm",0.0,NSW1,2018-10-02T02:00:00+0000,0.00,0.00,140,140,,2,1-67,"Infigen Energy Markets Pty Limited",Generator,Market,Non-Scheduled,Wind,Wind,Renewable,"Wind - Onshore",N,CAPTL_WF,-35.16603062099995,149.51856862600005 | |
| "Cathedral Rocks Wind Farm",5.43,SA1,2018-10-02T02:00:00+0000,8.23,8.23,66,66,,2,1-33,"Cathedral Rocks Wind Farm Pty Ltd",Gener |
This file contains 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' /> | |
| <title>Display a map</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.46.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } |
This file contains 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" /> | |
| <title>Multitouch Test</title> | |
| <link rel="stylesheet" href="//necolas.github.io/normalize.css/7.0.0/normalize.css" /> | |
| <link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css" /> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> |
This file contains 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
| { | |
| "version": 8, | |
| "name": "OCZen", | |
| "metadata": {}, | |
| "sources": { | |
| "tilezen": { | |
| "type": "vector", | |
| "tiles": [ | |
| "https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4" | |
| ] |
This file contains 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
| { | |
| "version": 8, | |
| "name": "OCZen", | |
| "metadata": {}, | |
| "sources": { | |
| "tilezen": { | |
| "type": "vector", | |
| "tiles": [ | |
| "https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4" | |
| ] |
This file contains 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
| license: mit |
This file contains 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
| license: mit |
NewerOlder