History map

Scroll
timeline

Feed

Edit map

Icons

Chat

Contents

Create "Live history map" like Wikipedia!

Please, email nurlanturekhanov@gmail.com if you want to edit the map.

Icons

Chat channel: General

<div class="dialogEventArea">
        <div class="form-group">
            <label for="inputEventAreaName">Event area name</label>
            <input type="text" class="form-control" name="name" id="inputEventAreaName" placeholder="Enter event name">
        </div>
        <div class="row">
            <div class="col">
                Pick a color:
                <input id="colorpicker" type="hidden" value="e2ddcf" />
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                Chose an importance (less value is more importance):
                <select class="form-control eventAreaImportance" name="importance">
                    <option value="2">1 (Most importance/Global)</option>
                    <option value="3">2</option>
                    <option value="4">3</option>
                    <option value="5">4</option>
                    <option value="6">5</option>
                    <option value="7">6</option>
                    <option value="8">7</option>
                    <option value="9">8</option>
                    <option value="10">9 (City Event)</option>
                    <option value="11">10</option>
                    <option value="12">11</option>
                    <option value="13">12</option>
                    <option value="14">13</option>
                    <option value="15">14</option>
                    <option value="16">15 (Individual Event)</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                Choose area tags:
                <input type="text" value=" " class="form-control eventAreaType" name="type">
            </div>
        </div>

<div>
            <div class="row form-group">
                <div class="col">
                    Tooltip:
                </div>
            </div>
            <div class="form-areaTooltipImage">
                    <div class="btn-upload-img">
                        <div class="btn-upload-img__text">Upload image</div>
                        <div class="img-preview"></div>
                        <input type="file" id="areaTooltipImageUpload" name="files">
                    </div>
                    <input type="hidden" name="areaTooltipImageId" value="">

<div class="form-group row">
            <a href="#" class="btn btn-link btn-area-details" data-areaid="{{areaId}}">Edit full description</a>
        </div>
    </div>

<div class="area-edit-panel">
        <div class="mx-sm-1"></div>
        
        <div class="form-group area-edit-panel-header">
            <span class="area-shape">:</span>
            <span class="area-name"></span>
            <a href="" class="btn btn-link btn-mini btn-edit-area" data-areaid="">
                <i class="fa fa-pencil"></i> Edit
            </a>.
        </div>
        <div class="form-group">
            <div class="mx-sm-1 select-label">
                <span class="area-shape"></span> versions:
                <div class="edit-controls">
                    <span>
                        <button class="btn btn-secondary btn-sm btn-edit" data-toggle="tooltip" data-placement="top" title="Edit active layer">
                            <i class="fa fa-pencil-alt"></i>
                        </button>
                        <button class="btn btn-danger btn-sm btn-remove" data-toggle="tooltip" data-placement="top" title="Remove active layer">
                            <i class="fa fa-trash"></i>
                        </button>
                        <button class="btn btn-primary btn-sm btn-addnew" data-toggle="tooltip" data-placement="top" title="Duplicate active layer">
                            <i class="fa fa-copy"></i>
                        </button>
                        <button class="btn btn-primary btn-sm btn-hide" data-toggle="tooltip" data-placement="top" title="Hide active layer">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                        <button class="btn btn-primary btn-sm btn-show d-none" data-toggle="tooltip" data-placement="top" title="Show active layer">
                            <i class="fa fa-eye"></i>
                        </button>

</span>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="switchUseMask">
                        <label class="custom-control-label" for="switchUseMask">Mask</label>
                    </div>
                </div>
            </div>
            <div class="area-edit-versions"></div>
            <!--
            <div class="fancytree-grid-container flexbox-item-grow">
                <table class="area-edit-versions">

<colgroup>
                      <col width="30px"></col>
                      <col width="*"></col>
                      <col width="30px"></col>
                    </colgroup>
                    <thead>
                      <tr><th></th><th class="parent-path"></th><th>Mask</th> </tr>
                    </thead>
                </table>
            </div>
        -->

<div class="form-group form-group-hideexeptediting">
                <label><input type="checkbox" class="btn-hide-exept-editing"> Hide layers exept editing</label>
            </div>

<div class="form-group form-group-opacity">
                <label>Opacity:
                    <div class="change-layer-opacity">
                        <div class="custom-handle ui-slider-handle"></div>
                    </div>
                </label>
            </div>
        </div>
    </div>

<div class="dialogAreaEditVersion">
        <div class="form-group">
            <label>Version name (for admin only)</label>
            <input type="text" class="form-control" name="name" placeholder="Enter version name">
        </div>

<label>Area period</label>
        <div class="row form-group">
            <div class="col">
                <input type="text" class="form-control datetimePicker" name="dateStart" value="0000/00/00 00:00">
            </div>
            -
            <div class="col">
                <input type="text" class="form-control datetimePicker" name="dateEnd" value="0000/00/00 00:00">
            </div>
        </div>

