Skip to content

Instantly share code, notes, and snippets.

@prusswan

prusswan/zaobao10.html

Forked from kyroskoh/zaobao10.html
Created April 12, 2016 09:52
Show Gist options
  • Save prusswan/68f81751d3e2ec300d91ac6f6c92296b to your computer and use it in GitHub Desktop.
Save prusswan/68f81751d3e2ec300d91ac6f6c92296b to your computer and use it in GitHub Desktop.
Download ZIP
ZaoBao 10 (CartoDB)
Raw
zaobao10.html
<!DOCTYPE html>
<html>
<head>
<title>ZaoBao OneMap</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<!-- Include CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"/>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Add of bottom -->
<link rel="stylesheet" href="css/plugin.css">
<link rel="stylesheet" type="text/css" href="css/footer.css" media="screen" />
<!-- featherlight -->
<link type="text/css" rel="stylesheet" href="css/featherlight.css" title="Featherlight Styles" />
<style>
html, body, #map {width:100%; height:100%; padding: 0; margin: 0; overflow:hidden;}
#map { background:#000; z-index: 0; min-width:100%; min-height:100%;}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 0px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 36px;
height: 36px;
line-height: 36px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 26px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-control-zoom-out {
font-size: 28px;
}
.leaflet-touch .leaflet-control-zoom-in {
font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
font-size: 24px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 0px;
}
.leaflet-control-layers-toggle {
background-image: url(images/icons/icon_fliter.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
#menu
{
position: absolute;
bottom: 0px; left: 0px;
width: 100%;
height:120px;
background: transparent;
margin-bottom: 0px;
}
#menu div#bottom-menu-bar
{
position: absolute;
height:1px;
}
#menu div#bottom-menu-bar .feature.clearfix
{
margin-top: 0px;
margin-bottom: 10px;
}
@media screen and (max-width: 1600px) {
#menu,
#menu div#bottom-menu-bar
{
height:145px;
}
}
@media screen and (min-width: 539px) and (max-width: 1040px) {
#menu,
#menu div#bottom-menu-bar
{
height:170px;
}
}
@media screen and (min-width: 540px) and (max-width: 650px) {
#menu,
#menu div#bottom-menu-bar
{
height:215px;
}
}
@media screen and (min-width: 300px) and (max-width: 450px) {
#menu,
#menu div#bottom-menu-bar
{
height:205px;
}
}
.scrollable-menu {
height: auto;
width: auto;
}
.textbox-wrapper{
-webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
-moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
box-shadow: inset 2px 2px 2px 0px #dddddd;
padding: 10px;
height: 30px;
width: 300px;
overflow: auto;
font-family: tahoma;
font-size: 13px;
border: 1px solid #aaa;
}
#AgeChart-Label{
height:30px;
width:75px;
}
#HousingChart-Label{
height:30px;
width:75px;
}
.tabs {
position: relative;
height: 280px; /* This part sucks */
clear: both;
}
.tab {
float: left;
height: 30px;
}
.tab label {
background: #eee;
padding: 5px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 30px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 5px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 15;
}
[type=radio]:checked ~ label ~ .content {
z-index: 14;
}
.lightbox { display: none; }
.search {z-index:11; position: absolute; top: 10px; left: 60px; height: 50px; width:500px;}
::-webkit-input-placeholder {
color: #B4ADB0;
}
:-moz-placeholder { /* Firefox 18- */
color: #B4ADB0;
}
::-moz-placeholder { /* Firefox 19+ */
color: #B4ADB0;
}
:-ms-input-placeholder {
color: #B4ADB0;
}
.search2 {z-index:10; position: absolute; top: 59px; left: 60px; width: 500px;}
.leaflet-bottom {
bottom: 0;
margin-right:80px;
margin-bottom:10px;
display:none;
}
.bottom_menu{
color: #0078A8;
font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
text-decoration: none;
padding:0px 5px;
/* background: #fff; line-height: px; height: 24px; */
background: rgba(255, 255, 255, 0.7);
margin: 50px 20px 0px 0px ;
}
.bottom_menu a{
color: #0078A8;
text-decoration: none;
}
.bottom_menu a:hover{
color: #0078A8;
text-decoration: underline;
}
@media all and ( max-width: 600px ) {
.search { width:90%;}
.search2 {width:90%;}
.leaflet-right {
right: 0;
margin-top:60px;
}
}
</style>
<style type="cartocss/text" id="backgroundStyle">
/** simple visualization */
#background{
polygon-fill: #FFFFFF;
polygon-opacity: 0.4;
polygon-comp-op: lighten;
line-color: #FFF;
line-width: 1;
line-opacity: 0.5;
}
#bottom-menu-bar
{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>
<input id="searchtxt" type="text" class="textbox-wrapper search" placeholder="请开始搜索" onkeyup="liveSearch(this.value)" />
<div class="dropdown search2" id="searchResultList" style=""></div>
<script type="infowindow/html" id="infowindow_template"></script>
<div id="menu">
<div id="layer-control"/></div>
<!-- Start Sticky footer -->
<footer>
<!-- <div id="footer-inner">
</div> -->
<!-- START Expanded menu -->
<section id="expanded-menu">
<label id="menubutton" for="expanded-content" style="float:right; margin:0 10px 0 0; padding:0; top:-70px; background:transparent; ">
<div class="bottom_menu" style="float:left;">
<span style="color:#333;">&copy; 2015</span> <a href="http://leafletjs.com/" target="_blank" >Leaflet</a> <span style="color:#333;">|</a> <a href="http://www.onemap.sg/home/TermsOfUse.html" target="_blank">Term & Condition</a> <span style="color:#333;">|</a> <a href="http://onemap.sg" target="_blank">OneMap.sg</a>, CartoDB <a href="https://cartodb.com/attributions" target="_blank">attribution</a>
</div >
<img src="images/icons/icon_piechart.png" id="changer" onclick="changeImage(this)" style="margin-top:20px;" />
</label>
<div class="wrapper">
<input id="expanded-content" name="exp-content-1" type="checkbox" />
<article class="expanded-content-440">
<div class="panel-content">
<div class="contents clearfix">
<div class="features">
<div class="row clearfix">
<!-- Button -->
<div class="feature clearfix">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a href="#" data-featherlight="#graph1"><div class="circle circle_bg1"></div><span>荷兰-武吉班让</span></a>
<iframe class="lightbox" src="holland-bukittimah.html" id="graph1" height="100%" style="border:none;"></iframe>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a href="#" data-featherlight="#graph2"><div class="circle circle_bg2"></div><span>三巴旺</span></a>
<iframe class="lightbox" src="sembawang.html" id="graph2" height="100%" style="border:none;"></iframe>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg3"></div><span style="color:#666;">东海岸</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg4"></div><span style="color:#666;">丹戎巴葛</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg5"></div><span style="color:#666;">宏茂桥</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg6"></div><span style="color:#666;">摩棉-加冷</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg7"></div><span style="color:#666;">波東巴西</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg8"></div><span style="color:#666;">淡滨尼</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg9"></div><span style="color:#666;">白沙-榜鵝</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg10"></div><span style="color:#666;">碧山-大巴窑</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg11"></div><span style="color:#666;">義順</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg12"></div><span style="color:#666;">蔡厝港</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg13"></div><span style="color:#666;">裕廊</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg14"></div><span style="color:#666;">西海岸</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg15"></div><span style="color:#666;">阿裕尼-后港-榜鵝東</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
<!-- Button -->
<div class="feature clearfix" style="background-color:#bababa;">
<!--<div class="icon">
<img alt="" src="img/video-icon.jpg" />
</div>--><!-- icon -->
<div class="description">
<a><div class="circle circle_bg16"></div><span style="color:#666;">马林百列</span></a>
</div><!-- description -->
</div><!-- feature -->
<!-- End of Button -->
</div>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- END Expanded menu -->
</footer>
<!-- END Sticky footer -->
</div>
</div>
<!-- inline with the button at the top -->
<div class="lightbox" id="fl3"></div>
<script>
var map;
var marker;
var circle;
var getText;
var locateControl;
var htmlStr;
var coordStr;
var arrOfSuggestText;
var arrOfText;
var arrOfLat;
var arrOfLon;
var draw_layer;
var jsonObject;
var searchBoxText;
var suggestionsList;
function liveSuggest(getSuggestText){
arrOfSuggestText = new Array();
if(getSuggestText.length == ""){
basemap.removeLayer(marker);
basemap.removeLayer(circle);
document.getElementById('searchResultList').style.display = 'none';
}
else{
document.getElementById('searchResultList').style.display = '';
getSuggestText=getSuggestText.replace(" ","+");
var suggest = encodeURIComponent(getSuggestText);
var suggestLink = 'http://ec2-52-74-28-154.ap-southeast-1.compute.amazonaws.com/proxy.php?url=http%3A%2F%2Fsearch-gismapper-search-fxctadfhljqegsqmft4luqp4ku.ap-southeast-1.cloudsearch.amazonaws.com%2F2013-01-01%2Fsuggest%3Fq%3D'+suggest+'%26suggester%3Daddresssearch%26size%3D8'
$.getJSON(suggestLink,function(result){
currentPageNum = 0;
$.each(result.contents.suggest.suggestions, function(key,value){
//Description of landmark
if(value.suggestion != null && value.suggestion != " "){
arrOfSuggestText.push(value.suggestion);
}
else
{
arrOfSuggestText.push("null");
}
})
currentPageNum = currentPageNum + 1;
currentStartRow = 0;
printSuggestResult(arrOfSuggestText);
$.ajaxSetup({ cache: false });
}).error(function(error){
alert("ERROR IN RETRIVING");
});
}
};
function printSuggestResult(arrOfSuggestText){
var htmlStr = "<ul class='list-group scrollable-menu'>";
for(var i=0; i<arrOfSuggestText.length; i++){
htmlStr += "<li class='list-group-item '>";
if(arrOfSuggestText[i] != "null"){
htmlStr += '<a id="searchResult'+i+'" href="javascript:liveSearch(\''+arrOfSuggestText[i].replace("'","")+'\')" > '+arrOfSuggestText[i]+'</a>';
}
htmlStr += "</li>";
}
htmlStr += "</ul>";
document.getElementById('searchResultList').innerHTML = htmlStr;
};
function printSearch(arrOfText){
var htmlStr = "<ul class='list-group scrollable-menu'>";
for(var i=0; i<arrOfText.length; i++){
htmlStr += "<li class='list-group-item '>";
if(arrOfText[i] != "null"){
var split = arrOfText[i].split(',');
//console.log(split[0]);
//console.log('<a id="searchResult'+i+'" href="javascript:plotOnMap("'+split[2]+','+split[1]+'") > '+split[0]+'</a>');
htmlStr += '<a id="searchResult'+i+'" href="javascript:plotOnMap('+split[2]+','+split[1]+')" > '+split[0]+'</a>';
}
htmlStr += "</li>";
}
htmlStr += "</ul>";
document.getElementById('searchResultList').innerHTML = htmlStr;
};
function liveSearch(getText){
var arrOfText = new Array();
var arrOfLat = new Array();
var arrOfLon = new Array();
document.getElementById('searchtxt').value = getText;
document.getElementById('searchResultList').innerHTML = "";
for(var i =0;i<getText.length; i++){
getText = getText.replace(" ","+");
getText = getText.replace("&"," ");
getText = getText.replace("/"," ");
}
var q = encodeURIComponent(getText);
var partOneOfUrl = 'http://repo.sgmap.xyz/proxy2.php?url=http%3A%2F%2Fsearch-onemap-search-chinese-gnfeytxt33fo5lv3my4l7yiw74.ap-southeast-1.cloudsearch.amazonaws.com%2F2013-01-01%2Fsearch%3Fq%3D';
var partTwoOfUrl = '*%26q.parser%3Dsimple%26q.options%3D%7B%22defaultOperator%22%3A%22and%22%2C%22fields%22%3A%5B%22poi_chn%22%5D%2C%22operators%22%3A%5B%22and%22%2C%22escape%22%2C%22fuzzy%22%2C%22near%22%2C%22not%22%2C%22or%22%2C%22phrase%22%2C%22precedence%22%2C%22prefix%22%2C%22whitespace%22%5D%7D%26return%3D_all_fields%26sort%3Dpoi_chn%20asc';
var restLink = partOneOfUrl+q+partTwoOfUrl;
$.getJSON(restLink,function(result){
//console.log(result);
currentPageNum = 0;
var getRows = result.contents.hits.found;
//console.log(result.contents.hits.found);
$.each(result.contents.hits.hit, function(key,value){
//Description of landmark
if(value.fields.search_text != null && value.fields.search_text != " "){
arrOfText.push(value.fields.poi_chn+','+value.fields.lon+','+value.fields.lat);
//arrOfText.push(value.fields.search_text);
}
else
{
arrOfText.push("null");
}
//Lon
if(value.fields.lon != null && value.fields.lon !=" "){
arrOfLon.push(value.fields.lon);
}
else
{
arrOfLon.push("null");
}
//Lat
if(value.fields.lat != null && value.fields.lat !=" "){
arrOfLat.push(value.fields.lat);
}
else
{
arrOfLat.push("null");
}
})
currentPageNum = currentPageNum + 1;
currentStartRow = 0;
printSearch(arrOfText);
//plotOnMap(arrOfLat, arrOfLon);
$.ajaxSetup({ cache: false });
}).error(function(error){
alert("ERROR IN RETRIVING");
});
};
//Plotting the map on the screen after submitting search
function plotOnMap(inX, inY){
//document.getElementById('searchResultList').style.display = 'none';
document.getElementById('searchResultList').innerHTML = '';
if(marker){
map.removeLayer(marker);
};
if(circle){
map.removeLayer(circle);
};
var xx = parseFloat(inX);
var yy = parseFloat(inY);
map.setView(new L.LatLng(xx,yy), 18);
marker = new L.CircleMarker([xx,yy],{radius: 4}).addTo(map).on('mouseover', onclick);
map.addLayer(marker);
circle = new L.circle([xx, yy], 10, {
color: 'red',
fillColor: '#ff99ad',
fillOpacity: 0.5
}).addTo(map).on('mouseover', onclick);
};
function main() {
// create map
var southWest = L.latLng(1.16, 103.502), northEast = L.latLng(1.56073, 104.11475), bounds = L.latLngBounds(southWest, northEast);
map = new L.Map('map', {
zoomControl: true,
maxBounds: bounds,
center: [1.37556,103.799926],
zoom: 14,
minZoom: 13,
maxZoom: 18//,
//layers: [holland_bukittimah_landmarks, holland_bukittimah_currentCG, holland_bukittimah_newCG]
});
//Marker Icon
//Holland-Bukit Timah
//Farm Icon
var farmIcon = L.icon({
iconUrl: 'images/icons/veggie.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var farmIcon2 = L.icon({
iconUrl: 'images/icons/veggie2.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var CondominiumIcon = L.icon({
iconUrl: 'images/icons/1.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var zooIcon = L.icon({
iconUrl: 'images/icons/3.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var hospitalIcon = L.icon({
iconUrl: 'images/icons/4.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var parkIcon = L.icon({
iconUrl: 'images/icons/8.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var eatingIcon = L.icon({
iconUrl: 'images/icons/6.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var shoppingIcon = L.icon({
iconUrl: 'images/icons/7.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var placeIcon = L.icon({
iconUrl: 'images/icons/9.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var templeIcon = L.icon({
iconUrl: 'images/icons/10.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var mrtIcon = L.icon({
iconUrl: 'images/icons/12.png',
iconSize: [28, 28], // size of the icon
iconAnchor: [18, 30], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor
});
//Landmarks
//Holland-Bukit Timah
var singaporezoo = L.marker([1.40495, 103.79049],{icon: zooIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Singapore_Zoo_-_28600609.jpg" width="280px"/>' + '<br>' + '新加坡动物园' + '<p>' + '80 Mandai Lake Rd, 729826' + '<p>' + '位于实里达上段蓄水池北部的新加坡动物园在1973年开幕，共有2800多只动物，品种超过300个。动物园以开放式设计出名，也是世界上第一个自由放养红毛猩猩的动物园，国人熟知的红毛猩猩“阿明”（Ah Meng）曾生长在这里。动物园周围这些年也不断拓展，增建了夜间动物园与河川生态园。').addTo(map);
//var nusbukitimah = L.marker([1.31893, 103.81679]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Lee_Kuan_Yew_School_of_Public_Policy_-_28600524.jpg" width="280px"/>' + '<br>' + '新加坡国立大学武吉知马校园' + '<p>' + '469C Bukit Timah Rd, 259772' + '<p>' + '位于新加坡植物园边的新加坡国立大学武吉知马校园，曾是莱佛士学院、新加坡大学、国立教育学院（后来并入南洋理工大学）和新加坡管理大学的校舍。校园成立于1928年，拥有悠长历史，目前是国大法学院、李光耀公共政策学院和政策研究所等的所在地。').addTo(map);
//var bukitbrowncemetery = L.marker([1.336105, 103.82298]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Bukit_Brown_Cemetery_-_28600646.jpg" width="280px"/>' + '<br>' + '武吉布朗坟场' + '<p>' + '' + '<p>' + '武吉布朗坟场俗称“咖啡山”，是本地首个华人坟场，1922年正式启用，并在1973年关闭。这里有10万多个年代不同，且风格各异的坟墓，是许多华社先贤长眠之地。').addTo(map);
var bukittimahnaturereserve = L.marker([1.34830, 103.77754],{icon: parkIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Bukit_Timah_Nature_Reserve_-_28600674.jpg" width="280px"/>' + '<br>' + '武吉知马自然保护区' + '<p>' + 'Hindhede Dr, 589318' + '<p>' + '武吉知马自然保护区虽然占地仅有约1.6平方公里，却拥有至少40％的本土动植物，包括许多稀有品种如新加坡溪蟹和黄冠鹎等。保护区在2011年被列为亚细安公园遗产。').addTo(map);
//var beautyworld = L.marker([1.33901, 103.77878]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Beauty_World_Centre_-_28601493.jpg" width="280px"/>' + '<br>' + '美世界中心' + '<p>' + '140 Upper Bukit Timah Rd' + '<p>' + '大火烧毁了旧美世界市场后，新的美世界中心（Beauty World Centre）于1983年竣工，是当年市区重建局承建的首座有冷气设备的购物中心。它的设计还考虑到体障人士的需要，特设斜坡或扶梯以方便他们。').addTo(map);
var discsandbox = L.marker([1.38194, 103.76557], {icon: parkIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Panjang_-_Pang_Sua_Pond_-_28590803.jpg" width="280px"/>' + '<br>' + '盘沙池' + '<p>' + '101 Bukit Panjang Road, 679910' + '<p>' + '位于武吉班让中心的“盘沙池”（Pang Sua Pond）长久以来是武吉班让居民举办社区活动和联络感情的热门地点。它建于1992年，是个面积约3公顷的雨水收集池，专门收集武吉班让区的雨水，引入实里达上段蓄水池。').addTo(map);
var jinshanlingcafe = L.marker([1.37745, 103.77274], {icon: eatingIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Panjang_-_Kim_San_Leng_-_28600518.jpg" width="280px"/>' + '<br>' + '金山岭咖啡店' + '<p>' + 'HDB Bukit Panjang, 259 Bukit Panjang Ring Road 671259' + '<p>' + '位于第259座组屋的这家咖啡店从早到晚人潮络绎不绝，是居民们用餐闲话家常的好地方。周围设有杂货店、小型菜市场等邻里购物场所，生活气息浓厚。').addTo(map);
//Landmarks
//Sembawang
var hotspring = L.marker([1.434437, 103.822486],{icon: placeIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Sembawang_-_Seletar_hot_spring_-_28610373.jpg" width="280px"/>' + '<br>' + '三巴旺温泉' + '<p>' + 'off Gambas Avenue near the junction of Sembawang Road and Gambas Avenue, along Jalan Ulu Sembawang' + '<p>' + '上个世纪初，这里是华籍商人佘永恭的黄梨种植园，他于1909年发现温泉。1922年，饮料公司花莎尼收购该地段并设厂，将泉水装瓶出售。二战期间，日军建造澡堂以享用温泉。目前该地段属于国防部所有，但温泉每天开放给公众进入取水。泉水温度约70摄氏度，含有丰富矿物质。').addTo(map);
//var bukitbrowncemetery = L.marker([1.336105, 103.82298]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Bukit_Brown_Cemetery_-_28600646.jpg" width="280px"/>' + '<br>' + '武吉布朗坟场' + '<p>' + '' + '<p>' + '武吉布朗坟场俗称“咖啡山”，是本地首个华人坟场，1922年正式启用，并在1973年关闭。这里有10万多个年代不同，且风格各异的坟墓，是许多华社先贤长眠之地。').addTo(map);
var waterfront = L.marker([1.453119, 103.780194],{icon: parkIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Sembawang_-_Woodlands_Waterfront_-_28600806.jpg" width="280px"/>' + '<br>' + '兀兰海滨公园' + '<p>' + 'Admiralty Road West, Woodlands, Singapore' + '<p>' + '2011年正式启用的兀兰海滨公园面对柔佛海峡，园内有一座长400米的本地最长码头。游人可在码头上钓鱼或观赏对岸的马来西亚新山风光。与其他公园不同的是，兀兰海滨公园有一片连绵起伏的小丘绿地，在上面骑脚踏车、跑步或快步走有一定的挑战性。').addTo(map);
//var beautyworld = L.marker([1.33901, 103.77878]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Beauty_World_Centre_-_28601493.jpg" width="280px"/>' + '<br>' + '美世界中心' + '<p>' + '140 Upper Bukit Timah Rd' + '<p>' + '大火烧毁了旧美世界市场后，新的美世界中心（Beauty World Centre）于1983年竣工，是当年市区重建局承建的首座有冷气设备的购物中心。它的设计还考虑到体障人士的需要，特设斜坡或扶梯以方便他们。').addTo(map);
var melayu = L.marker([1.459244, 103.841527],{icon: templeIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Sembawang_-_Masjid_Petempatan_Melayu_Sembawang_-_28610364.jpg" width="280px"/>' + '<br>' + '三巴旺马来居民回教堂（Masjid Petempatan Melayu Sembawang）' + '<p>' + '27B Jalan Mempurong, Singapore 759055' + '<p>' + '建于1959年的这座回教堂原是附近马来柑榜的主要建筑，但随着多数村民都搬到其他地区，回教堂在1985年一度面临被拆除的命运。回教堂负责人和信徒向当时的三巴旺区议员陈庆炎博士求助，政府最终撤回拆除回教堂的决定。回教堂在2005年翻新，但仍保留单层楼的纯朴建筑结构。').addTo(map);
var beaulieuhouse = L.marker([1.463372, 103.836923],{icon: eatingIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Sembawang_-_Beaulieu_House_-_28610360.jpg" width="280px"/>' + '<br>' + '博利尔洋房（Beaulieu House）' + '<p>' + '117 Beaulieu Road' + '<p>' + '这座独立式洋房位于三巴旺公园一角，在上个世纪初属于富商约瑟布鲁克大卫（Joseph Brook David）。英国殖民政府于1924年在三巴旺建造军港时买下房子，充作高级工程师的住所。军港建造工程结束后，即成为海军将领的住处，其中包括英国海军上将博利尔（Admiral Beaulieu）。房子面海，主建筑两侧有配楼，前院围栏以维多利亚式铸铁点缀，建筑设计充满新古典主义风格，在2005年被列为受保留建筑。').addTo(map);
var admiraltyhouse = L.marker([1.447755, 103.824079],{icon: placeIcon}).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Sembawang_-_Old_Admiralty_House_-_4541983.jpg" width="280px"/>' + '<br>' + '旧海军部屋（Old Admiralty House）' + '<p>' + '345 Old Nelson Road' + '<p>' + '这座建筑建于1939年，原是英国海军高官的住所，也是二战时期英军的作战总部。英军撤出新加坡后，被乡村俱乐部租用。这座两层楼建筑具有19世纪英国田庄风格，挑高的屋顶铺有瓦砖。房子在2002年被国家文物局列为国家古迹后，正式命名为旧海军部屋。').addTo(map);
//New infrastructure at woodlands
var sembawang_newsCG_WL_South = L.marker([1.427155,103.793952], {icon: mrtIcon}).bindPopup('兀兰南地铁站').addTo(map);
var sembawang_newsCG_WL_North = L.marker([1.447423,103.786597], {icon: mrtIcon}).bindPopup('兀兰北地铁站').addTo(map);
var sembawang_newsCG_Forestville = L.marker([1.432000,103.798989],{icon: CondominiumIcon}).bindPopup('Forestville Executive Condominium').addTo(map);
var sembawang_newsCG_Twin_Fountains = L.marker([1.431276,103.799713],{icon: CondominiumIcon}).bindPopup('Twin Fountains Executive Condominium').addTo(map);
var sembawang_newsCG_Bellewoods = L.marker([1.432520,103.800786],{icon: CondominiumIcon}).bindPopup('百丽居').addTo(map);
var sembawang_newsCG_SkyPark = L.marker([1.444544,103.816727],{icon: CondominiumIcon}).bindPopup('天林园').addTo(map);
var sembawang_newsCG_Woods_Square = L.marker([1.4348327,103.7850827],{icon: shoppingIcon}).bindPopup('兀兰广场').addTo(map);
var sembawang_newsCG_WGH = L.marker([1.4252536,103.7926031],{icon: hospitalIcon}).bindPopup('兀兰综合医院').addTo(map);
var sembawang_newsCG_BWN = L.marker([1.430595,103.798817],{icon: templeIcon}).bindPopup('吉祥宝聚寺').addTo(map);
var sembawang_newsCG_YIM = L.marker([1.426128,103.795695],{icon: templeIcon}).bindPopup('Yusof Ishak Mosque').addTo(map);
var sembawang_newsCG_KA = L.marker([1.439680,103.800727],{icon: shoppingIcon}).bindPopup('Kampung Admiralty').addTo(map);
//Community Gardens
//Holland-Bukit Timah (Current)
var bukittimah_currentCG_201 = L.marker([1.3717294,103.7751608], {icon: farmIcon}).bindPopup('现有菜园: Block 201').addTo(map);
var bukittimah_currentCG_210 = L.marker([1.374012,103.776259], {icon: farmIcon}).bindPopup('现有菜园: Block 210').addTo(map);
var bukittimah_currentCG_116 = L.marker([1.377111,103.768568], {icon: farmIcon}).bindPopup('现有菜园: Block 116').addTo(map);
var bukittimah_currentCG_253 = L.marker([1.37951,103.774588], {icon: farmIcon}).bindPopup('现有菜园: Block 253').addTo(map);
var bukittimah_currentCG_412 = L.marker([1.382935,103.7681489], {icon: farmIcon}).bindPopup('现有菜园: Block 412').addTo(map);
var bukittimah_currentCG_248 = L.marker([1.3813,103.774122], {icon: farmIcon}).bindPopup('现有菜园: Block 248').addTo(map);
var bukittimah_currentCG_234 = L.marker([1.3783784,103.7720451], {icon: farmIcon}).bindPopup('现有菜园: Block 234').addTo(map);
var bukittimah_currentCG_436 = L.marker([1.382193,103.7700879], {icon: farmIcon}).bindPopup('现有菜园: Block 436').addTo(map);
var bukittimah_currentCG_419 = L.marker([1.38428,103.76943], {icon: farmIcon}).bindPopup('现有菜园: Block 419').addTo(map);
var bukittimah_currentCG_105 = L.marker([1.3783049,103.767731], {icon: farmIcon}).bindPopup('现有菜园: Block 105').addTo(map);
var bukittimah_currentCG_519_521 = L.marker([1.387551,103.766199], {icon: farmIcon}).bindPopup('现有菜园: Between Block 519 and Block 521').addTo(map);
var bukittimah_currentCG_118 = L.marker([1.324901,103.771791], {icon: farmIcon}).bindPopup('现有菜园: Behind Block 118 ').addTo(map);
var bukittimah_currentCG_4 = L.marker([1.338526,103.774565], {icon: farmIcon}).bindPopup('现有菜园: Block 4').addTo(map);
var bukittimah_currentCG_305 = L.marker([1.321978,103.765648], {icon: farmIcon}).bindPopup('现有菜园: Behind Block 305').addTo(map);
//Holland-Bukit Timah (Newly Added)
var bukittimah_newCG_206 = L.marker([1.375289,103.772315], {icon: farmIcon2}).bindPopup('新增菜园: Block 226').addTo(map);
var bukittimah_newCG_237 = L.marker([1.3786079,103.77044], {icon: farmIcon2}).bindPopup('新增菜园: Block 237').addTo(map);
var bukittimah_newCG_402 = L.marker([1.380306,103.768067], {icon: farmIcon2}).bindPopup('新增菜园: Block 402').addTo(map);
var bukittimah_newCG_417 = L.marker([1.38401,103.76815], {icon: farmIcon2}).bindPopup('新增菜园: Block 417').addTo(map);
var bukittimah_newCG_434 = L.marker([1.385251,103.770916], {icon: farmIcon2}).bindPopup('新增菜园: Block 434').addTo(map);
var bukittimah_newCG_429 = L.marker([1.386900,103.7700879], {icon: farmIcon2}).bindPopup('新增菜园: Block 429').addTo(map);
var bukittimah_newCG_410 = L.marker([1.3823285,103.76740], {icon: farmIcon2}).bindPopup('新增菜园: Block 410').addTo(map);
//Layer Group
//Holland-Bukit Timah Landmarks
var holland_bukittimah_landmarks = L.layerGroup([singaporezoo, /*nusbukitimah, bukitbrowncemetery, beautyworld,*/ bukittimahnaturereserve, discsandbox, jinshanlingcafe]);
//Holland-Bukit Timah: Community Gardens (Current)
var holland_bukittimah_currentCG = L.layerGroup([bukittimah_currentCG_201, bukittimah_currentCG_210, bukittimah_currentCG_116, bukittimah_currentCG_253, bukittimah_currentCG_412, bukittimah_currentCG_248, bukittimah_currentCG_234, bukittimah_currentCG_436, bukittimah_currentCG_419, bukittimah_currentCG_105, bukittimah_currentCG_519_521, bukittimah_currentCG_118, bukittimah_currentCG_4, bukittimah_currentCG_305]);
//Holland-Bukit Timah: Community Gardens (Newly Added)
var holland_bukittimah_newCG = L.layerGroup([bukittimah_newCG_206, bukittimah_newCG_237, bukittimah_newCG_402, bukittimah_newCG_410, bukittimah_newCG_417, bukittimah_newCG_429, bukittimah_newCG_434]);
//Holland-Bukit Timah Landmarks
var sembawang_landmarks = L.layerGroup([hotspring, /*nusbukitimah, bukitbrowncemetery, beautyworld,*/ waterfront, melayu, beaulieuhouse, admiraltyhouse]);
var sembawang_newCG = L.layerGroup([sembawang_newsCG_WL_South, sembawang_newsCG_WL_North, sembawang_newsCG_Forestville, sembawang_newsCG_Twin_Fountains, sembawang_newsCG_Bellewoods, sembawang_newsCG_SkyPark, sembawang_newsCG_Woods_Square, sembawang_newsCG_WGH, sembawang_newsCG_BWN, sembawang_newsCG_YIM, sembawang_newsCG_KA ]);
var overlayMaps = {
"<img src='images/icons/9.png' width='20px'/> 荷兰-武吉班让: 景点": holland_bukittimah_landmarks,
"<img src='images/icons/veggie.png' width='20px'/> 荷兰-武吉班让: 现有菜园": holland_bukittimah_currentCG,
"<img src='images/icons/veggie2.png' width='20px'/> 荷兰-武吉班让: 新增菜园": holland_bukittimah_newCG,
"<img src='images/icons/9.png' width='20px'/> 三巴旺: 景点": sembawang_landmarks,
"<img src='images/icons/2.png' width='20px'/> 三巴旺: 新的基础设施": sembawang_newCG
};
$( "#tabs" ).tabs();
var layer = L.tileLayer('http://{s}.tiles.sgmap.xyz/tiles/2015_cn/{z}/{x}/{y}.png')
/* var layer = L.tileLayer('https://api.tiles.mapbox.com/v4/sla.bc2b0f5b/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17', {
attribution: '<a href="http://onemap.sg" target="_blank">OneMap.sg</a>',
subdomains: ['a','b','c','d'],
token: 'pk.eyJ1IjoiZmVsaXhtaWNoZWwiLCJhIjoiZWZrazRjOCJ9.62fkOEqGMxFxJZPJuo2iIQ'
})*/
map.addLayer(layer);
L.control.layers(null, overlayMaps).addTo(map);
// add a namedmap from Cartodb
/*cartodb.createLayer(map, {
user_name: 'slaadmin',
type: 'namedmap',
named_map: {
name: "slaadmin@basemap_text_labels_chinese_final_zaobao_v2"
//name: "slaadmin@test_labels"
}
})
.addTo(map).done( function(layer) {
//console.log("Template Layer successfully created.");
}).error(function (){
//console.log('There is something wrong with requested data!');
})*/
var layerUrl = 'https://slageospatial.cartodb.com/u/slaadmin/api/v2/viz/35036a48-5c4a-11e5-9a32-7054d21a95e5/viz.json';
//var layerUrl = 'https://slageospatial.cartodb.com/u/slaadmin/api/v2/viz/d2effdf8-2a03-11e5-ae08-7054d21a95e5/viz.json';
//var sql = new cartodb.SQL({ user: 'slaadmin', format: 'geojson' });
// add Cartodb layer with overlaying onto namedmap
cartodb.createLayer(map, layerUrl)
.addTo(map)
.done(function(layer) {
/*var subLayerOptions = {
sql: "SELECT * FROM town_counc_chinese",
cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
}*/
var sublayer = layer.getSubLayer(0);
sublayer.setInteraction(false);
//sublayer.set(subLayerOptions);
/*sublayer.on('mouseover', function(e) {
e.layer.setStyle({
weight: 3,
opacity: 1
});
});*/
/*sql.execute("select cartodb_id, shape_area, shape_leng, ST_Simplify(the_geom, 0.1) as the_geom from town_counc_chinese").done(function(geojson) {
//sublayer.addData(geojson);
sublayer.on('mouseover', function(e) {
e.layer.setStyle({
weight: 3,
opacity: 1
});
})
sublayer.on('mouseout', function(e) {
sublayer.resetStyle(e.layer);
});
});*/
/*sublayer.infowindow.set({
template: INFOWINDOW_TEMPLATE,
sanitizeTemplate: false,
width: 300,
height: 300,
maxHeight: 300
});*/
}).on('error', function(err) {
//log the error
//console.log(err);
});
}
window.onload = main;
</script>
<!-- Include JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.4.1/canvas.min.js"></script>
<script src="http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="js/d3pie.min.js"></script>
<!-- add for bottom -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- featherlight js -->
<script src="js/featherlight.js" type="text/javascript" charset="utf-8"></script>
<script>
function changeImage(element) {
var right = "images/icons/icon_piechart.png";
var left = "images/icons/icon_piechartHighlight.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
}
</script>
<!--<script src="js/leaflet.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment