Skip to content

Instantly share code, notes, and snippets.

@planemad
Last active April 18, 2025 16:16
Show Gist options
  • Save planemad/889e770590ebaa4e6190a33e90b34de7 to your computer and use it in GitHub Desktop.
Save planemad/889e770590ebaa4e6190a33e90b34de7 to your computer and use it in GitHub Desktop.
let layersConfig = [
{
id: 'streetmap',
title: 'Street Map रस्त्याचो नकासो',
description: 'Detailed street map sourced from <a href="https://www.openstreetmap.org/#map=11/15.4054/73.9280" target="_blank">OpenStreetMap contributors</a> and other data sources via <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/" target="_blank">Mapbox Streets</a> vector tiles.',
type: 'style',
headerImage: 'assets/map-layer-streetmap.png',
initiallyChecked: true,
layers: [
{ title: 'Places', sourceLayer: 'place_label' },
{ title: 'Landmarks', sourceLayer: 'poi_label' },
{ title: 'Buildings', sourceLayer: 'building' },
{ title: 'Structures', sourceLayer: 'structure' },
{ title: 'Roads', sourceLayer: 'road' },
{ title: 'Hillshading', sourceLayer: 'hillshade' },
{ title: 'Landcover', sourceLayer: 'landcover' },
{ title: 'Landuse', sourceLayer: 'landuse' },
{ title: 'Wetlands & National Parks', sourceLayer: 'landuse_overlay' },
{ title: 'Waterways', sourceLayer: 'waterway' },
{ title: 'Waterbodies', sourceLayer: 'water' },
]
},
{
title: 'Community Pins',
description: 'Pin your notes on the map for the rest of the community to see',
headerImage: 'assets/map-layer-pins.png',
type: 'markers',
id: 'community-pins',
dataUrl: 'https://docs.google.com/spreadsheets/d/1Y0l4aSIdks8G3lmxSxSKxuzLoARL-FCiYbTL9a0b3O0/gviz/tq?tqx=out:json&tq&gid=0',
attribution: 'Collected by amche.in | <a href="https://docs.google.com/spreadsheets/d/1Y0l4aSIdks8G3lmxSxSKxuzLoARL-FCiYbTL9a0b3O0/edit?resourcekey=&gid=485622101#gid=485622101">View Source Spreadsheet</a>',
style: {
'circle-color': '#FF4136',
'circle-radius': 8
},
inspect: {
title: 'Pin Details',
label: 'name',
fields: ['Location Name', 'Additional Notes (optional)', 'Timestamp_ago'],
fieldTitles: ['Name', 'Notes', 'Added'],
}
},
{
title: 'Cadastral Plot Boundaries',
description: 'Cadastral Boundaries from the <a href="https://landrecords.karnataka.gov.in/Service2/">Department of Land Records</a>. The map is provided for information purpose only.',
headerImage: 'assets/map-layer-survey.png',
type: 'vector',
id: 'plot',
url: 'https://indianopenmaps.fly.dev/not-so-open/cadastrals/karnataka/kgismaps/{z}/{x}/{y}.pbf',
sourceLayer: 'KGISMAPS_KN_Cadastrals',
maxzoom: 13,
attribution: '<a href="https://kgis.ksrsac.in/kgis1/portal.aspx">KGISMAPS Karnataka Cadastrals</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'text-font': ['Open Sans Bold'],
'text-field': [
"step",
["zoom"],
"",
12,
[
"to-string",
['get', 'surveynumberi']
]
],
'text-color': 'black',
'text-halo-color': 'white',
'text-halo-width': .5,
'text-halo-blur': 1,
'text-size': 13,
'fill-color': [
'interpolate',
['linear'],
['zoom'],
8, 'rgba(0, 0, 0, 0.05)',
13, 'rgba(0, 0, 0, 0.1)'
],
'line-color': 'black',
'line-width': [
'interpolate',
['linear'],
['zoom'],
8, [
'case',
['boolean', ['feature-state', 'selected'], false],
2,
['boolean', ['feature-state', 'hover'], false],
1.5,
0
],
13, [
'case',
['boolean', ['feature-state', 'selected'], false],
6,
['boolean', ['feature-state', 'hover'], false],
5,
.5
]
]
},
initiallyChecked: true,
inspect: {
id: 'KGISCadastralID',
title: 'Survey Number',
label: 'surveynumberi',
fields: ['VillageNam', 'TalNam', 'KGISVillageCode'],
fieldTitles: ['Village', 'Taluk', 'Village Code'],
customHtml: '<a href="https://landrecords.karnataka.gov.in/Service2/" target="_blank">View ROR in Bhoomi Online</a>'
}
},
{
id: 'village',
title: 'Village Boundaries',
headerImage: 'assets/map-layer-village.png',
description: 'Revenue village boundaries with <a href="https://lgdirectory.gov.in/" target="_blank">Local Government Directory</a> attributes.',
type: 'vector',
url: 'https://indianopenmaps.fly.dev/not-so-open/villages/lgd/{z}/{x}/{y}.pbf ',
sourceLayer: 'LGD_Villages',
maxzoom: 10,
attribution: '<a href="https://mapservice.gov.in/gismapservice/rest/services/BharatMapService/Village_Boundary/MapServer/0">NIC Bharatmaps GIS</a>, <a href="https://lgdirectory.gov.in/" target="_blank">Local Government Directory, Ministry of Panchayati Raj</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'text-field': ['get', 'vilnam_soi'],
'text-color': 'white',
'text-halo-color': 'black',
'text-halo-width': 5,
'text-size': 13,
'fill-color': [
'interpolate',
['linear'],
['zoom'],
8, 'rgba(0, 0, 0, 0)',
12, 'rgba(0, 0, 0, 0.1)'
],
'line-color': 'black',
'line-width': [
'interpolate',
['linear'],
['zoom'],
8, [
'case',
['boolean', ['feature-state', 'selected'], false],
1.5,
['boolean', ['feature-state', 'hover'], false],
1,
0
],
12, [
'case',
['boolean', ['feature-state', 'selected'], false],
3,
['boolean', ['feature-state', 'hover'], false],
2,
1
]
]
},
inspect: {
title: 'Village',
label: 'vilnam_soi',
id: 'OBJECTID',
fields: ['vil_lgd', 'gp_name', 'block_name', 'sdtname', 'dtname'],
fieldTitles: ['Village Code', 'Gram Panchayat', 'Block', 'Sub District', 'District']
}
},
{
id: 'municipal-wards',
title: 'Municipal Ward Boundaries',
headerImage: 'assets/map-layer-ulb-wards.png',
description: 'Ward boundaries for Panaji Municipal Corporation and Municipal Councils (partial coverage)',
type: 'vector',
url: 'https://indianopenmaps.fly.dev/not-so-open/urban/wards/sbm/{z}/{x}/{y}.pbf',
sourceLayer: 'SBM_Wards',
maxzoom: 12,
attribution: '<a href="https://sbm-g-esriindia1.hub.arcgis.com/">Swachh Bharat Mission GIS</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'text-field': ['get', 'wardcode'],
'text-color': 'white',
'text-halo-color': 'purple',
'text-halo-width': 5,
'text-size': 13,
'fill-color': [
'interpolate',
['linear'],
['zoom'],
16, 'rgba(0, 0, 0, 0.05)',
18, 'rgba(0, 0, 0, 0.1)'
],
'line-color': 'hsl(278, 82%, 57%)',
'line-width': [
'interpolate',
['linear'],
['zoom'],
12, [
'case',
['boolean', ['feature-state', 'selected'], false],
4,
['boolean', ['feature-state', 'hover'], false],
4,
1
],
18, [
'case',
['boolean', ['feature-state', 'selected'], false],
6,
['boolean', ['feature-state', 'hover'], false],
5,
3
]
]
},
inspect: {
title: 'Ward Number',
label: 'wardcode',
id: 'objectid',
fields: ['ulbname'],
fieldTitles: ['Urban Local Body']
}
},
{
title: 'Local Body Boundaries',
description: 'Municipal and Panchayat local body boundaries. Please see <a href="https://grammanchitra.gov.in/gm4MVC" target="_blank">Gramanchiitra</a> for panchayat demographic profile and information on elected representatives.',
headerImage: 'assets/map-layer-local-boundaries.png',
type: 'vector',
id: 'local-body',
url: 'https://indianopenmaps.fly.dev/not-so-open/panchayats/lgd/{z}/{x}/{y}.pbf',
sourceLayer: 'LGD_Panchayats',
maxzoom: 10,
attribution: '<a href="https://bharatmaps.gov.in/BharatMaps/Home/Map">LGD/Bharatmaps</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
initiallyChecked: true,
style: {
'text-field': ['get', 'gp_name'],
'text-color': 'white',
'text-halo-color': 'purple',
'text-halo-width': 5,
'text-size': 14,
'fill-color': [
'interpolate',
['linear'],
['zoom'],
8, 'rgba(0, 0, 0, 0)',
12, 'rgba(0, 0, 0, 0.1)'
],
'line-color': 'purple',
'line-dasharray': [6, 6],
'line-width': [
'interpolate',
['linear'],
['zoom'],
8, [
'case',
['boolean', ['feature-state', 'selected'], false],
1.5,
['boolean', ['feature-state', 'hover'], false],
1,
.1
],
12, [
'case',
['boolean', ['feature-state', 'selected'], false],
3.5,
['boolean', ['feature-state', 'hover'], false],
2.5,
1.5
]
],
},
inspect: {
title: 'Local Body Name',
label: 'gp_name',
id: 'OBJECTID',
fields: ['vilname11', 'blkname', 'sdtname', 'dtname', 'stname'],
fieldTitles: ['Village', 'Block', 'Sub District', 'District', 'State']
}
},
{
title: 'Assembly Constituencies',
description: 'Members of Legislative Assembly (MLA) constituencies.',
headerImage: 'assets/map-layer-assembly-boundaries.png',
type: 'vector',
id: 'assembly-constituencies',
url: 'https://indianopenmaps.fly.dev/not-so-open/constituencies/assembly/lgd/{z}/{x}/{y}.pbf ',
sourceLayer: 'LGD_Assembly_Constituencies',
maxzoom: 10,
attribution: '<a href="https://mapservice.gov.in/gismapservice/rest/services/BharatMapService/AC_PC/MapServer/2">LGD/Bharatmaps/ECI</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'text-field': ['get', 'ac_name'],
'text-color': 'white',
'text-halo-color': 'blue',
'text-halo-width': 5,
'text-size': 15,
'fill-color': [
'interpolate',
['linear'],
['zoom'],
8, 'rgba(0, 0, 0, 0)',
12, 'rgba(0, 0, 0, 0.1)'
],
'line-color': 'blue',
'line-dasharray': [6, 6],
'line-width': [
'interpolate',
['linear'],
['zoom'],
8, [
'case',
['boolean', ['feature-state', 'selected'], false],
1.5,
['boolean', ['feature-state', 'hover'], false],
1,
.1
],
12, [
'case',
['boolean', ['feature-state', 'selected'], false],
3.5,
['boolean', ['feature-state', 'hover'], false],
2.5,
1.5
]
],
},
inspect: {
title: 'Name',
label: 'ac_name',
id: 'OBJECTID',
fields: ['AC_ID', 'pc_name', 'dist_name', 'st_name'],
fieldTitles: ['Constituency Code', 'Parliamentary Constituency', 'District', 'State']
}
},
{
title: 'Parliamentary Constituencies',
description: 'Members of Parliament (MP) constituencies',
headerImage: 'assets/map-layer-parliament-boundaries.png',
type: 'vector',
id: 'parliamentary-constituencies',
url: 'https://indianopenmaps.fly.dev/not-so-open/constituencies/parliament/lgd/{z}/{x}/{y}.pbf ',
sourceLayer: 'LGD_Parliament_Constituencies',
maxzoom: 10,
attribution: '<a href="https://mapservice.gov.in/gismapservice/rest/services/BharatMapService/AC_PC/MapServer/1">LGD/Bharatmaps/ECI</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'text-field': ['get', 'pc_name'],
'text-color': 'white',
'text-halo-color': 'blue',
'text-halo-width': 5,
'text-size': 18,
'fill-color': [
'interpolate',
['linear'],
['zoom'],
8, 'rgba(0, 0, 0, 0)',
12, 'rgba(0, 0, 0, 0.1)'
],
'line-color': 'blue',
'line-dasharray': [6, 6],
'line-width': [
'interpolate',
['linear'],
['zoom'],
8, [
'case',
['boolean', ['feature-state', 'selected'], false],
4,
['boolean', ['feature-state', 'hover'], false],
4,
3
],
12, [
'case',
['boolean', ['feature-state', 'selected'], false],
6,
['boolean', ['feature-state', 'hover'], false],
6,
5
]
],
},
inspect: {
title: 'Name',
label: 'pc_name',
id: 'OBJECTID',
fields: ['dist_name', 'st_name'],
fieldTitles: ['District', 'State']
}
},
{
title: 'Rivers',
description: 'Rivers and streams with stream order',
headerImage: 'assets/map-layer-rivers.png',
type: 'vector',
id: 'rivers',
url: 'https://indianopenmaps.fly.dev/streams/wris/{z}/{x}/{y}.pbf',
sourceLayer: 'wris_streams',
maxzoom: 11,
attribution: '<a href="https://indiawris.gov.in/wris/">India WRIS</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'line-color': '#0084f7',
'line-opacity': 0.8,
'line-width': [
'interpolate',
['linear'],
['zoom'],
8, [
'case',
['has', 'ordsh'],
['*', 0.5, ['to-number', ['get', 'ordsh']]],
0 // default width for undefined stream order
],
14, [
'case',
['has', 'ordsh'],
['*', 2, ['to-number', ['get', 'ordsh']]],
1 // default width for undefined stream order
],
18, [
'case',
['has', 'ordsh'],
['*', 1, ['to-number', ['get', 'ordsh']]],
1 // default width for undefined stream order
]
]
},
inspect: {
title: 'Name',
label: 'rivname',
fields: ['bacode', 'ordsh'],
fieldTitles: ['Basin Code', 'Stream Order']
}
},
{
id: 'watershed',
title: 'Watershed Boundaries',
headerImage: 'assets/map-layer-watersheds.png',
description: 'Watershed Boundaries',
type: 'vector',
url: 'https://indianopenmaps.fly.dev/watersheds/wris/{z}/{x}/{y}.pbf',
sourceLayer: 'wris_watershed',
maxzoom: 10,
attribution: '<a href="https://indiawris.gov.in/wris/#/riverBasins">India Water Resources Information System, Ministry of Jal Shakti</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'fill-color': 'rgba(0, 0, 0, 0)',
'line-color': 'blue',
'line-width': [
'interpolate',
['linear'],
['zoom'],
12, 5,
18, 9
]
},
inspect: {
id: 'objectid',
title: 'Watershed Code',
label: 'wsconc'
}
},
{
id: 'micro-watersheds',
title: 'Micro Watershed Boundaries',
headerImage: 'assets/map-layer-micro-watersheds.png',
description: 'Micro Watershed Boundaries',
type: 'vector',
url: 'https://indianopenmaps.fly.dev/micro-watersheds/priorities/slusi/{z}/{x}/{y}.pbf',
sourceLayer: 'SLUSI_Priority_MicroWatersheds',
maxzoom: 10,
attribution: '<a href="https://soilhealth.dac.gov.in/slusi-visualisation/">Soil and Land Use Survey of India, Ministry of Agriculture and Farmers Welfare</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'fill-color': [
'match',
['get', 'Priority'],
'Very High', 'rgba(255, 0, 0, 0.8)', // Bright red - most visible
'High', 'rgba(255, 140, 0, 0.7)', // Orange
'Medium', 'rgba(255, 255, 0, 0.6)', // Yellow
'Low', 'rgba(144, 238, 144, 0.5)', // Light green
'Very Low', 'rgba(0, 100, 0, 0.4)', // Dark green - least visible
'rgba(128, 128, 128, 0.5)' // Default gray for unknown values
],
'fill-opacity': 0.4,
'line-color': 'blue',
'line-width': [
'interpolate',
['linear'],
['zoom'],
12, 2,
18, 4
]
},
inspect: {
title: 'Micro Watershed Code',
label: 'HYDRO_UNIT',
fields: ['Priority'],
fieldTitles: ['Watershed Priority']
}
},
{
title: 'Reserve Forests',
description: 'Forest beat boundaries',
headerImage: 'assets/map-layer-forest.png',
type: 'vector',
id: 'forests',
url: 'https://indianopenmaps.fly.dev/not-so-open/forests/beats/fsi/{z}/{x}/{y}.pbf',
sourceLayer: 'FSI_Beats',
maxzoom: 11,
attribution: '<a href="https://bharatmaps.gov.in/BharatMaps/Home/Map">Bharatmaps/Forest Survey of India</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'line-color': '#006400',
'line-width': [
'interpolate',
['linear'],
['zoom'],
14, [
'case',
['boolean', ['feature-state', 'selected'], false],
4,
['boolean', ['feature-state', 'hover'], false],
3,
1
],
18, [
'case',
['boolean', ['feature-state', 'selected'], false],
8,
['boolean', ['feature-state', 'hover'], false],
5,
2
]
],
'fill-color': 'green',
'fill-opacity': 0.7
},
inspect: {
id: 'OBJECTID_12',
title: 'Forest Range',
label: 'Beat_Name',
fields: ['Range'],
}
},
{
title: 'Mining Leases',
description: 'Major mining lease boundaries',
headerImage: 'assets/map-layer-mines.png',
type: 'vector',
id: 'mining',
url: ' https://indianopenmaps.fly.dev/not-so-open/mining/leases/major/ncog/{z}/{x}/{y}.pbf',
sourceLayer: 'NCOG_Major_Mining_Leases',
maxzoom: 11,
attribution: '<a href="https://mss.ncog.gov.in/login">National Centre of Geo-Informatics(NCOG) Mining Surveillance System</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
style: {
'text-field': [
"step",
["zoom"],
[
"to-string",
['get', 'mineral_na']
],
12,
["concat",
[
"to-string",
['get', 'mine_name']
],
'\n',
[
"to-string",
['get', 'mineral_na']
]]
,
15,
["concat",
'LEASEE:',
'\n',
[
"to-string",
['get', 'name_of_le']
]
]
],
'text-color': [
'match',
['get', 'mineral_na'],
'Gold',
'black',
'white' // default color for all other cases
],
'text-halo-color': [
'match',
['get', 'mineral_na'],
['Iron Ore', 'Iron'],
'brown',
['Bauxite'],
'blue',
['Mangenese', 'Manganese', 'Mangnese Ore'],
'magenta',
['Gold'],
'gold',
['Magnesite'],
'red',
['Limestone', 'Limeshell'],
'green',
'black' // default color for all other cases
],
'text-halo-width': 2,
'text-size': 14,
'line-color': [
'match',
['get', 'mineral_na'],
['Iron Ore', 'Iron'],
'brown',
['Bauxite'],
'blue',
['Mangenese', 'Manganese', 'Mangnese Ore'],
'magenta',
['Gold'],
'gold',
['Magnesite'],
'red',
['Limestone', 'Limeshell'],
'green',
'black' // default color for all other cases
],
'line-width': [
'interpolate',
['linear'],
['zoom'],
14, [
'case',
['boolean', ['feature-state', 'selected'], false],
4,
['boolean', ['feature-state', 'hover'], false],
3,
1
],
18, [
'case',
['boolean', ['feature-state', 'selected'], false],
8,
['boolean', ['feature-state', 'hover'], false],
5,
2
]
],
'fill-color': [
'match',
['get', 'mineral_na'],
['Iron Ore', 'Iron'],
'brown',
['Bauxite'],
'blue',
['Mangenese', 'Manganese', 'Mangnese Ore'],
'magenta',
['Gold'],
'gold',
['Magnesite'],
'red',
['Limestone', 'Limeshell'],
'green',
'black' // default color for all other cases
],
'fill-opacity': 0.4
},
inspect: {
id: 'mine_code',
title: 'Mine Name',
label: 'mine_name',
fields: ['mineral_na', 'name_of_le', 'reg_no', 'vil_name11', 'mine_code'],
fieldTitles: ['Mineral Name', 'Name of Leasee', 'Registration Number', 'Village Name', 'Mine Code']
}
},
{
title: 'Bengaluru Masterplan',
description: 'USE AT YOUR OWN RISK. The proposed landuse maps of the <a href="https://bdabangalore.org/uploads/files/TPM_Documents/BangaloreMasterPlan2015_VisionDocument.pdf">Revised Master Plan 2015 of Bengaluru</a> prepared by <a href="https://eng.bdabangalore.org/town-planning-section.html">Bangalore Development Authority (BDA)</a>. See <a href="https://eng.bdabangalore.org/uploads/files/EODB/Additional%20document/Zonal%20Regulation%202007.pdf">zoning and landuse regulations</a> for more information',
headerImage: 'assets/map-layer-community-maps.png',
type: 'tms',
id: 'bda-masterplan',
url: 'https://mapwarper.net/mosaics/tile/2147/{z}/{x}/{y}.png',
attribution: '<a href="https://bdabangalore.org/ಪರಿಷ್ಕೃತ-ಮಹಾಯೋಜನೆ-2015.html">Bengaluru RMP 2015 PLU</a> georeferenced via <a href="https://mapwarper.net/layers/2147">Mapwarper</a>'
},
{
title: 'SOI Toposheets',
description: 'Survey of India',
headerImage: 'assets/map-layer-soi.png',
legendImage: 'assets/map-layer-soi-legend.png',
type: 'tms',
id: 'goa-soi-map',
url: 'https://indianopenmaps.fly.dev/soi/osm/{z}/{x}/{y}.webp',
attribution: '<a href="https://onlinemaps.surveyofindia.gov.in/FreeMapSpecification.aspx">Open Series Toposheets from Survey of India</a>',
},
{
id: 'osm',
title: 'OpenStreetMap',
description: 'OpenStreetMap Data',
headerImage: 'assets/map-layer-osm.png',
type: 'tms',
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
description: 'Map data contributed by the <a href="https://www.openstreetmap.in/">OpenStreetMap India Community.',
attribution: '© OpenStreetMap contributors'
},
{
title: '3D Terrain',
description: 'Terrain Controls',
headerImage: 'assets/map-layer-terrain.png',
type: 'terrain',
initiallyChecked: true
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment