JSFiddle - React, Tailwind, and code Playground

by alsaleem

HTML

<link rel="stylesheet" href="http://dev.camptocamp.com/files/fredj/geolocation-example/resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dev.camptocamp.com/files/fredj/geolocation-example/resources/bootstrap/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol-debug.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
<link rel="stylesheet" href="http://dev.camptocamp.com/files/fredj/geolocation-example/resources/layout.css">
<body onload="init()">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container"> <a class="brand" href="./">OpenLayers 3 Custom Control Example</a>

            </div>
        </div>click on the <b>"Cycle"</b>-button to trigger the custom Control</div>
    <div id="myCustomControl"></div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>Modified from example at: dev.camptocamp.com/files/fredj/geolocation-example/examples/custom-controls.html</div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                 <h4 id="title">Custom controls</h4>

                <p id="shortdesc">This example shows how to create custom controls.</p>
                <div id="docs">
                    <p>This example creates a "zoom to extent" button. Per default, the zoom extent control use the map projection extent.</p>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

.zoom-extent {
    position: absolute;
    top: 65px;
    left: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 2px;
}
.zoom-extent a {
    display: block;
    margin: 1px;
    padding: 0;
    color: white;
    font-size: 18px;
    font-family:'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height: 22px;
    width: 22px;
    line-height: 19px;
    background: rgba(0, 60, 136, 0.5);
}
.zoom-extent a:hover {
    background: rgba(0, 60, 136, 0.7);
}
.zoom-to {
    border-radius: 2px 2px 0 0;
}
.zoom-to:before {
    content:"E";
}
.custom_anchor:before {
    content:"Cycle";
}
#myCustomControl {
    width:100px;
    height:30px;
    /*background:red;   */
}
.myControl {
    width:25px;
    height:25px;
    background:green;
}
.myCustomControl {
    position: absolute;
    top: 0;
    left: 0;
    width:35px;
    height:20px;
    background:yellow;
    border:10px solid red;
    padding:2px;
}

JavaScript

var view, map, myControl, cycle;
var already_loaded = 0;

function init() {
    /**
     * Define a namespace for the application.
     */
    window.app = {};
    var app = window.app;


    //
    // Create map, giving it a zoom extent control.
    //

    view = new ol.View({
        center: [0, 0],
        zoom: 2
    });

    map = new ol.Map({
        controls: ol.control.defaults({}, [

        ]),
        layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })],
        //renderers: ol.RendererHints.createFromQueryData(),
        target: 'map',
        view: view
    });



    // Preparation for the custom control:

    var anchor_element = document.createElement('a');
    anchor_element.href = '#custom_href';
    anchor_element.className = 'custom_anchor';

    var this_ = this;
    var handleCustomControl = function (e) {
        myControl.customFunction(e);
    };

    anchor_element.addEventListener('click', handleCustomControl, false);
    anchor_element.addEventListener('touchstart', handleCustomControl, false);

    var custom_element = document.createElement('div');
    custom_element.className = 'myCustomControl';
    custom_element.appendChild(anchor_element);

    myControl = new ol.control.Control({
        className: 'myControl',
        element: custom_element,
        target: document.getElementById("myCustomControl")


    });

    cycle = new ol.layer.Tile({
        source: new ol.source.OSM({
            'url': '//{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
        })
    });

    myControl.customFunction = function (e) {
        console.log(e);
        console.log(this);
        if (already_loaded < 1) {
            map.addLayer(cycle);
            already_loaded = 1;
        } else {
            map.removeLayer(cycle);
            already_loaded = 0;
        }

    };
    map.addControl(myControl);




    // for debugging:
    map.getExtent = function () {
        return...