Skip to content

Instantly share code, notes, and snippets.

@bshiro
Last active January 1, 2020 09:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bshiro/390f93475112fc3d7fc9078eb50be6e9 to your computer and use it in GitHub Desktop.
Save bshiro/390f93475112fc3d7fc9078eb50be6e9 to your computer and use it in GitHub Desktop.
POI map
<!DOCTYPE html>
<html>
<head>
<title>POI map</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Turbo87/leaflet-sidebar/master/src/L.Control.Sidebar.css" />
<script src="https://cdn.rawgit.com/Turbo87/leaflet-sidebar/master/src/L.Control.Sidebar.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/CliffCloud/Leaflet.EasyButton/master/src/easy-button.css" />
<script src="https://cdn.rawgit.com/CliffCloud/Leaflet.EasyButton/master/src/easy-button.js"></script>
<style>
.arrow{
font-size: 1.5em;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
.textlink {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="sidebar">
<h1>Locations</h1>
</div>
<div id="map" style="width: 960px; height: 500px"></div>
<script type="text/javascript">
var map = L.map('map').setView([34.69644281, 113.693815], 10);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
map._initPathRoot()
var sidebar = L.control.sidebar('sidebar', {
closeButton: false,
position: 'left'
});
var svg = d3.select("#map").select("svg"),
g = svg.append("g");
var c10 = d3.scale.category10();
var typeList = ["Aquarium", "Botanic Garden", "Children's Park", "Indoor Children's Park",
"Movie theater", "Museum", "Shopping Mall", "Theme Park","Waterpark", "Zoo"];
var typeMap = {"Aquarium":0, "Botanic Garden":1, "Children's Park":2, "Indoor Children's Park":3,
"Movie theater":4, "Museum":5, "Shopping Mall":6, "Theme Park":7,"Waterpark":8, "Zoo":9};
d3.json("poi.json", function(collection) {
/* Add a LatLng object to each item in the dataset */
var div = document.getElementById('sidebar');
//console.log(div);
var sidebarDiv = d3.select('#sidebar');
//console.log(sidebarDiv);
collection.forEach(function(d, i) {
d.LatLng = new L.LatLng(d.Latitude, d.Longitude)
d.id = i+1;
if (d.Attendance)
d.Attendance = +d.Attendance;
else
d.Attendance = 0;
//sidebarDiv.innerHTML += d.id + '. ' + d.Name + '<br>';
})
sidebarDiv.selectAll("text")
.data(collection)
.enter().append("text")
.attr("class", "textlink")
//.text(function(d) {return d.id + '. ' + d.Name ;})
.html(function(d) {return d.id + '. ' + d.Name + '<br>';})
.on({
"click": function(d) {
d3.select(this).style("cursor", "pointer")
map.setView([d.Latitude, d.Longitude], 13);
map.panBy([-sidebar.getOffset() / 2, 0], { duration: 0.5 });
//console.log(sidebar.getOffset());
},
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer")
},
"mouseout": function(d) {
d3.select(this).style("cursor", "default")
}
})
var feature = g.selectAll("g")
.data(collection)
.enter().append("g")
feature.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer")
},
"mouseout": function(d) {
d3.select(this).style("cursor", "default")
}
})
feature.append("title")
.text(function(d) { return d.Name; })
feature.append("circle")
.style("stroke", "black")
.style("stroke-width", "1.5px")
.style("opacity", 1)
//.style("fill", "red")
.style("fill", function(d) {return c10(typeMap[d.Type]);})
.attr("r", function(d){
return 10;
//if (d.Attendance>0)
// return (d.Attendance / 60000);
//else
// return 2;
})
feature.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.style("font-size", function(d){
return 10;
//if (d.Attendance>0)
// return 10;
//else
// return 0;
})
.text(function(d) {return d.id;})
map.on("viewreset", update);
update();
function update() {
feature.attr("transform",
function(d) {
return "translate("+
map.latLngToLayerPoint(d.LatLng).x +","+
map.latLngToLayerPoint(d.LatLng).y +")";
}
)
}
})
var toggle = L.easyButton({
states: [
{
stateName: 'hide-sidebar',
icon: '<span class="arrow">&ltrif;</span>',
title: 'hide sidebar',
onClick: function(control) {
sidebar.hide();
control.state('show-sidebar');
}
},
{
stateName: 'show-sidebar',
icon: '<span class="arrow">&rtrif;</span>',
title: 'show sidebar',
onClick: function (control) {
sidebar.show();
control.state('hide-sidebar');
}
}
]
});
toggle.addTo(map);
map.addControl(sidebar);
setTimeout(function () {
sidebar.show();
}, 500);
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < typeList.length; i++) {
div.innerHTML += '<i style="background:' + c10(i) + '"></i> ' + typeList[i] + '<br>';
}
return div;
};
legend.addTo(map);
</script>
</body>
</html>
[
{
"Name": "Zhengzhou Aquarium",
"Type": "Aquarium",
"Latitude": 34.819705,
"Longitude": 113.658048,
"Attendance": "",
"Meituan # of ratings/reviews": 3147
},
{
"Name": "Jinyi Ocean Paradise",
"Type": "Aquarium",
"Latitude": 34.763407,
"Longitude": 113.605205,
"Attendance": "",
"Meituan # of ratings/reviews": 1180
},
{
"Name": "Pulansi Levender Manor",
"Type": "Botanic Garden",
"Latitude": 34.901162,
"Longitude": 113.716398,
"Attendance": "",
"Meituan # of ratings/reviews": 474
},
{
"Name": "China Green Expo Garden",
"Type": "Botanic Garden",
"Latitude": 34.754331,
"Longitude": 113.932779,
"Attendance": "",
"Meituan # of ratings/reviews": 1889
},
{
"Name": "Meebo Wild Children Theme Park",
"Type": "Children's Park",
"Latitude": 34.730992,
"Longitude": 113.894008,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Shentong Wangguo Indoor Children's Park",
"Type": "Indoor Children's Park",
"Latitude": 34.7578389,
"Longitude": 113.6018596,
"Attendance": "",
"Meituan # of ratings/reviews": 2465
},
{
"Name": "Zhongyuan Wanda Movie Theater",
"Type": "Movie theater",
"Latitude": 34.74701843,
"Longitude": 113.6024889,
"Attendance": 1000000,
"Meituan # of ratings/reviews": 7453
},
{
"Name": "CGV Movie Theater",
"Type": "Movie theater",
"Latitude": 34.75687619,
"Longitude": 113.6662523,
"Attendance": "",
"Meituan # of ratings/reviews": 354
},
{
"Name": "Oscar Longsheng Movie Theater",
"Type": "Movie theater",
"Latitude": 34.72510275,
"Longitude": 113.6407802,
"Attendance": 1000000,
"Meituan # of ratings/reviews": 58472
},
{
"Name": "Wanda Film (Erqi)",
"Type": "Movie theater",
"Latitude": 34.717832,
"Longitude": 113.642997,
"Attendance": 1100000,
"Meituan # of ratings/reviews": 4506
},
{
"Name": "Oscar (Da Shanghai)",
"Type": "Movie theater",
"Latitude": 34.756138,
"Longitude": 113.66917,
"Attendance": 1300000,
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Yaolai Chenglong Film (Jinyi)",
"Type": "Movie theater",
"Latitude": 34.762244,
"Longitude": 113.608912,
"Attendance": 1600000,
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Oscar (Manhattan)",
"Type": "Movie theater",
"Latitude": 34.761055,
"Longitude": 113.708086,
"Attendance": 710000,
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Oscar (Xinjianwen)",
"Type": "Movie theater",
"Latitude": 34.773975,
"Longitude": 113.669152,
"Attendance": 720000,
"Meituan # of ratings/reviews": 41339
},
{
"Name": "(New mart)",
"Type": "Movie theater",
"Latitude": 34.785437,
"Longitude": 113.680786,
"Attendance": 690000,
"Meituan # of ratings/reviews": 8932
},
{
"Name": "Hengdian Film (Baisheng)",
"Type": "Movie theater",
"Latitude": 34.754221,
"Longitude": 113.670535,
"Attendance": 700000,
"Meituan # of ratings/reviews": 1699
},
{
"Name": "Oscar (Dashijie)",
"Type": "Movie theater",
"Latitude": 34.7873,
"Longitude": 113.673583,
"Attendance": 500000,
"Meituan # of ratings/reviews": 26880
},
{
"Name": "Hengdian Film (Baolong)",
"Type": "Movie theater",
"Latitude": 34.781556,
"Longitude": 113.735239,
"Attendance": 400000,
"Meituan # of ratings/reviews": 7557
},
{
"Name": "Qitiandi Film",
"Type": "Movie theater",
"Latitude": 34.777813,
"Longitude": 113.722267,
"Attendance": 300000,
"Meituan # of ratings/reviews": 40482
},
{
"Name": "Joy World Film",
"Type": "Movie theater",
"Latitude": 34.560518,
"Longitude": 113.859327,
"Attendance": 150000,
"Meituan # of ratings/reviews": 9443
},
{
"Name": "Baoli Film (MK Shiji Plaza)",
"Type": "Movie theater",
"Latitude": 34.785451,
"Longitude": 113.704776,
"Attendance": 290000,
"Meituan # of ratings/reviews": 43009
},
{
"Name": "Zhengzhou Tech Museum",
"Type": "Museum",
"Latitude": 34.745902,
"Longitude": 113.627896,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Zhengzhou Museum",
"Type": "Museum",
"Latitude": 34.745348,
"Longitude": 113.627349,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Henan Museum",
"Type": "Museum",
"Latitude": 34.788141,
"Longitude": 113.672112,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Jinlu Ostrich Park",
"Type": "Theme Park",
"Latitude": 34.674811,
"Longitude": 113.795882,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Zhongyuan Wanda Plaza",
"Type": "Shopping Mall",
"Latitude": 34.74653843,
"Longitude": 113.6014609,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Zhengzhou Dennis David City",
"Type": "Shopping Mall",
"Latitude": 34.75772819,
"Longitude": 113.6658343,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Wanxiang City",
"Type": "Shopping Mall",
"Latitude": 34.75495219,
"Longitude": 113.6619493,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Dennis Mall Road)",
"Type": "Shopping Mall",
"Latitude": 34.75688665,
"Longitude": 113.6748732,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Wanda Plaza ( Erqi )",
"Type": "Shopping Mall",
"Latitude": 34.718373,
"Longitude": 113.643037,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Dashang Newmart",
"Type": "Shopping Mall",
"Latitude": 34.785422,
"Longitude": 113.680711,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Dennis Mall (Huayuan Road)",
"Type": "Shopping Mall",
"Latitude": 34.787107,
"Longitude": 113.682398,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Guomao 360",
"Type": "Shopping Mall",
"Latitude": 34.784956,
"Longitude": 113.68096,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Dashang New Mart (Jinboda)",
"Type": "Shopping Mall",
"Latitude": 34.755608,
"Longitude": 113.665328,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Dennis 7 Tiandi",
"Type": "Shopping Mall",
"Latitude": 34.778275,
"Longitude": 113.722778,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Jinyi Shopping Mall",
"Type": "Shopping Mall",
"Latitude": 34.761737,
"Longitude": 113.610225,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Beijing Hualian (Erqi)",
"Type": "Shopping Mall",
"Latitude": 34.754499,
"Longitude": 113.664807,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Capital Mall",
"Type": "Shopping Mall",
"Latitude": 34.749282,
"Longitude": 113.724832,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Zhengdao Huayuan",
"Type": "Shopping Mall",
"Latitude": 34.76925,
"Longitude": 113.682731,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Zhengdao Zhonghuan Department Store",
"Type": "Shopping Mall",
"Latitude": 34.778056,
"Longitude": 113.680783,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Wangfujin Department Store (Jinfang Road)",
"Type": "Shopping Mall",
"Latitude": 34.761286,
"Longitude": 113.612296,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Parkson",
"Type": "Shopping Mall",
"Latitude": 34.754157,
"Longitude": 113.670935,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Yudafu Department Store",
"Type": "Shopping Mall",
"Latitude": 34.746726,
"Longitude": 113.623218,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Fudu Department Store",
"Type": "Shopping Mall",
"Latitude": 34.719981,
"Longitude": 113.701175,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Dashang New Mart (Zijinshan)",
"Type": "Shopping Mall",
"Latitude": 34.762349,
"Longitude": 113.6812,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Dashang Qiansheng (Baolong)",
"Type": "Shopping Mall",
"Latitude": 34.782488,
"Longitude": 113.737872,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "New World Department Store",
"Type": "Shopping Mall",
"Latitude": 34.753537,
"Longitude": 113.682665,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Da Shanghai City",
"Type": "Shopping Mall",
"Latitude": 34.75594865,
"Longitude": 113.6686452,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Zhengzhou Fangte Adventure",
"Type": "Theme Park",
"Latitude": 34.76193702,
"Longitude": 113.9298284,
"Attendance": 2000000,
"Meituan # of ratings/reviews": 16019
},
{
"Name": "Zhengzhou Fangte Dream Land",
"Type": "Theme Park",
"Latitude": 34.766912,
"Longitude": 113.925502,
"Attendance": 700000,
"Meituan # of ratings/reviews": 1277
},
{
"Name": "Shiji Huanle Yuan",
"Type": "Theme Park",
"Latitude": 34.730926,
"Longitude": 113.719798,
"Attendance": 800000,
"Meituan # of ratings/reviews": 11200
},
{
"Name": "Zhengzhou Fangte Water Park",
"Type": "Waterpark",
"Latitude": 34.765567,
"Longitude": 113.935922,
"Attendance": 350000,
"Meituan # of ratings/reviews": 3789
},
{
"Name": "Oparara Water park",
"Type": "Waterpark",
"Latitude": 34.75449,
"Longitude": 113.451708,
"Attendance": 350000,
"Meituan # of ratings/reviews": 14186
},
{
"Name": "Baihuidi Catoon Waterpark",
"Type": "Waterpark",
"Latitude": 34.92259378,
"Longitude": 113.5502374,
"Attendance": "",
"Meituan # of ratings/reviews": 141
},
{
"Name": "Huanghe Malawan Water Park",
"Type": "Waterpark",
"Latitude": 34.917107,
"Longitude": 113.565532,
"Attendance": 300000,
"Meituan # of ratings/reviews": 2183
},
{
"Name": "Renming Gongyuan Waterpark",
"Type": "Waterpark",
"Latitude": 34.759336,
"Longitude": 113.663766,
"Attendance": "",
"Meituan # of ratings/reviews": 985
},
{
"Name": "Happy Ocean Waterpark",
"Type": "Waterpark",
"Latitude": 34.48197173,
"Longitude": 113.5500702,
"Attendance": "",
"Meituan # of ratings/reviews": 714
},
{
"Name": "Loves Water World",
"Type": "Waterpark",
"Latitude": 34.47029183,
"Longitude": 113.7252445,
"Attendance": "",
"Meituan # of ratings/reviews": 202
},
{
"Name": "Yinji Water Park",
"Type": "Waterpark",
"Latitude": 34.48197173,
"Longitude": 113.5500702,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
},
{
"Name": "Zhengzhou Zoo",
"Type": "Zoo",
"Latitude": 34.789393,
"Longitude": 113.685121,
"Attendance": "",
"Meituan # of ratings/reviews": "Not Available"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment