OpenLayers Example

Attempt to save drawn features to localStorage

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.0.0/css/ol.css">
<script src="https://github.com/grantm/jquery-udraggable/blob/master/jquery.udraggable.js"></script>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
 <h1>SatMap Xpedition</h1>

<div id="map"></div>
<div id="overlay" style="background-color: white; border-radius: 10px; border: 1px solid black; padding: .5em 1em;"></div>
<div id="location" class="marker red"><i class="fa fa-map-marker"></i>
</div>
<div id='controls'>
    <p>
        <input type="checkbox" id="minOptions">minimise</p>
    <p>
        <label class="checkbox" for="geo">
            <input id="geo" type="checkbox">Find my Location</label>
    </p>
    <p>
        <label class="checkbox" for="compass">
            <input id="compass" type="checkbox">Compass Mode</label>
    </p>
    <p>
        <input type="checkbox" id="SatOption" checked>Toggle Satellite Layer</p>
    <p>
        <label for='satOpacity'>Opacity</label>
        <input type="range" id='satOpacity' min='10' max='100' step='10' onchange="updateOpacity(this.value)">
    </p>
    <p>
        <input type="checkbox" id="TonerOption">Toggle Toner Layer</p>
    <ul id='layersVis'></ul>
    <ul>
        <li>
            <button onclick="compass();">Compass Mode</button>
        </li>
        <li>
            <button onclick="splitScreen();">Split Screen</button>
        </li>
        <li>
            <button onclick="doBounce(london);">Bounce To London</button>
        </li>
        <li>
            <button onclick="doBounce(rome);">Bounce To Rome</button>
        </li>
        <li>
            <button onclick="doPan(london);">Pan To London</button>
        </li>
        <li>
            <button onclick="doPan(rome);">Pan To Rome</button>
        </li>
        <li>
            <button onclick="doRotate();">Rotate</button>
        </li>
        <li>
            <button onclick="doZoom(2);">Zoom Out</button>
            <button...

CSS

html {
    width:100%;
    height:100%;
}
body {
    width:100%;
    height:100%;
    background-color: #aaa;
    font-family: Arial, Helvetica, sans-serif;
}
#map {
    height: 100%;
    width: 100%;
    background-color: #b5d0d0;
    margin: .2em auto;
    border: 1px solid #ccc;
}
.half-map {
    float:left;
    width:48%!important;
    margin:1em;
    background-color: #b5d0d0;
    margin: 1em;
    border: 1px solid #ccc;
}
#map p, .half-map p {
    text-align: center!important;
    position:fixed;
    top:auto;
    left: auto;
}
#bMap {
    height: 500px;
    width: 80%;
    background-color: #b5d0d0;
    margin: 1em auto;
    border: 1px solid #ccc;
    clear: both;
}
.bMap p {
    text-align: center!important;
    position:fixed;
    top:auto;
    left: auto;
}
#controls {
    position:absolute;
    top:0em;
    right:0em;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 2em;
    z-index: 100;
}
#controls h2 {
    font-size: 90%;
}
#controls p {
    font-size: 70%;
}
#controls ul {
    list-style-type: none;
    margin-left: 0;
    padding:0;
}
#controls ul li {
    margin:.5em 0em;
    padding:0;
}
#controls ul li button {
    width:100%;
}
.marker {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 24px;
}
.red {
    color: red;
}
.minimised {
    height:3em;
    height:3em;
    padding:.2em!important;
    box-sizing:border-box;
    overflow: hidden;
}
.minimised ul li {
    padding:0;
    margin:0;
}

JavaScript

// define our layer
var baseLayer = new ol.layer.Tile({
    source: sourceBingMaps
});

baseLayer.set('name', 'OpenStreetMap');

// create our interaction (replaces defaults)
var interaction = new ol.interaction.DragRotateAndZoom();
// get the default interactions and add our new one
var interactions = ol.interaction.defaults().extend([interaction, select, modify]);
// create our fullscreen control (replaces defaults)
var control = new ol.control.FullScreen();
// get the default controls and add our new one
var controls = ol.control.defaults().extend([control]);
// define the centre
var center = ol.proj.transform([0, 0],
    'EPSG:4326', 'EPSG:3857');
// create an overlay
var overlay = new ol.Overlay({
    element: document.getElementById('overlay'),
    positioning: 'bottom-center'
});

// new MQ sat layer
var satLayer = new ol.layer.Tile({
    source: new ol.source.MapQuest({
        layer: 'sat'
    }),
    opacity: 0.5
});

satLayer.set('name', 'MapQuest Satellite');

// set layer opacity
//satLayer.setOpacity(0.5);

function updateOpacity(value) {
    satLayer.setOpacity(value);
    map.render('satLayer');
    //if (map.render()){
    //maprendered = 'RENDERED';
    //}
    slop = satLayer.get("opacity");
    console.log(slop);
    satLayer.refresh(true);
    //console.log(maprendered);
}


// Stamen Layer
var stamenLayer = new ol.layer.Tile({
    source: new ol.source.Stamen({
        layer: 'toner'
    })
});

stamenLayer.set('name', 'B&W Layer');

// new MQ OSM layer
var mqLayer = new ol.layer.Tile({
    source: new ol.source.MapQuest({
        layer: 'osm'
    })
});

mqLayer.set('name', 'MapQuest OSM');

// Bing Maps
var sourceBingMaps = new ol.source.BingMaps({
    key: 'AuHPJEffkPdLFukMAaAQahfuVm0tpl7w6UfoJFyDwFVq1Jm0S27XmfvHEHyPLxzL',
    imagerySet: 'Road'
});

var bingMapsRoad = new ol.layer.Tile({
    source: sourceBingMaps
});
bingMapsRoad.set('name', 'Bings Maps Road');

var bingMapsAerial = new ol.layer.Tile({
    source: new...