Leaflet Locate test

by marcus211

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.css" />

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.js" charset="utf-8"></script>




<div id='map'></div>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:600px; height:400px;}

JavaScript

var mbAttr = mbAttr = '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
            mbUrl = 'https://api.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFyY3VzMjExIiwiYSI6ImNqaTA4ajlqODE1bjczdnBra2dnNGZnaGIifQ.0kEccLVz8lRDsZmsRigh7A';

	var	streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});

    var map = L.map('map', {
        center: [25.0465592,121.5133752],
        zoom: 12,
        zoomControl:false,
        doubleClickZoom: false,
        layers: streets
    });

    
var MyControl = L.Control.extend({
    options: {
        position: 'topright'
    },

    onAdd: function (map) {
        // create the control container with a particular class name
        var container = L.DomUtil.create('div', 'my-custom-control');

        // ... initialize other DOM elements, add listeners, etc.

        return container;
    }
});

map.addControl(new MyControl());