LeafletのポップアップのsytleやpopupContentの挙動がわからない

javascript
1<!doctype html>
2<html lang="js">
3<head>
4    <title>CATマップ</title>
5    <!--[if lt IE 9]>
6    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
7    <![endif]-->
8    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
9    <link rel="stylesheet" href="dist/leaflet.css" />
10    <link rel="stylesheet" href="src/leaflet-search.css" />
11    <link rel="stylesheet" href="src/style.css" />
12</head>
13<body>
14    <!-- html -->
15<div id="map" style="width: 800px; height: 800px"></div>
16<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
17
18<div class="div_cat"></div>
19<form name="form1" action="">
20    <input name="textBox1" type="text" value="" />
21    <input id="exec" type="button" value="Exec"/>
22</form>
23<hr />
24<div id="output"></div>
25<script src="cat_geojson.js" type="text/javascript"></script>
26<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
27<script>
28/////////////
29//map start
30var cat_box = new L.LayerGroup();
31
32var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
33    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
34    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
35mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
36
37var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
38    streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});
39
40var map = L.map('map', {
41    center: [38.00,137.00],//緯度経度latlng
42    zoom: 6,
43    layers: [grayscale, cat_box]
44});
45
46var baseLayers = {
47    "Grayscale": grayscale,
48    "Streets": streets
49};
50
51var overlays = {
52   "ネコマップ" : cat_box
53};
54
55L.control.layers(baseLayers, overlays).addTo(map);
56//map end
57/////////////
58//test
59var p1 = L.point(10, 10),
60p2 = L.point(40, 60),
61bounds = L.bounds(p1, p2);
62
63////test start
64function onEachFeature(feature, layer) {
65    // does this feature have a property named popupContent?
66    if (feature.properties && feature.properties.popupContent) {
67        layer.bindPopup(feature.properties.popupContent);
68    }
69}
70
71L.geoJSON(cat, {
72    onEachFeature: onEachFeature,
73
74//ここを入れるとスタイルは反映され、ポップアップが立たなくなる
75            pointToLayer: function (feature, latlng) {
76            return L.circleMarker(latlng, {
77                radius: 8,
78                fillColor: "#ff7800",
79                color: "#000",
80                weight: 1,
81                opacity: 1,
82                fillOpacity: 0.8
83            });
84        }
85//ここを入れるとスタイルは反映され、ポップアップが立たなくなる end
86
87}).addTo(map);
88
89////test end
90
91
92</script>
93</body>
94</html>
95