leaflet test

by bakhshi

HTML

<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<button class="create">Create</button>
<button class="dispose">Dispose</button>

CSS

.mymap{
    width:600px;
    height:400px;
}

JavaScript

function setAttribute(el, name, val){
    var idAttr = document.createAttribute(name);
    idAttr.value = val;
    el.attributes.setNamedItem(idAttr);
}
var $ = document.querySelector.bind(document);
var mymaps = [],
    newids = [];
var id = 1;
$('.create').addEventListener('click', function(){
    var newid = 'map'+id++;
    var div = document.createElement('div');
    setAttribute(div, 'id', newid);
    setAttribute(div, 'class', 'mymap leaflet-container leaflet-fade-anim');
    document.body.appendChild(div);
    mymaps.push(createMap(newid));
    newids.push(newid);
});

$('.dispose').addEventListener('click', function(){
    while(mymaps.length>0)
        mymaps.pop().remove();
    while(newids.length > 0)
        $('#'+newids.pop()).remove();
});

var freeBus = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "geometry": {
            "type": "LineString",
                "coordinates": [
                [-105.00341892242432, 39.75383843460583],
                [-105.0008225440979, 39.751891803969535]
            ]
        },
            "properties": {
            "popupContent": "This is free bus that will take you across downtown.",
                "underConstruction": false
        },
            "id": 1
    }, {
        "type": "Feature",
            "geometry": {
            "type": "LineString",
                "coordinates": [
                [-105.0008225440979, 39.751891803969535],
                [-104.99820470809937, 39.74979664004068]
            ]
        },
            "properties": {
            "popupContent": "This is free bus that will take you across downtown.",
                "underConstruction": true
        },
            "id": 2
    }, {
        "type": "Feature",
            "geometry": {
            "type": "LineString",
                "coordinates": [
                [-104.99820470809937, 39.74979664004068],
                [-104.98689651489258, 39.741052354709055]
            ]
 ...