Layer Stacking
Add a new GeoJSON layer below the map’s labels. The New England City and Town Areas data source is from the United States Census Cartographic Boundary Files<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE'; const map = new TrimbleMaps.Map({ container: 'map', style: TrimbleMaps.Common.Style.TRANSPORTATION, center: new TrimbleMaps.LngLat(-71.973, 43.61), zoom: 7.5, hash: true }); map.on('load', function() { let firstSymbolLayerId; const layers = map.getStyle().layers; for (let i = 0; i < layers.length; i++) { const layer = layers[i]; if (layer.type === 'symbol') { firstSymbolLayerId = layer.id; break; } } const origin = `${window.location.origin}`; let dataPath = 'maps-sdk/data'; if (origin === 'http://127.0.0.1:8080') { dataPath = 'data'; } const data = `${origin}/${dataPath}/cb_2018_us_necta_500k.geojson`; // Data source // New England City and Town Areas (NECTAs) // https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html map.addSource('new-england-city-town-areas', { 'type': 'geojson', 'data': data }); map.addLayer({ 'id': 'new-england-city-town-areas-fill', 'type': 'fill', 'source': 'new-england-city-town-areas', 'paint': { 'fill-color': '#EDBF8A', 'fill-opacity': 0.8 } // The addLayer method takes 2 arguments: the layer as an object, and a string // representing an existing layer's ID. The new layer will appear visually beneath the existing layer. // If the 2nd argument is not specified, the layer will appear visually above all other layers. // Insert the layer beneath the first symbol layer. }, firstSymbolLayerId); }); </script> </body> </html>
Layer Stacking
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE'; const map = new TrimbleMaps.Map({ container: 'map', style: TrimbleMaps.Common.Style.TRANSPORTATION, center: new TrimbleMaps.LngLat(-71.973, 43.61), zoom: 7.5, hash: true }); map.on('load', function() { let firstSymbolLayerId; const layers = map.getStyle().layers; for (let i = 0; i < layers.length; i++) { const layer = layers[i]; if (layer.type === 'symbol') { firstSymbolLayerId = layer.id; break; } } const origin = `${window.location.origin}`; let dataPath = 'maps-sdk/data'; if (origin === 'http://127.0.0.1:8080') { dataPath = 'data'; } const data = `${origin}/${dataPath}/cb_2018_us_necta_500k.geojson`; // Data source // New England City and Town Areas (NECTAs) // https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html map.addSource('new-england-city-town-areas', { 'type': 'geojson', 'data': data }); map.addLayer({ 'id': 'new-england-city-town-areas-fill', 'type': 'fill', 'source': 'new-england-city-town-areas', 'paint': { 'fill-color': '#EDBF8A', 'fill-opacity': 0.8 } // The addLayer method takes 2 arguments: the layer as an object, and a string // representing an existing layer's ID. The new layer will appear visually beneath the existing layer. // If the 2nd argument is not specified, the layer will appear visually above all other layers. // Insert the layer beneath the first symbol layer. }, firstSymbolLayerId); }); </script> </body> </html>