<div class="row form-group">
            <div class="col">
                Pick a color:
                <input id="colorpicker" type="hidden" value="e2ddcf" />
            </div>
        </div>
        <div class="row form-group">
            <div class="icon-preview"></div>
            <a href="#" class="btn btn-link btn-choose">Choose icon...</a>
            <input type="hidden" name="icon" value="">
        </div>

<div>
            <div class="row form-group">
                <div class="col">
                    Background image:
                </div>
            </div>
            <div class="row form-group form-areaBackgroundFile">
                <div class="col">
                    <div class="img-preview"></div>
                    <button type="button" class="btn btn-primary btn-upload-img">
                        Upload image <input type="file" id="areaBackgroundFileUpload" name="files">
                    </button>
                    <input type="hidden" name="areaBackgroundFileId" value="">
                </div>
            </div>
        </div>
    </div>

<div class="dialogAreaEditVersion">
        <label>Story period</label>
        <div class="alert alert-danger d-none">
            Errors: Please, choose tags!
        </div>
        <div class="row form-group">
            <div class="col">
                <input type="text" class="form-control datetimePicker" name="dateStart" value="0000/00/00 00:00">
            </div>
        </div>

<div class="visible-if-has-instance">
            <div class="form-group">
                <label>Click at the field below to choose point on the map to story about it (optional)</label>
                <input type="text" class="form-control" name="coords" placeholder="Choose point on the map">
            </div>

<div class="form-group row">
                <div class="col">
                    Chose an importance (less value is more importance):
                    <select class="form-control feedItemImportance" name="importance">
                        <option value="2">1 (Most importance/Global)</option>
                        <option value="3">2</option>
                        <option value="4">3</option>
                        <option value="5">4</option>
                        <option value="6">5</option>
                        <option value="7">6</option>
                        <option value="8">7</option>
                        <option value="9">8</option>
                        <option value="10">9 (City Event)</option>
                        <option value="11">10</option>
                        <option value="12">11</option>
                        <option value="13">12</option>
                        <option value="14">13</option>
                        <option value="15">14</option>
                        <option value="16">15 (Individual Event)</option>
                    </select>
                </div>
            </div>

<div class="row form-group form-areaVersionFile">
                <div class="col">
                    <div class="img-preview"></div>
                    <button type="button" class="btn btn-primary btn-upload-img">
                        <input type="file" id="areaVersionFileUpload" name="files">
                        Upload avatar - use if you story about person/animal/subject and etc (optional).
                    </button>
                    <input type="hidden" name="areaVersionFileId" value="">
                </div>
            </div>

<div class="row form-group">
                <div class="col">
                    Story - maximum 250 chars (optional):
                    <textarea class="form-control" name="info"></textarea>
                </div>
            </div>

<div class="row form-group form-feedGallery">
                <div class="col">
                    Upload images that illustrate the story (optional)
                    <form class="fileupload" method="POST" enctype="multipart/form-data">
                        
                        <div class="row fileupload-buttonbar">
                            <div class="col-lg-7">
                                
                                <span class="btn btn-success fileinput-button">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>Add files...</span>
                                <input type="file" name="files[]" multiple>
                                </span>
                                
                                <span class="fileupload-process"></span>
                            </div>
                            
                            <div class="col-lg-5 fileupload-progress fade">
                                
                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                                </div>
                                
                                <div class="progress-extended"> </div>
                            </div>
                        </div>
                        
                        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                    </form>
                </div>
            </div>

<div class="row form-group">
                <div class="col">
                    Attach YouTube share link (optional):
                    <input class="form-control" type="text" name="youtube" value="">
                </div>
            </div>
        </div>
        <input type="hidden" name="itemId" value="0">
    </div>

<div class="infoline-item-wrapper">
        <div class="infoline-item infoline-item-{{item.id}}" data-id="{{item.id}}" data-startkey="{{item.startKey}}" data-needrefresh="false">
            <div class="infoline-item-inner">
                <div class="infoline-item-header">
                    <div class="infoline-date">{{item.start}}</div>
                    {{#if item.tags}}<div class="infoline-tags">#{{item.tags.[0].name}}</div>{{/if}}

</div>

<div class="infoline-text {{#if item.image}}infoline-image-small{{/if}}">
                    {{#if item.image}}
                        <img src="{{item.image.url}}">
                    {{/if}}

{{item.info}}
                </div>

{{#cond " this.item.files || this.item.youtube "}}
                    <div class="infoline-image infoline-image-full owl-carousel owl-theme">
                    {{#if item.youtube}}
                        <div>
                            
                            <div class="infoline-item-eventlistener" style="height: 100%;width: 100%;position: absolute;cursor:pointer"></div>
                            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/{{item.youtube}}?enablejsapi=1" frameborder="0"
                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    {{/if}}
                    {{#if item.files}}
                        {{#each item.files}}
                            <div>
                                <img src="{{url}}">
                            </div>
                        {{/each}}
                    {{/if}}
                    </div>
                {{/cond}}
            </div>

</div>
    </div>