wonkpentink/20px.svg

## 20px.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="20.000000pt" height="20.000000pt" viewBox="0 0 20.000000 20.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,20.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M65 191 c-64 -27 -81 -110 -32 -158 60 -61 162 -19 162 67 0 66 -72
116 -130 91z"/>
</g>
</svg>

## data.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              data.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Korupedia Map</title>
    <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
    <style>
        #mapid { height: 500px; background: #EEEEEE; }
        body{
            margin: 0px;
            padding: 0pc;
        }
        #info{
            margin-top: 20px;
            text-decoration: none;
            margin-left: 10px;
            text-align: center;
        }
        #info a{
            color: black;
            text-decoration: none;
            font-size: 30px;
        }
        div#title {
            padding: 10px;
            position: absolute;
            z-index: 10000;
            background: white;
            border: 1px solid #AAA;
            right: 10px;
            top: 10px;
            font-family: sans-serif;
            font-size: 15px;
        }

        div#title span {
            font-weight: 700;
            font-size: 18px;
        }
        #tooltip{
            padding: 7px;
            position: absolute;
            z-index: 100000;
            background: white;
            border: 1px solid #888;
            font-family: sans-serif;
            display: none;
        }
        #tooltip a{
            text-decoration: none;
            color: black;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="title"><span id="total">0</span> koruptor tertangkap di <span>Indonesia</span> dari data <span>Korupedia</span>.</div>
    <div id="tooltip">Ini tooltip</div>
    <div id="mapid"></div>
    <div id="info">
        <a href="http://korupedia.org/">Korupedia Map</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
    <script type="text/javascript">
        var mymap = L.map('mapid',{
            'minZoom' : 5,
            'maxZoom' : 10
        }).setView([-1.736, 119.246], 5);


        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(mymap);


        $(document).ready(function () {
            var geojson_url = 'https://gist.githubusercontent.com/wonkpentink/9e75f7732bf246571f55a1974f22e30a/raw/9f42f50231ec08b1314f4627f56d2c241e6dacab/map.geojson';
            $.get( geojson_url, function( data ) {
                data = JSON.parse(data);


                function style(feature) {
                    return {
                        fillColor: '#FFFFFF',
                        weight: 2,
                        opacity: 1,
                        color: '#81D4FA',
                        dashArray: '3',
                        fillOpacity: 0.7
                    };
                }

                function highlightFeature(e) {
                    var layer = e.target;

                    layer.setStyle({
                        weight: 2,
                        color: '#81D4FA',
                        fillColor: '#FFECB3',
                        dashArray: '3',
                        fillOpacity: 0.7,
                        opacity: 1
                    });

                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }

                    //info.update(layer.feature.properties);
                }

                var geojson;

                function resetHighlight(e) {
                    geojson.resetStyle(e.target);
                    //info.update();
                }

                function zoomToFeature(e) {
                    console.log(e);
                    mymap.fitBounds(e.target.getBounds());
                }

                function onEachFeature(feature, layer) {
                    layer.on({
                        mouseover: highlightFeature,
                        mouseout: resetHighlight,
                        click: zoomToFeature
                    });
                }

                geojson = L.geoJson(data, {
                    style: style,
                    onEachFeature: onEachFeature
                }).addTo(mymap);


                // L.geoJson(data, { style:style }).addTo(mymap);

            });


            $.get( "data.json", function( data ) {
                //data = JSON.parse(data);
                // console.log(data);
                //var total = _.size(data.features);
                var total = 0;
                //$('#total').html(total);
                var time = 0;
                var myIcon = L.icon({
                    iconUrl: '20px.svg',
                    // iconRetinaUrl: 'my-icon@2x.png',
                    iconSize: [10, 10],
                    iconAnchor: [0, 0],
                    // popupAnchor: [-3, -76],
                    // shadowUrl: 'my-icon-shadow.png',
                    // shadowRetinaUrl: 'my-icon-shadow@2x.png',
                    // shadowSize: [68, 95],
                    // shadowAnchor: [22, 94]
                });
                _.forEach(data.features, function(value, key) {
                    // console.log(value);

                    time = time + 10;

                    setTimeout(function () {
                        total = total + 1;
                        L.marker([value.geometry.coordinates[1], value.geometry.coordinates[0]], {icon: myIcon})
                                .addTo(mymap)
                                .on('click', function (e) {
                                    console.log(e.target);
                                    $('#info').html(value.properties.name);
                                })
                                .on('mouseover',function (e) {
                                    $('#tooltip').html(value.properties.name);
                                    $("#tooltip").css("top", e.originalEvent.clientY - 20 );
                                    $("#tooltip").css("left", e.originalEvent.clientX + 20);
                                    $('#tooltip').show();
                                })
                                .on('mouseout',function (e) {
                                    $('#tooltip').html('loading');
                                    $('#tooltip').hide();
                                })
                        ;


                        $('#info').html(value.properties.name);
                        $('#total').html(total);
                    }, time );

                });

            });
        });


    </script>
