mapbox-extensions

mapbox-extensions 中文

mapboxgl controls : measure、switch map、switch layers、doodle、back ...

DEMO

examples

usage

CDN

<script src="https://cdn.jsdelivr.net/npm/mapbox-extensions@1.3.14/dist/mapbox-extensions.js"></script>
<link href="https://cdn.jsdelivr.net/npm/mapbox-extensions@1.3.14/dist/index.css" rel="stylesheet">

NODE

npm install / yarn add  mapbox-extensions

import { SwitchLayerControl } from 'mapbox-extensions'
import 'mapbox-extensions/dist/index.css'

Give a Star! ⭐

If you like or are using this project to learn or start your solution, please give it a star. Thanks!

features

Measure

map.addControl(new MeasureControl({
    horizontal : true,         //default false   
    btnBgColor : 'red',        //default '#ffffff'
    btnActiveColor:'red',      //default '#ddd'
    geometryClick:true,        //defualt false 
    enableModes:['LineString'],//default all
    onStart:()=>{},            
    onStop:()=>{},             
    measurePointOptions:{      
    },
    measureLineStringOptions:{ 
    },
    measurePolygonOptions:{    
    }
}))

mouse operation

• left click : add a point
• right click : remove a point
• left double click : finish measure and start next

Back to origin

map.addControl(new BackToOriginControl({}))

Switch Map with swtch-layer

map.addControl(new SwitchMapControl({
    satelliteOption:{        
        name: "satellite",  
        textColor : 'red',   
        backgroundImage : "",
    },
    showSatelliteDefault:true, 
    extra:{  // default undefined, similar to SwitchLayerControlOptions
        nailActiveColor : "red" 
    }
}));

Switch Layer

map.addControl(new SwitchLayerControl({
    name:"Layer Manager" ,       
    position:"top-left",     

    selectAndClearAll:true, 
    selectAllLabel:"select all",   
    clearAllLabel:"clear all",    

    showToTop:true,         
    topLayerId:"",          

    layerGroups:{           
        "layer group 1":{
            mutex:true,         
            collapse:true,      
            uiType:"SwitchBtn", 
            layers:[
               {
                 name:"layer1",   
                 layer: {},     
                 fixed:true,    
                 zoom:-100,   
                 easeToOptions:{},   
                 mutex:true,          
                 mutexIdentity:"t1",  
                 active:true,         
                 backgroundImage:"",  
                 backgroundImageActive:"",
 
                 onVisibleChange:(visible:boolean)=>{}
               }
            ]
        }
    }
}));

Extend

map.addControl(new ExtendControl({
    img1 : "",              
    img2 : "",              
    content : div,          
    position : "top-left",  
    mustBe : "pc",         

    onChange:(open:boolean)=>{}
}));

Doodle

map.addControl(new DoodleControl({

    name: '',           
    reName : '',        
    exitText : '',      
    lineColor : '',     
    lineWidth : 1,      
    polygonColor: '',   
    polygonOpacity : 1, 

    onStart: () => { measureControl.stop() },

    onDrawed: polygon => { () => { alert(JSON.stringify(polygon)) } },

    onClear:()=>{},

    onExit:()=>{}
}))

Location

map.addControl(new LocationControl({ fractionDigits: 4 }));

Zoom

map.addControl(new ZoomControl());

Eye

map.addControl(new EyeControl(map));

Grid

map.addControl(new GridControl({ show: true }));