Skip to content

Commit

Permalink
ch7map
Browse files Browse the repository at this point in the history
  • Loading branch information
@wizardforcel
wizardforcel committed Dec 27, 2017
1 parent 8ed74dd commit 14fd2b8
Show file tree
Hide file tree
Showing 5 changed files with 12 additions and 0 deletions.
8 changes: 8 additions & 0 deletions 7.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1316,6 +1316,8 @@ stations
Marker.map_table(stations.select('lat', 'long', 'name'))
```

[地图 1](src/7-1.html)

地图使用 OpenStreetMap 创建的，OpenStreetMap 是一个开放的在线地图系统，你可以像使用 Google 地图或任何其他在线地图一样使用。 放大到旧金山，看看车站如何分布。 点击一个标记，看看它是哪个站。

你也可以用彩色圆圈表示地图上的点。 这是旧金山自行车站的地图。
Expand All @@ -1326,6 +1328,8 @@ sf_map_data = sf.select('lat', 'long', 'name')
Circle.map_table(sf_map_data, color='green', radius=200)
```

[地图 2](src/7-2.html)

### 更多信息的地图：`join`的应用

自行车站位于湾区五个不同的城市。 为了区分每个城市，通过使用不同的颜色，我们首先使用`group`来标识所有城市，并为每个城市分配一个颜色。
Expand Down Expand Up @@ -1366,6 +1370,8 @@ Marker.map_table(colored)