</body>
</html>
	<?xml version="1.0" standalone="no"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
	"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
	<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
	width="20.000000pt" height="20.000000pt" viewBox="0 0 20.000000 20.000000"
	preserveAspectRatio="xMidYMid meet">
	<metadata>
	Created by potrace 1.13, written by Peter Selinger 2001-2015
	</metadata>
	<g transform="translate(0.000000,20.000000) scale(0.100000,-0.100000)"
	fill="#000000" stroke="none">
	<path d="M65 191 c-64 -27 -81 -110 -32 -158 60 -61 162 -19 162 67 0 66 -72
	116 -130 91z"/>
	</g>
	</svg>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Korupedia Map</title>
	<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
	<style>
	#mapid { height: 500px; background: #EEEEEE; }
	body{
	margin: 0px;
	padding: 0pc;
	}
	#info{
	margin-top: 20px;
	text-decoration: none;
	margin-left: 10px;
	text-align: center;
	}
	#info a{
	color: black;
	text-decoration: none;
	font-size: 30px;
	}
	div#title {
	padding: 10px;
	position: absolute;
	z-index: 10000;
	background: white;
	border: 1px solid #AAA;
	right: 10px;
	top: 10px;
	font-family: sans-serif;
	font-size: 15px;
	}

	div#title span {
	font-weight: 700;
	font-size: 18px;
	}
	#tooltip{
	padding: 7px;
	position: absolute;
	z-index: 100000;
	background: white;
	border: 1px solid #888;
	font-family: sans-serif;
	display: none;
	}
	#tooltip a{
	text-decoration: none;
	color: black;
	font-size: 14px;
	}
	</style>
	</head>
	<body>
	<div id="title"><span id="total">0</span> koruptor tertangkap di <span>Indonesia</span> dari data <span>Korupedia</span>.</div>
	<div id="tooltip">Ini tooltip</div>
	<div id="mapid"></div>
	<div id="info">
	<a href="http://korupedia.org/">Korupedia Map</a>
	</div>

	<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
	<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
	<script type="text/javascript">
	var mymap = L.map('mapid',{
	'minZoom' : 5,
	'maxZoom' : 10
	}).setView([-1.736, 119.246], 5);


	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(mymap);


	$(document).ready(function () {
	var geojson_url = 'https://gist.githubusercontent.com/wonkpentink/9e75f7732bf246571f55a1974f22e30a/raw/9f42f50231ec08b1314f4627f56d2c241e6dacab/map.geojson';
	$.get( geojson_url, function( data ) {
	data = JSON.parse(data);


	function style(feature) {
	return {
	fillColor: '#FFFFFF',
	weight: 2,
	opacity: 1,
	color: '#81D4FA',
	dashArray: '3',
	fillOpacity: 0.7
	};
	}

	function highlightFeature(e) {
	var layer = e.target;

	layer.setStyle({
	weight: 2,
	color: '#81D4FA',
	fillColor: '#FFECB3',
	dashArray: '3',
	fillOpacity: 0.7,
	opacity: 1
	});

	if (!L.Browser.ie && !L.Browser.opera) {
	layer.bringToFront();
	}

	//info.update(layer.feature.properties);
	}

	var geojson;

	function resetHighlight(e) {
	geojson.resetStyle(e.target);
	//info.update();
	}

	function zoomToFeature(e) {
	console.log(e);
	mymap.fitBounds(e.target.getBounds());
	}

	function onEachFeature(feature, layer) {
	layer.on({
	mouseover: highlightFeature,
	mouseout: resetHighlight,
	click: zoomToFeature
	});
	}

	geojson = L.geoJson(data, {
	style: style,
	onEachFeature: onEachFeature
	}).addTo(mymap);


	// L.geoJson(data, { style:style }).addTo(mymap);

	});


	$.get( "data.json", function( data ) {
	//data = JSON.parse(data);
	// console.log(data);
	//var total = _.size(data.features);
	var total = 0;
	//$('#total').html(total);
	var time = 0;
	var myIcon = L.icon({
	iconUrl: '20px.svg',
	// iconRetinaUrl: 'my-icon@2x.png',
	iconSize: [10, 10],
	iconAnchor: [0, 0],
	// popupAnchor: [-3, -76],
	// shadowUrl: 'my-icon-shadow.png',
	// shadowRetinaUrl: 'my-icon-shadow@2x.png',
	// shadowSize: [68, 95],
	// shadowAnchor: [22, 94]
	});
	_.forEach(data.features, function(value, key) {
	// console.log(value);

	time = time + 10;

	setTimeout(function () {
	total = total + 1;
	L.marker([value.geometry.coordinates[1], value.geometry.coordinates[0]], {icon: myIcon})
	.addTo(mymap)
	.on('click', function (e) {
	console.log(e.target);
	$('#info').html(value.properties.name);
	})
	.on('mouseover',function (e) {
	$('#tooltip').html(value.properties.name);
	$("#tooltip").css("top", e.originalEvent.clientY - 20 );
	$("#tooltip").css("left", e.originalEvent.clientX + 20);
	$('#tooltip').show();
	})
	.on('mouseout',function (e) {
	$('#tooltip').html('loading');
	$('#tooltip').hide();
	})
	;



	$('#info').html(value.properties.name);
	$('#total').html(total);
	}, time );

	});

	});
	});


	</script>
	</body>
	</html>