Dark Tailwind + Mapbox GL 3D Example

Mapbox GL 3D Terrain / Globe / Streets

Below is a demonstration of a Mapbox GL map with 3D terrain and globe mode. Make sure to replace MAPBOX_ACCESS_TOKEN with your own.

        <script>

        mapboxgl.accessToken = 'MAPBOX_ACCESS_TOKEN';

        const map = new mapboxgl.Map({

          container: 'map',

          style: 'mapbox://styles/mapbox/streets-v12',

          zoom: 2,

          center: [0, 0],

          projection: 'globe' // Display the map as a globe

        });

        map.on('style.load', () => {

          // Turn on 3D terrain

          map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });

          map.addSource('mapbox-dem', {

            'type': 'raster-dem',

            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',

            'tileSize': 512,

            'maxzoom': 14

          });

        });

        </script>

Land Surveyors United Add-ons

1. Survey Equipment Tracker Widget

Tracks and displays all surveying equipment with maintenance schedules and calibration dates.

            <script type="text/javascript">

            function initEquipTracker() {

              return {

                template: '#equipment-tracker',

                data() {

                  return {

                    equipment: [],

                    maintenanceAlerts: []

                  };

                }

              };

            }

            </script>

2. Project GIS Integration

Embeds interactive GIS maps showing completed survey projects and current work areas.

            <div data-gis-integration 

              data-api-key="YOUR_API_KEY"

              data-coordinates="[latitude,longitude]">

            </div>

3. Survey Calculation Suite

Advanced calculation tools for coordinate geometry, traverse adjustments, and area calculations.

            <script src="https://api.landsurveyorsunited.com/calc-suite.js">

            const surveyCalc = new SurveyCalculator({

              precision: 4,

              units: 'meters',

              coordinateSystem: 'UTM'

            });

            </script>

4. Professional Certification Display

Dynamic badge system showing professional certifications, licenses, and continuing education credits.

            <div class="cert-display" 

              data-user-id="${userId}"

              data-verify-url="https://api.landsurveyorsunited.com/verify">

            </div>

5. Field Notes Digital Repository

Secure storage and display of digital field notes with OCR capabilities for hand-written notes.

            <field-notes-repository

              storage-path="/users/${userId}/fieldnotes"

              ocr-enabled="true"

              max-file-size="50MB">

            </field-notes-repository>

6. Survey Project Timeline

Interactive timeline showing project milestones, deadlines, and completion status.

            <survey-timeline

              data-projects='${JSON.stringify(projects)}'

              view-mode="month"

              allow-edit="true">

            </survey-timeline>

7. Client Communication Portal

Embedded communication system for client interactions and document sharing.

            <client-portal

              secure-channel="true"

              notification-enabled="true"

              file-sharing="true">

            </client-portal>

8. Survey Data Visualization Tool

3D visualization tool for survey data points and terrain modeling.

            <script>

            const viewer = new SurveyDataViewer({

              container: '#viewer-container',

              dataSource: '/api/survey-data',

              renderMode: '3D'

            });

            </script>

9. Equipment Rental Network

Peer-to-peer equipment rental and sharing system within the surveyor community.

            <rental-network

              location-aware="true"

              insurance-verified="true"

              payment-gateway="stripe">

            </rental-network>

10. Professional Network Analytics

Analytics dashboard showing professional network growth and engagement metrics.

            <network-analytics

              data-period="monthly"

              metrics="connections,endorsements,projects"

              visualization="graph">

            </network-analytics>