```

[地图 3](src/7-3.html)

现在五个不同城市由五种不同颜色标记。

要查看大部分自行车租赁的来源，让我们确定起点站：
Expand Down Expand Up @@ -1433,4 +1439,6 @@ Circle.map_table(starts_map_data)

（省略了 65 行）

[地图 4](src/7-4.html)

旧金山的一大块表明，这个城市的东部是湾区自行车租赁的重点区域。
1 change: 1 addition & 0 deletions src/7-1.html
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/7-2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!DOCTYPE html> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /> <link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css&quot; /> <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js&quot;></script> <script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;></script> <link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;> <link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot;> <script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&quot;></script> <link href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;> <link rel=&quot;stylesheet&quot; href=&quot;https://rawgit.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.css&quot;> <script src=&quot;https://rawgithub.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.js&quot;></script> <link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css&quot;> <link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css&quot;> <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js&quot;></script> <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js&quot;></script> <link rel=&quot;stylesheet&quot; href=&quot;https://birdage.github.io/Leaflet.awesome-markers/dist/leaflet.awesome.rotate.css&quot;> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #map { position:absolute; top:0; bottom:0; right:0; left:0; } </style> </head> <body> <div class=&quot;folium-map&quot; id=&quot;folium_5a2652b02dfc46ff988693e411b081d5&quot; style=&quot;width: 960px; height: 500px&quot;></div> <script> var base_tile = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 17, minZoom: 10.0, attribution: 'Map data (c) <a href=&quot;http://openstreetmap.org&quot;>OpenStreetMap</a> contributors' }); var baseLayer = { &quot;Base Layer&quot;: base_tile }; /* addition of the wms layers */ /* addition of the tile layers */ /* list of layers to be added */ var layer_list = { }; /* Bounding box. */ var southWest = L.latLng(-90, -180), northEast = L.latLng(90, 180), bounds = L.latLngBounds(southWest, northEast); /* Creates the map and adds the selected layers */ var map = L.map('folium_5a2652b02dfc46ff988693e411b081d5', { center:[37.787914, -122.4034835], zoom: 12.0, maxBounds: bounds, layers: [base_tile] }); L.control.layers(baseLayer, layer_list).addTo(map); //cluster group var clusteredmarkers = L.markerClusterGroup(); //section for adding clustered markers //add the clustered markers to the group anyway map.addLayer(clusteredmarkers); var circle_1 = L.circle([37.795001, -122.39997], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_1.bindPopup(&quot;Clay at Battery&quot;); circle_1._popup.options.maxWidth = 300; map.addLayer(circle_1) var circle_2 = L.circle([37.79728, -122.398436], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_2.bindPopup(&quot;Davis at Jackson&quot;); circle_2._popup.options.maxWidth = 300; map.addLayer(circle_2) var circle_3 = L.circle([37.794231, -122.402923], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_3.bindPopup(&quot;Commercial at Montgomery&quot;); circle_3._popup.options.maxWidth = 300; map.addLayer(circle_3) var circle_4 = L.circle([37.795425, -122.404767], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_4.bindPopup(&quot;Washington at Kearney&quot;); circle_4._popup.options.maxWidth = 300; map.addLayer(circle_4) var circle_5 = L.circle([37.788975, -122.403452], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_5.bindPopup(&quot;Post at Kearney&quot;); circle_5._popup.options.maxWidth = 300; map.addLayer(circle_5) var circle_6 = L.circle([37.799953, -122.398525], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_6.bindPopup(&quot;Embarcadero at Vallejo&quot;); circle_6._popup.options.maxWidth = 300; map.addLayer(circle_6) var circle_7 = L.circle([37.790302, -122.390637], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_7.bindPopup(&quot;Spear at Folsom&quot;); circle_7._popup.options.maxWidth = 300; map.addLayer(circle_7) var circle_8 = L.circle([37.795392, -122.394203], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_8.bindPopup(&quot;Harry Bridges Plaza (Ferry Building)&quot;); circle_8._popup.options.maxWidth = 300; map.addLayer(circle_8) var circle_9 = L.circle([37.791464, -122.391034], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_9.bindPopup(&quot;Embarcadero at Folsom&quot;); circle_9._popup.options.maxWidth = 300; map.addLayer(circle_9) var circle_10 = L.circle([37.783871, -122.408433], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_10.bindPopup(&quot;Powell Street BART&quot;); circle_10._popup.options.maxWidth = 300; map.addLayer(circle_10) var circle_11 = L.circle([37.787152, -122.388013], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_11.bindPopup(&quot;Embarcadero at Bryant&quot;); circle_11._popup.options.maxWidth = 300; map.addLayer(circle_11) var circle_12 = L.circle([37.789756, -122.394643], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_12.bindPopup(&quot;Temporary Transbay Terminal (Howard at Beale)&quot;); circle_12._popup.options.maxWidth = 300; map.addLayer(circle_12) var circle_13 = L.circle([37.792251, -122.397086], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_13.bindPopup(&quot;Beale at Market&quot;); circle_13._popup.options.maxWidth = 300; map.addLayer(circle_13) var circle_14 = L.circle([37.781752, -122.405127], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_14.bindPopup(&quot;5th at Howard&quot;); circle_14._popup.options.maxWidth = 300; map.addLayer(circle_14) var circle_15 = L.circle([37.77865, -122.418235], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_15.bindPopup(&quot;San Francisco City Hall&quot;); circle_15._popup.options.maxWidth = 300; map.addLayer(circle_15) var circle_16 = L.circle([37.781332, -122.418603], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_16.bindPopup(&quot;Golden Gate at Polk&quot;); circle_16._popup.options.maxWidth = 300; map.addLayer(circle_16) var circle_17 = L.circle([37.80477, -122.403234], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_17.bindPopup(&quot;Embarcadero at Sansome&quot;); circle_17._popup.options.maxWidth = 300; map.addLayer(circle_17) var circle_18 = L.circle([37.780526, -122.390288], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_18.bindPopup(&quot;2nd at Townsend&quot;); circle_18._popup.options.maxWidth = 300; map.addLayer(circle_18) var circle_19 = L.circle([37.785299, -122.396236], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_19.bindPopup(&quot;2nd at Folsom&quot;); circle_19._popup.options.maxWidth = 300; map.addLayer(circle_19) var circle_20 = L.circle([37.786978, -122.398108], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_20.bindPopup(&quot;Howard at 2nd&quot;); circle_20._popup.options.maxWidth = 300; map.addLayer(circle_20) var circle_21 = L.circle([37.782259, -122.392738], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_21.bindPopup(&quot;2nd at South Park&quot;); circle_21._popup.options.maxWidth = 300; map.addLayer(circle_21) var circle_22 = L.circle([37.771058, -122.402717], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_22.bindPopup(&quot;Townsend at 7th&quot;); circle_22._popup.options.maxWidth = 300; map.addLayer(circle_22) var circle_23 = L.circle([37.774814, -122.418954], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_23.bindPopup(&quot;South Van Ness at Market&quot;); circle_23._popup.options.maxWidth = 300; map.addLayer(circle_23) var circle_24 = L.circle([37.776619, -122.417385], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_24.bindPopup(&quot;Market at 10th&quot;); circle_24._popup.options.maxWidth = 300; map.addLayer(circle_24) var circle_25 = L.circle([37.784878, -122.401014], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_25.bindPopup(&quot;Yerba Buena Center of the Arts (3rd @ Howard)&quot;); circle_25._popup.options.maxWidth = 300; map.addLayer(circle_25) var circle_26 = L.circle([37.7766, -122.39547], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_26.bindPopup(&quot;San Francisco Caltrain 2 (330 Townsend)&quot;); circle_26._popup.options.maxWidth = 300; map.addLayer(circle_26) var circle_27 = L.circle([37.776617, -122.39526], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_27.bindPopup(&quot;San Francisco Caltrain (Townsend at 4th)&quot;); circle_27._popup.options.maxWidth = 300; map.addLayer(circle_27) var circle_28 = L.circle([37.788446, -122.408499], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_28.bindPopup(&quot;Powell at Post (Union Square)&quot;); circle_28._popup.options.maxWidth = 300; map.addLayer(circle_28) var circle_29 = L.circle([37.781039, -122.411748], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_29.bindPopup(&quot;Civic Center BART (7th at Market)&quot;); circle_29._popup.options.maxWidth = 300; map.addLayer(circle_29) var circle_30 = L.circle([37.798522, -122.407245], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_30.bindPopup(&quot;Grant Avenue at Columbus Avenue&quot;); circle_30._popup.options.maxWidth = 300; map.addLayer(circle_30) var circle_31 = L.circle([37.794139, -122.394434], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_31.bindPopup(&quot;Steuart at Market&quot;); circle_31._popup.options.maxWidth = 300; map.addLayer(circle_31) var circle_32 = L.circle([37.7913, -122.399051], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_32.bindPopup(&quot;Mechanics Plaza (Market at Battery)&quot;); circle_32._popup.options.maxWidth = 300; map.addLayer(circle_32) var circle_33 = L.circle([37.786305, -122.404966], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_33.bindPopup(&quot;Market at 4th&quot;); circle_33._popup.options.maxWidth = 300; map.addLayer(circle_33) var circle_34 = L.circle([37.789625, -122.400811], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_34.bindPopup(&quot;Market at Sansome&quot;); circle_34._popup.options.maxWidth = 300; map.addLayer(circle_34) var circle_35 = L.circle([37.798541, -122.400862], 200, { color: 'None', fillColor: 'green', fillOpacity: 0.6 }); circle_35.bindPopup(&quot;Broadway St at Battery St&quot;); circle_35._popup.options.maxWidth = 300; map.addLayer(circle_35) </script> </body>
1 change: 1 addition & 0 deletions src/7-3.html
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/7-4.html
View file

Large diffs are not rendered by default.

0 comments on commit 14fd2b8

Please sign in to comment.