Hacklabin jäsenkartta

Helsinki Hacklabin jäsenten kyselyssä antamien postinumerotietojen sijoittuminen kartalle.

by Teppo Jussmäki

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<div style="margin: 1em 4em;">Helsinki Hacklab member location map, n=49. (2014-07-05)</div>
<div id='hack_kartta' class='rChart leaflet'></div>

<div style="margin: 0 30%">
<div><div class="ikonityyli">+</div>Regular member</div>
<div><div class="ikonityyli">-</div>Keyholder member</div>
<br/>
<p>Muistiinpanoja ja pohdintaa uusista tiloista kirjattuna Kirjoitusalustalle: <a href="http://kirjoitusalusta.fi/hacklab-uudet-tilat-2014">kirjoitusalusta.fi/hacklab-uudet-tilat-2014</a>. Laita ajatuksiasi ja huomoitasi tuonne!</p>
</div>
<!--http://www.fonts2u.com/entypo.font -->

CSS

#hack_kartta {
	height: 500px;
	width: 100%;
}
.avain {
    font-family: EntypoRegular;
    font-size: 20pt;
    color:#4B0082;
}
.avain:before {content: '-';}

.jasen {
    font-family: EntypoRegular;
    font-size: 20pt;
}
.jasen:before {content: '+';}

.ikonityyli {
    font-family: EntypoRegular;
    font-size: 25pt;
    line-height: 15pt;
    float: left;
    clear: none;
}





@font-face{font-family:'EntypoRegular';src:url('fonts/entypo-webfont.eot');src:url('fonts/entypo-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/entypo-webfont.woff') format('woff'),url('fonts/entypo-webfont.ttf') format('truetype'),url('fonts/entypo-webfont.svg#EntypoRegular')...

JavaScript

var spec = {
    "dom": "hack_kartta",
    "width": 400,
    "height": 400,
    "urlTemplate": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
    "layerOpts": {
    "attribution": "Map data<a href=\"http://openstreetmap.org\">OpenStreetMap</a>\n contributors, Imagery<a href=\"http://mapbox.com\">MapBox</a>"
    },
    "center": [60.19485, 24.95087],
    "zoom": 11,
    "id": "hack_kartta"
};
var map = L.map(spec.dom, spec.mapOpts);

map.setView(spec.center, spec.zoom);
if (spec.provider) {
    L.tileLayer.provider(spec.provider).addTo(map);
} else {
    L.tileLayer(spec.urlTemplate, spec.layerOpts).addTo(map);
}

var hacklabIcon = L.icon({
    iconUrl: 'https://dl.dropboxusercontent.com/s/xnsb1hhquysdt1v/logo.png',
    shadowUrl: 'https://dl.dropboxusercontent.com/s/icf79sksnjkvysc/varjo.png',
    iconSize: [30, 30], // size of the icon
    shadowSize: [40, 40], // size of the shadow
    iconAnchor: [15, 15], // point of the icon which will correspond to marker's location
    shadowAnchor: [15, 25], // the same for the shadow
    popupAnchor: [-5, -10] // point from which the popup should open relative to the iconAnchor
});

var avain = L.divIcon({className: 'avain', iconAnchor: [6, 23]});
var jasen = L.divIcon({className: 'jasen', iconAnchor: [6, 23]});

function postinroalue(lat, lon, zip, jasen, avain){
    tmp_t = Array(avain+1).join("-") + Array(jasen+1).join("+");
    tmp_t = tmp_t.replace(/([+-]{2})/g,'$1 ');
    
    L.marker([lat, lon], { icon:
            L.divIcon({className: 'ikonityyli', html: tmp_t,
            iconAnchor: [7 + 7 * (Math.max(2,(jasen+avain))-1), 15]})
            }).addTo(map).bindPopup(zip);
}

function uusipaikka(lat, lon, selite) {
    L.marker([lat, lon]).addTo(map).bindPopup(selite);
}
function uusi_paikka(lat, lon, selite, linkki1, linkki1_txt, linkki2, linkki2_txt, linkki3, linkki3_txt) {
    if(linkki2 == null) {
    L.marker([lat, lon]).addTo(map).bindPopup(selite.concat("<br/><a href='", linkki1, "' target='_blank'>",...