Video Map Test

A leaflet map with MarkerCluster plugin. Marker fires a video presented in a JQuery Tools overlay.

by aidankirrane

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<script src="http://releases.flowplayer.org/5.3.2/flowplayer.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<link rel="stylesheet" href="http://releases.flowplayer.org/5.3.2/skin/minimalist.css">
 <!-- the map -->
   <div id="map"></div>
   
 <!-- the player -->
   <div class="flowplayer" id="video1" style="display:none">
      <video>
         <source type="video/webm" src="http://clips.vorwaerts-gmbh.de/VfE.webm"/>
	     <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
	     <source type="video/ogg" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"/>
      </video>
   </div>

CSS

/* CUSTOM STYLES */
 body {
    font: 12px"Myriad Pro", "Lucida Grande", sans-serif;
    text-align: center;
    padding-top: 5%;
}
body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}
#video1 {
    width: 80%;
}
/*  GEOSEARCH CSS */
 .leaflet-center {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.leaflet-control-geosearch, .leaflet-control-geosearch ul {
    border-radius: 7px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
    margin: 10px 0 0 0;
    padding: 5px;
    width: 100%;
    height: auto;
}
.leaflet-control-geosearch-msg ul {
    list-style: none;
    display: none;
    height: auto;
    background: none;
    padding: 0;
}
.leaflet-control-geosearch ul li {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    margin: 2px 0;
    padding: 4px;
    font: 12px arial;
    text-indent: 4px;
}
.leaflet-container .leaflet-control-geosearch input {
    width: 100%;
    height: 28px;
    padding: 0;
    text-indent: 8px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    border: none;
}
/* MARKER CLUSTER DEFAULT CSS */
 .marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
}
.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font: 12px"Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
    line-height: 30px;
}

JavaScript

/*
 * L.Control.GeoSearch - search for an address and zoom to it's location
 * https://github.com/smeijer/leaflet.control.geosearch
 */

L.GeoSearch = {};
L.GeoSearch.Provider = {};

// MSIE needs cors support
jQuery.support.cors = true;

L.GeoSearch.Result = function (x, y, label) {
    this.X = x;
    this.Y = y;
    this.Label = label;
};

L.Control.GeoSearch = L.Control.extend({
    options: {
        position: 'topcenter'
    },

    initialize: function (options) {
        this._config = {};
        L.Util.extend(this.options, options);
        this.setConfig(options);
    },

    setConfig: function (options) {
        this._config = {
            'country': options.country || '',
                'provider': options.provider,

                'searchLabel': options.searchLabel || 'search for address...',
                'notFoundMessage': options.notFoundMessage || 'Sorry, that address could not be found.',
                'messageHideDelay': options.messageHideDelay || 3000,
                'zoomLevel': options.zoomLevel || 18
        };
    },

    onAdd: function (map) {
        var $controlContainer = $(map._controlContainer);

        if ($controlContainer.children('.leaflet-top.leaflet-center').length == 0) {
            $controlContainer.append('<div class="leaflet-top leaflet-center"></div>');
            map._controlCorners.topcenter = $controlContainer.children('.leaflet-top.leaflet-center').first()[0];
        }

        this._map = map;
        this._container = L.DomUtil.create('div', 'leaflet-control-geosearch');

        var searchbox = document.createElement('input');
        searchbox.id = 'leaflet-control-geosearch-qry';
        searchbox.type = 'text';
        searchbox.placeholder = this._config.searchLabel;
        this._searchbox = searchbox;

        var msgbox = document.createElement('div');
        msgbox.id = 'leaflet-control-geosearch-msg';
        msgbox.className = 'leaflet-control-geosearch-msg';
        this._msgbox =...